├── .gitignore ├── .jshintrc ├── CNAME ├── CONTRIBUTING.md ├── Gruntfile.js ├── README.md ├── app ├── dev.excluded.js ├── formlyDemo │ └── index.js ├── index.css ├── index.js ├── lodash-mixins.js ├── shared │ ├── ngCommon │ │ ├── constants │ │ │ ├── index.js │ │ │ └── onDev.js │ │ ├── directives │ │ │ ├── fd-event-navigate.js │ │ │ └── index.js │ │ ├── index.js │ │ └── services │ │ │ ├── index.js │ │ │ ├── stateUtils.js │ │ │ └── utils.js │ └── registerModule.js ├── states │ ├── index.js │ └── root │ │ ├── children │ │ ├── default │ │ │ ├── bootstrapHtml.html │ │ │ ├── formlyHtml.html │ │ │ ├── formlyJs.js │ │ │ ├── index.html │ │ │ └── index.js │ │ ├── examples │ │ │ ├── children │ │ │ │ ├── category │ │ │ │ │ ├── children │ │ │ │ │ │ ├── example │ │ │ │ │ │ │ ├── components │ │ │ │ │ │ │ │ ├── directives │ │ │ │ │ │ │ │ │ ├── fd-jsbin-example.css │ │ │ │ │ │ │ │ │ ├── fd-jsbin-example.js │ │ │ │ │ │ │ │ │ └── index.js │ │ │ │ │ │ │ │ ├── filters │ │ │ │ │ │ │ │ │ ├── index.js │ │ │ │ │ │ │ │ │ └── trust.js │ │ │ │ │ │ │ │ └── index.js │ │ │ │ │ │ │ ├── controller.js │ │ │ │ │ │ │ ├── index.html │ │ │ │ │ │ │ └── index.js │ │ │ │ │ │ └── index.js │ │ │ │ │ └── index.js │ │ │ │ └── index.js │ │ │ └── index.js │ │ ├── index.js │ │ └── users │ │ │ ├── children │ │ │ ├── index.js │ │ │ └── user-description │ │ │ │ ├── index.html │ │ │ │ └── index.js │ │ │ ├── components │ │ │ ├── data │ │ │ │ ├── README.md │ │ │ │ ├── users-data │ │ │ │ │ ├── alianza │ │ │ │ │ │ ├── description.md │ │ │ │ │ │ └── logo.png │ │ │ │ │ ├── duckiedocs │ │ │ │ │ │ ├── description.md │ │ │ │ │ │ └── logo.png │ │ │ │ │ ├── duckietv │ │ │ │ │ │ ├── description.md │ │ │ │ │ │ └── logo.png │ │ │ │ │ ├── groupraise │ │ │ │ │ │ ├── description.md │ │ │ │ │ │ └── logo.png │ │ │ │ │ ├── mongolar │ │ │ │ │ │ └── description.md │ │ │ │ │ ├── new │ │ │ │ │ │ ├── description.md │ │ │ │ │ │ └── logo.png │ │ │ │ │ ├── no-logo.png │ │ │ │ │ ├── panax │ │ │ │ │ │ ├── description.md │ │ │ │ │ │ └── logo.png │ │ │ │ │ ├── parakeet │ │ │ │ │ │ ├── description.md │ │ │ │ │ │ └── logo.png │ │ │ │ │ └── tillr │ │ │ │ │ │ ├── description.md │ │ │ │ │ │ └── logo.png │ │ │ │ └── users.js │ │ │ ├── directives │ │ │ │ ├── fd-user-logo.css │ │ │ │ ├── fd-user-logo.html │ │ │ │ ├── fd-user-logo.js │ │ │ │ └── index.js │ │ │ └── index.js │ │ │ ├── index.css │ │ │ ├── index.html │ │ │ └── index.js │ │ ├── components │ │ ├── directives │ │ │ ├── fd-example-search.css │ │ │ ├── fd-example-search.html │ │ │ ├── fd-example-search.js │ │ │ └── index.js │ │ ├── index.js │ │ └── resources │ │ │ └── logo.png │ │ ├── controller.js │ │ ├── index.css │ │ ├── index.html │ │ └── index.js └── utilities.css ├── bundle.js ├── examples.json ├── favicon.ico ├── index.html ├── package.json ├── res ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff └── glyphicons-halflings-regular.woff2 └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .grunt 3 | res 4 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "curly": true, 3 | "eqeqeq": true, 4 | "bitwise": true, 5 | "camelcase": true, 6 | "esnext": true, 7 | "expr": true, 8 | "forin": true, 9 | "freeze": true, 10 | "immed": true, 11 | "indent": 2, 12 | "latedef": "nofunc", 13 | "newcap": true, 14 | "noarg": true, 15 | "noempty": true, 16 | "nonbsp": true, 17 | "quotmark": "single", 18 | "undef": true, 19 | "unused": "vars", 20 | "trailing": true, 21 | "maxdepth": 4, 22 | "maxstatements": 30, 23 | "maxcomplexity": 5, 24 | "maxlen": 120, 25 | "browser": true, 26 | "node": true, 27 | "globals": { 28 | "angular": true, 29 | "ON_TEST": true, 30 | "ON_DEV": true, 31 | "ON_PROD": true, 32 | "VERSION": true, 33 | 34 | 35 | "inject": true, 36 | "describe": true, 37 | "it": true, 38 | "expect": true, 39 | "beforeEach": true, 40 | "afterEach": true 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /CNAME: -------------------------------------------------------------------------------- 1 | angular-formly.com 2 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | I've recorded several screencasts to demonstrate how to contribute. 4 | Here's [a playlist](https://www.youtube.com/playlist?list=PLV5CVI1eNcJi7lVVIuNyRhEuck1Z007BH) of them all. You'll find 5 | individual links by the respective sections 6 | 7 | ## Requesting an Example 8 | 9 | [Watch video](https://youtu.be/lu-c5C1t4Sk?list=PLV5CVI1eNcJi7lVVIuNyRhEuck1Z007BH) 10 | 11 | ## Creating an Example 12 | 13 | [Watch video](https://youtu.be/4dsXXTPET4A?list=PLV5CVI1eNcJi7lVVIuNyRhEuck1Z007BH) 14 | 15 | We LOVE examples! It's extremely helpful to everyone involved, so yes, please create examples :-) Follow these steps: 16 | 17 | 1. Create an example on jsbin by cloning [this template](http://jsbin.com/panovu/edit) 18 | 2. Make sure it's awesome and clean 19 | 3. Make a PR to [examples.json](https://github.com/formly-js/angular-formly-website/edit/master/examples.json) 20 | - The "jsbinId" is the unique part of the jsbin url ("panovu" is the jsbinId for the template) 21 | - *IMPORTANT*: Unless you're a jsbin pro subscriber, please add `noSSL: true`. Or just [purchase a pro subscription](https://jsbin.com/upgrade) :-) 22 | - Feel free to add "keywords" to the entry, this will make it easier to find 23 | - The "slug" is what will appear in the URL for the example. Make it: 24 | 1) easy to remember 25 | 2) separated by dashes 26 | 3) unique for the category 27 | 4. Wait patiently while it's evaluated :-) 28 | 5. Cheer with us! Formly rocks! :-) 29 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function(grunt) { 2 | 3 | grunt.initConfig({ 4 | 'gh-pages': { 5 | options: { 6 | message: 'Update ' + Date.now() + ' ' + getRandomEmoji() 7 | }, 8 | src: ['index.html', 'bundle.js', 'res/**/*', 'favicon.ico', 'CNAME', 'examples.json'] 9 | } 10 | }); 11 | 12 | grunt.loadNpmTasks('grunt-gh-pages'); 13 | 14 | grunt.registerTask('deploy', ['gh-pages']); 15 | }; 16 | 17 | 18 | function getRandomEmoji() { 19 | var emoji = [ 20 | 'ʕ •ᴥ•ʔ', 21 | '¯\\_(ツ)_/¯', 22 | '＼(＾O＾)／', 23 | 'ᕕ( ᐛ )ᕗ', 24 | '♪┏(・o･)┛♪┗ ( ･o･) ┓♪', 25 | '(ó ì_í)=óò=(ì_í ò)', 26 | 'd-_-b', 27 | '(－‸ლ)', 28 | 'ᕙ(⇀‸↼‶)ᕗ', 29 | '┬┴┬┴┤(･_├┬┴┬┴', 30 | '~=[,,_,,]:3', 31 | 'ಠ_ಠ', 32 | 'ლ(ಠ益ಠლ)', 33 | '[¬º-°]¬', 34 | 'ಠ_ರೃ', 35 | 'ʕ •́؈•̀)', 36 | '(◞‸◟；)', 37 | '(╯°□°)╯︵ ┻━┻', 38 | '(ó ì_í)=óò=(ì_í ò)', 39 | ]; 40 | return emoji[Math.floor(Math.random() * (emoji.length - 1))]; 41 | } 42 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # angular-formly website 2 | 3 | The website for [angular-formly](https://github.com/formly-js/angular-formly) 4 | -------------------------------------------------------------------------------- /app/dev.excluded.js: -------------------------------------------------------------------------------- 1 | let $injector = angular.element(document.body).injector(); 2 | window.$injector = $injector; 3 | 4 | addInjectable('$state'); 5 | addInjectable('stateUtils'); 6 | addInjectable('utils'); 7 | 8 | function addInjectable(name) { 9 | window[name] = $injector.get(name); 10 | } 11 | -------------------------------------------------------------------------------- /app/formlyDemo/index.js: -------------------------------------------------------------------------------- 1 | let _ = require('lodash'); 2 | let stateUtils = require('stateUtils'); 3 | let utils = require('ngCommon/services/utils'); 4 | // do this before requiring the state modules because they use stateUtils which registers it with the common module. 5 | let azCommonModuleName = require('ngCommon').name; 6 | 7 | let rootStates = require('../states'); 8 | let allStates = stateUtils.getStates(rootStates); 9 | let allStateModules = utils.flatten(rootStates, 'children'); 10 | 11 | let deps = _.union([ 12 | azCommonModuleName 13 | ], _.pluck(allStateModules, 'name')); 14 | 15 | let ngModule = require('registerModule')(deps); 16 | module.exports.name = ngModule.name; 17 | 18 | ngModule.config(config); 19 | 20 | function config($urlRouterProvider, $httpProvider, $compileProvider, $stateProvider, onDev) { 21 | $httpProvider.useApplyAsync(); 22 | 23 | $compileProvider.debugInfoEnabled(onDev); 24 | 25 | // setup states 26 | _.each(allStates, function(state) { 27 | $stateProvider.state(state); 28 | }); 29 | 30 | $urlRouterProvider.otherwise('/'); 31 | } 32 | -------------------------------------------------------------------------------- /app/index.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | height: 100%; 3 | } 4 | #root-view { 5 | min-height: 100%; 6 | /* equal to footer height */ 7 | margin-bottom: -50px; 8 | } 9 | #root-view:after { 10 | content: ""; 11 | display: block; 12 | } 13 | #footer, #root-view:after { 14 | height: 50px; 15 | } 16 | #footer { 17 | width: 100%; 18 | padding: 16px; 19 | background-color: #f5f5f5; 20 | } 21 | -------------------------------------------------------------------------------- /app/index.js: -------------------------------------------------------------------------------- 1 | if (window.location.protocol !== 'http:') { 2 | window.location.protocol = 'http'; // because not everyone who contributes examples has a paid jsbin account 3 | } 4 | require('angular'); 5 | require('bootstrap/dist/css/bootstrap.css'); 6 | require('./utilities.css'); 7 | require('./index.css'); 8 | require('./lodash-mixins'); 9 | 10 | var moduleName = require('./formlyDemo').name; 11 | 12 | angular.element(document).ready(function() { 13 | angular.bootstrap(document.body, [moduleName], {strictDi: true}); 14 | if (ON_DEV) { 15 | require('./dev.excluded'); 16 | } 17 | }); 18 | 19 | -------------------------------------------------------------------------------- /app/lodash-mixins.js: -------------------------------------------------------------------------------- 1 | var _ = require('lodash'); 2 | _.mixin({ 3 | startsWith: function startsWithMixin(string, start) { 4 | return startsOrEndsWith(_.first, string, start); 5 | }, 6 | endsWith: function endsWithMixin(string, end) { 7 | return startsOrEndsWith(_.last, string, end); 8 | }, 9 | isNullOrUndefined: function isNullOrUndefined() { 10 | return _.isUndefined.apply(_, arguments) || _.isNull.apply(_, arguments); 11 | }, 12 | getDirectory: function getDirectory(filepath) { 13 | return filepath.substr(0, _.lastIndexOf(filepath, '/')); 14 | } 15 | }); 16 | function startsOrEndsWith(fn, s1, s2) { 17 | return s1 && s2 && s1.length >= s2.length && fn(s1, s2.length).join('') === s2; 18 | } 19 | -------------------------------------------------------------------------------- /app/shared/ngCommon/constants/index.js: -------------------------------------------------------------------------------- 1 | let ngModule = require('registerModule')(); 2 | ngModule.constant('_', require('lodash')); 3 | require('./onDev')(ngModule); 4 | module.exports = ngModule.name; 5 | -------------------------------------------------------------------------------- /app/shared/ngCommon/constants/onDev.js: -------------------------------------------------------------------------------- 1 | module.exports = ngModule => { 2 | ngModule.constant('onDev', ON_DEV); 3 | }; 4 | -------------------------------------------------------------------------------- /app/shared/ngCommon/directives/fd-event-navigate.js: -------------------------------------------------------------------------------- 1 | module.exports = ngModule => { 2 | ngModule.directive('fdEventNavigate', function formlyEventNavigateDirective(stateUtils) { 3 | return { 4 | restrict: 'A', 5 | link: function(scope, el, attrs) { 6 | let tagName = el[0].tagName; 7 | let expressionRegex = /^(.*?)(\((.*?)(,(.*?))?\))?$/; 8 | if (tagName === 'A') { 9 | attrs.$observe('fdEventNavigate', function(value) { 10 | if (!value) { 11 | return; 12 | } 13 | let args = getEventArgs(value); 14 | let href = stateUtils.eventHref(...args); 15 | el.attr('href', href); 16 | }); 17 | } else if (tagName === 'BUTTON') { 18 | el.on('click', action); 19 | el.on('keyup', function(event) { 20 | if (event.which === 32 || event.which === 13) { 21 | action(event); 22 | } 23 | }); 24 | } else { 25 | throw new Error('fd-event-navigate must be on an or 21 | 22 | -------------------------------------------------------------------------------- /app/states/root/children/default/formlyHtml.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /app/states/root/children/default/formlyJs.js: -------------------------------------------------------------------------------- 1 | function YourCtrl() { 2 | var vm = this; 3 | 4 | vm.user = {}; 5 | 6 | // note, these field types will need to be 7 | // pre-defined. See the pre-built and custom templates 8 | // http://docs.angular-formly.com/v6.4.0/docs/custom-templates 9 | vm.userFields = [ 10 | { 11 | key: 'email', 12 | type: 'input', 13 | templateOptions: { 14 | type: 'email', 15 | label: 'Email address', 16 | placeholder: 'Enter email' 17 | } 18 | }, 19 | { 20 | key: 'password', 21 | type: 'input', 22 | templateOptions: { 23 | type: 'password', 24 | label: 'Password', 25 | placeholder: 'Password' 26 | } 27 | }, 28 | { 29 | key: 'file', 30 | type: 'file', 31 | templateOptions: { 32 | label: 'File input', 33 | description: 'Example block-level help text here', 34 | url: 'https://example.com/upload' 35 | } 36 | }, 37 | { 38 | key: 'checked', 39 | type: 'checkbox', 40 | templateOptions: { 41 | label: 'Check me out' 42 | } 43 | } 44 | ]; 45 | } 46 | -------------------------------------------------------------------------------- /app/states/root/children/default/index.html: -------------------------------------------------------------------------------- 1 |
2 | Welcome to the official Angular Formly website! 3 | Feel free to stick around here and browse/play with the examples. 4 |
5 |

Features

6 | 79 |
80 |
81 |

The Gist

82 |
83 | Maintain less html in favor of JavaScript 84 |
85 |
86 | 87 |
88 | Go from this (copied from getbootstrap.com): 89 |
90 |
91 | To this: 92 |
93 |
94 | and the power of JavaScript 95 |
96 |
97 |
98 | 99 |
100 |
101 | And that's not where it gets really cool. We haven't even addressed 102 | validation, user interaction, etc, etc, etc... 103 |
104 | 105 |
106 | 107 |
108 | So take a look around and catch us on GitHub 109 |
110 | 111 |
112 |
113 |

Introduction Example

114 | 115 |
116 | 117 |
118 | -------------------------------------------------------------------------------- /app/states/root/children/default/index.js: -------------------------------------------------------------------------------- 1 | // gotta put it on window because angular-highlightjs depends on it being there :-( 2 | var hljs = window.hljs = require('highlight.js/lib/highlight.js'); 3 | hljs.registerLanguage('javascript', require('highlight.js/lib/languages/javascript')); 4 | hljs.registerLanguage('html', require('highlight.js/lib/languages/xml')); 5 | require('highlight.js/styles/github.css'); 6 | 7 | require('imports?hljs=highlight.js!angular-highlightjs/angular-highlightjs'); 8 | var deps = [require('ngCommon').name, 'hljs']; 9 | 10 | let ngModule = require('registerModule')(deps); 11 | 12 | let bootstrapHtml = require('./bootstrapHtml.html'); 13 | let formlyHtml = require('./formlyHtml.html'); 14 | let formlyJs = require('!raw!./formlyJs.js'); 15 | 16 | module.exports = { 17 | name: ngModule.name, 18 | url: '', 19 | template: require('./index.html'), 20 | data: { 21 | activationEvents: 'goHome' 22 | }, 23 | controllerAs: 'vm', 24 | controller: function() { 25 | 'ngInject'; 26 | var vm = this; 27 | var base = `https://github.com/formly-js/angular-formly`; 28 | angular.extend(vm, {bootstrapHtml, formlyHtml, formlyJs}); 29 | vm.docs = docs; 30 | vm.base = baseWithSuffix; 31 | vm.prebuiltTemplates = defaultTemplates([ 32 | {name: 'Bootstrap'}, {name: 'LumX'}, {name: 'Vanilla HTML', suffix: 'vanilla'} 33 | ]); 34 | vm.wipTemplates = defaultTemplates([ 35 | {name: 'angular-material', suffix: 'material'}, {name: 'Ionic'}, {name: 'Foundation'} 36 | ]); 37 | 38 | function docs(slug) { 39 | return `http://docs.angular-formly.com/docs/${slug}`; 40 | } 41 | 42 | function baseWithSuffix(suffix = '') { 43 | return `${base}${suffix}`; 44 | } 45 | 46 | function defaultTemplates(templates) { 47 | return templates.map(item => ({name: item.name, suffix: item.suffix || item.name.toLowerCase()})); 48 | } 49 | } 50 | }; 51 | -------------------------------------------------------------------------------- /app/states/root/children/examples/children/category/children/example/components/directives/fd-jsbin-example.css: -------------------------------------------------------------------------------- 1 | .fd-jsbin-example { 2 | height: 900px; 3 | box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26); 4 | } 5 | 6 | .fd-jsbin-example iframe { 7 | border: none; 8 | } 9 | -------------------------------------------------------------------------------- /app/states/root/children/examples/children/category/children/example/components/directives/fd-jsbin-example.js: -------------------------------------------------------------------------------- 1 | module.exports = ngModule => { 2 | ngModule.directive('fdJsbinExample', fdJsbinExample); 3 | 4 | fdJsbinExample.styles = require('./fd-jsbin-example.css'); 5 | 6 | function fdJsbinExample() { 7 | return { 8 | restrict: 'E', 9 | scope: { 10 | noSsl: '@', 11 | jsbinId: '@' 12 | }, 13 | link: function(scope, el) { 14 | // const s = scope.noSSL === 'true' ? '' : 's'; 15 | const s = ''; // maybe eventually we'll add HTTPS support again... 16 | el.replaceWith(angular.element(` 17 |
18 | 22 |
23 | `)); 24 | } 25 | }; 26 | } 27 | }; 28 | -------------------------------------------------------------------------------- /app/states/root/children/examples/children/category/children/example/components/directives/index.js: -------------------------------------------------------------------------------- 1 | module.exports = ngModule => { 2 | require('./fd-jsbin-example')(ngModule); 3 | }; 4 | -------------------------------------------------------------------------------- /app/states/root/children/examples/children/category/children/example/components/filters/index.js: -------------------------------------------------------------------------------- 1 | module.exports = ngModule => { 2 | require('./trust')(ngModule); 3 | }; 4 | -------------------------------------------------------------------------------- /app/states/root/children/examples/children/category/children/example/components/filters/trust.js: -------------------------------------------------------------------------------- 1 | module.exports = ngModule => { 2 | ngModule.filter('trust', trustFunction); 3 | function trustFunction($sce) { 4 | return function trust(value, type) { 5 | // Defaults to treating trusted value as `html` 6 | return $sce.trustAs(type || 'html', value); 7 | }; 8 | } 9 | }; 10 | -------------------------------------------------------------------------------- /app/states/root/children/examples/children/category/children/example/components/index.js: -------------------------------------------------------------------------------- 1 | module.exports = ngModule => { 2 | require('./directives/index')(ngModule); 3 | require('./filters/index')(ngModule); 4 | }; 5 | -------------------------------------------------------------------------------- /app/states/root/children/examples/children/category/children/example/controller.js: -------------------------------------------------------------------------------- 1 | module.exports = function ExampleCtrl(examples, category, slug, _, stateUtils) { 2 | 'ngInject'; 3 | var vm = this; 4 | let selectedCategory = _.find(examples, {name: category}); 5 | if (!selectedCategory) { 6 | redirectBySlug(slug); 7 | } else { 8 | vm.example = _.find(selectedCategory.examples, {slug}); 9 | if (!vm.example) { 10 | redirectBySlug(slug); 11 | } 12 | } 13 | 14 | 15 | function redirectBySlug(slug) { 16 | 17 | let exampleNewLocation; 18 | let newCategoryLocation; 19 | _.each(examples, category => { 20 | newCategoryLocation = category; 21 | exampleNewLocation = _.find(category.examples, {slug}); 22 | return !exampleNewLocation; 23 | }); 24 | if (exampleNewLocation) { 25 | stateUtils.eventNavigate('navigateToExample', {category: newCategoryLocation.name, slug}); 26 | } 27 | } 28 | }; 29 | -------------------------------------------------------------------------------- /app/states/root/children/examples/children/category/children/example/index.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

{{vm.example.title}}

4 | 5 |
6 |
7 |

8 | :-( 9 |
10 | Example not found 11 |

12 |

13 | Why don't you look at some of the others though :-) 14 |

15 |
16 | 21 |
22 | -------------------------------------------------------------------------------- /app/states/root/children/examples/children/category/children/example/index.js: -------------------------------------------------------------------------------- 1 | let ngModule = require('registerModule')(require('ngCommon')); 2 | require('./components/index')(ngModule); 3 | 4 | let stateUtils = require('stateUtils'); 5 | 6 | module.exports = { 7 | name: ngModule.name, 8 | url: ':slug', 9 | template: require('./index.html'), 10 | controller: require('./controller'), 11 | controllerAs: 'vm', 12 | resolve: { 13 | slug: stateUtils.resolveParameter('slug') 14 | }, 15 | data: { 16 | activationEvents: ['exampleSelected', 'navigateToExample'] 17 | } 18 | }; 19 | 20 | -------------------------------------------------------------------------------- /app/states/root/children/examples/children/category/children/index.js: -------------------------------------------------------------------------------- 1 | module.exports = [ 2 | require('./example') 3 | ]; 4 | -------------------------------------------------------------------------------- /app/states/root/children/examples/children/category/index.js: -------------------------------------------------------------------------------- 1 | let ngModule = require('registerModule')(require('ngCommon')); 2 | let stateUtils = require('stateUtils'); 3 | 4 | module.exports = { 5 | name: ngModule.name, 6 | url: ':category', 7 | abstract: true, 8 | template: '
', 9 | children: require('./children'), 10 | resolve: { 11 | category: stateUtils.resolveParameter('category') 12 | } 13 | }; 14 | 15 | -------------------------------------------------------------------------------- /app/states/root/children/examples/children/index.js: -------------------------------------------------------------------------------- 1 | module.exports = [ 2 | require('./category') 3 | ]; 4 | -------------------------------------------------------------------------------- /app/states/root/children/examples/index.js: -------------------------------------------------------------------------------- 1 | let ngModule = require('registerModule')(require('ngCommon')); 2 | 3 | module.exports = { 4 | name: ngModule.name, 5 | url: 'example', 6 | abstract: true, 7 | template: '
', 8 | children: require('./children') 9 | }; 10 | 11 | -------------------------------------------------------------------------------- /app/states/root/children/index.js: -------------------------------------------------------------------------------- 1 | module.exports = [ 2 | require('./default'), 3 | require('./users'), 4 | require('./examples') 5 | ]; 6 | -------------------------------------------------------------------------------- /app/states/root/children/users/children/index.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | require('./user-description') 3 | ]; 4 | -------------------------------------------------------------------------------- /app/states/root/children/users/children/user-description/index.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 |
6 | 7 |
8 |
9 |

10 | {{::vm.user.name}} 11 | {{::vm.user.name}} 12 |

13 |
14 |
15 |
16 | -------------------------------------------------------------------------------- /app/states/root/children/users/children/user-description/index.js: -------------------------------------------------------------------------------- 1 | const ngModule = require('registerModule')(require('ngCommon')); 2 | const stateUtils = require('stateUtils'); 3 | 4 | module.exports = { 5 | name: ngModule.name, 6 | url: ':slug', 7 | template: require('./index.html'), 8 | data: { 9 | activationEvents: 'showUserDescription' 10 | }, 11 | controllerAs: 'vm', 12 | resolve: { 13 | slug: stateUtils.resolveParameter('slug') 14 | }, 15 | controller: function(users, slug, _, $sce) { 16 | 'ngInject'; 17 | var vm = this; 18 | vm.user = _.find(users, {slug}); 19 | vm.userDescription = $sce.trustAsHtml(vm.user.description); 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /app/states/root/children/users/components/data/README.md: -------------------------------------------------------------------------------- 1 | # Adding a user 2 | 3 | 1. Fork and clone the repo locally (https://help.github.com/articles/fork-a-repo/) 4 | 2. Prepare your png logo (max width: 400px; max height: 400px) and use https://tinypng.com/ 5 | 3. Create a PR to this file. The key is what will appear in the URL for the example. Make it: 6 | 1) easy to remember 7 | 2) separated by dashes 8 | 3) unique 9 | 4. Wait patiently while it's evaluated :-) 10 | 5. Cheer with us! Formly rocks! :-) 11 | -------------------------------------------------------------------------------- /app/states/root/children/users/components/data/users-data/alianza/description.md: -------------------------------------------------------------------------------- 1 | Alianza is a VoIP platform. Alianza is actually where [Kent C. Dodds](https://twitter.com/kentcdodds) works. (He's the 2 | guy who's working on angular-formly). Alianza uses formly heavily in the Admin portal where customers create and manage 3 | accounts. 4 | 5 | -------------------------------------------------------------------------------- /app/states/root/children/users/components/data/users-data/alianza/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formly-js/angular-formly-website/7d3ddd7786c378e62f0a8df267af7d936eb11db8/app/states/root/children/users/components/data/users-data/alianza/logo.png -------------------------------------------------------------------------------- /app/states/root/children/users/components/data/users-data/duckiedocs/description.md: -------------------------------------------------------------------------------- 1 | Free (for personal use) and open-source document manager that semi-automatically encrypts and organizes your files and 2 | extracts the text to make the snailmail and important documents you receive over the years but don't want in the could 3 | 'googleable' and manageable. 4 | -------------------------------------------------------------------------------- /app/states/root/children/users/components/data/users-data/duckiedocs/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formly-js/angular-formly-website/7d3ddd7786c378e62f0a8df267af7d936eb11db8/app/states/root/children/users/components/data/users-data/duckiedocs/logo.png -------------------------------------------------------------------------------- /app/states/root/children/users/components/data/users-data/duckietv/description.md: -------------------------------------------------------------------------------- 1 | DuckieTV is a Google Chrome extension (Now also available as standalone builds for Windows/Mac/Linux!) that takes care of TV-Show addicts by providing a personalized TV-Show calendar. DuckieTV makes sure the information is always up-to-date and gives you an integrated blocking-resistant torrent search to help you get to the right download as easy as possible. 2 | + 3 | +With the integrated DuckieTorrent client you can connect DuckieTV to your local Torrent client and be updated on the download progress without switching applications. (Now includes support for µTorrent/BitTorrent, qBittorrent, Tixati and Transmission clients). 4 | + 5 | +As of v0.60 DuckieTV also is also finally becoming a worthy SickBeard competitor by introducing an automatic downloading of shows that have aired and translations into 11 languages. (English, Deutch, Español, Français, Italiano, 日本, 한국어, Nederlands, Purtugese, Русский, Svenska, 简体中文 ) 6 | + 7 | +for more info, screenshots, downloads other media go to [duckie.tv](http://duckie.tv) 8 | 9 | -------------------------------------------------------------------------------- /app/states/root/children/users/components/data/users-data/duckietv/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formly-js/angular-formly-website/7d3ddd7786c378e62f0a8df267af7d936eb11db8/app/states/root/children/users/components/data/users-data/duckietv/logo.png -------------------------------------------------------------------------------- /app/states/root/children/users/components/data/users-data/groupraise/description.md: -------------------------------------------------------------------------------- 1 | GroupRaise helps restaurants host meals where groups of 20-200+ diners in exchange for donating a percentage of the sales to a charitable cause or organization. These meals are organized, found, and marketed online. The organization process, which could take weeks before or in some cases was not even possible, now takes a few clicks on GroupRaise.com. 2 | 3 | GroupRaise improves all aspects of the fundraising experience, but a huge part of this is saving people time. Having clean, interactive, usable forms is critical to this, and (as of 2016) we are midway through transitioning all of our forms to angular-formly! 4 | -------------------------------------------------------------------------------- /app/states/root/children/users/components/data/users-data/groupraise/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formly-js/angular-formly-website/7d3ddd7786c378e62f0a8df267af7d936eb11db8/app/states/root/children/users/components/data/users-data/groupraise/logo.png -------------------------------------------------------------------------------- /app/states/root/children/users/components/data/users-data/mongolar/description.md: -------------------------------------------------------------------------------- 1 | Mongolar uses angular-formly for all its form generations -------------------------------------------------------------------------------- /app/states/root/children/users/components/data/users-data/new/description.md: -------------------------------------------------------------------------------- 1 | You can add your project to this list by following these steps: 2 | 3 | 1. Submit an issue on GitHub using [this template](http://issuetemplate.com/#/formly-js/angular-formly-website/new-user) 4 | from issuetemplate.com :-) 5 | (Or just submit a regular [old issue](https://github.com/formly-js/angular-formly-website/issues/new)) 6 | 7 | That's it! If you want to be more helpful, please submit a PR for it! 8 | 9 | If you want to submit a PR, you'll be working in this directory: 10 | [here](https://github.com/formly-js/angular-formly-website/tree/master/app/states/root/children/users/components/data) 11 | -------------------------------------------------------------------------------- /app/states/root/children/users/components/data/users-data/new/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formly-js/angular-formly-website/7d3ddd7786c378e62f0a8df267af7d936eb11db8/app/states/root/children/users/components/data/users-data/new/logo.png -------------------------------------------------------------------------------- /app/states/root/children/users/components/data/users-data/no-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formly-js/angular-formly-website/7d3ddd7786c378e62f0a8df267af7d936eb11db8/app/states/root/children/users/components/data/users-data/no-logo.png -------------------------------------------------------------------------------- /app/states/root/children/users/components/data/users-data/panax/description.md: -------------------------------------------------------------------------------- 1 | Panax is a stack of technologies to generate applications automatically based on a relational data model. Customization and extensibility is done via configuration, nevertheless Panax aim is to generate an usable app with less possible interaction from the developer (based on heuristics, assumptions, etc). 2 | 3 | One of the most important UI for an application are forms, therefore we heavily rely on angular-formly to ease it's generation. 4 | -------------------------------------------------------------------------------- /app/states/root/children/users/components/data/users-data/panax/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formly-js/angular-formly-website/7d3ddd7786c378e62f0a8df267af7d936eb11db8/app/states/root/children/users/components/data/users-data/panax/logo.png -------------------------------------------------------------------------------- /app/states/root/children/users/components/data/users-data/parakeet/description.md: -------------------------------------------------------------------------------- 1 | Parakeet is a keyless entry system designed to make vacation rentals easier to manage and rent. Parakeet uses 2 | angular-formly for pretty much every page as the application is very much a CRUD app and form heavy. 3 | -------------------------------------------------------------------------------- /app/states/root/children/users/components/data/users-data/parakeet/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formly-js/angular-formly-website/7d3ddd7786c378e62f0a8df267af7d936eb11db8/app/states/root/children/users/components/data/users-data/parakeet/logo.png -------------------------------------------------------------------------------- /app/states/root/children/users/components/data/users-data/tillr/description.md: -------------------------------------------------------------------------------- 1 | tillr is a London based startup software provider helping public services and small businesses manage their team, tasks and workload simply. Whether you want to monitor the status of a project, increase your productivity or track the overall progress of your business, tillr can help. 2 | 3 | Naturally, a business generates a lot of data. According to our customers, one of the most powerful features of tillr is the ability to capture that data, using client facing forms rendered by formly. tillr have also developed an in-house GUI that allows non-developers to build formly forms quickly and easily. 4 | -------------------------------------------------------------------------------- /app/states/root/children/users/components/data/users-data/tillr/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formly-js/angular-formly-website/7d3ddd7786c378e62f0a8df267af7d936eb11db8/app/states/root/children/users/components/data/users-data/tillr/logo.png -------------------------------------------------------------------------------- /app/states/root/children/users/components/data/users.js: -------------------------------------------------------------------------------- 1 | /* 2 | See the README.md next to this file... 3 | */ 4 | 5 | 6 | export default [ 7 | { 8 | name: 'Alianza Inc.', 9 | link: 'http://www.alianza.com/', 10 | slug: 'alianza', 11 | logo: require('./users-data/alianza/logo.png'), 12 | description: require('./users-data/alianza/description.md') 13 | }, 14 | { 15 | name: 'Parakeet', 16 | link: 'http://goparakeet.com/', 17 | slug: 'parakeet', 18 | logo: require('./users-data/parakeet/logo.png'), 19 | description: require('./users-data/parakeet/description.md') 20 | }, 21 | { 22 | name: 'Panax.io', 23 | link: 'http://panax.io/', 24 | slug: 'panax', 25 | logo: require('./users-data/panax/logo.png'), 26 | description: require('./users-data/panax/description.md') 27 | }, 28 | { 29 | name: 'DuckieDocs', 30 | slug: 'duckiedocs', 31 | logo: require('./users-data/duckiedocs/logo.png'), 32 | link: 'https://github.com/SchizoDuckie/DuckieDocs', 33 | description: require('./users-data/duckiedocs/description.md') 34 | }, 35 | { 36 | name: 'DuckieTV', 37 | slug: 'duckietv', 38 | logo: require('./users-data/duckietv/logo.png'), 39 | link: 'http://duckie.tv/', 40 | description: require('./users-data/duckietv/description.md') 41 | }, 42 | { 43 | name: 'mongolar', 44 | slug: 'mongolar', 45 | logo: require('./users-data/no-logo.png'), 46 | link: 'https://github.com/mongolar/mongolar', 47 | description: require('./users-data/mongolar/description.md') 48 | }, 49 | { 50 | name: 'tillr', 51 | slug: 'tillr', 52 | logo: require('./users-data/tillr/logo.png'), 53 | link: 'http://tillr.io', 54 | description: require('./users-data/tillr/description.md') 55 | }, 56 | { 57 | name: 'GroupRaise', 58 | slug: 'groupraise', 59 | logo: require('./users-data/groupraise/logo.png'), 60 | link: 'http://groupraise.com', 61 | description: require('./users-data/groupraise/description.md') 62 | }, 63 | { 64 | name: 'Add Your Project!', 65 | slug: 'new', 66 | logo: require('./users-data/new/logo.png'), 67 | description: require('./users-data/new/description.md') 68 | } 69 | ]; 70 | -------------------------------------------------------------------------------- /app/states/root/children/users/components/directives/fd-user-logo.css: -------------------------------------------------------------------------------- 1 | .fd-user-logo.center-vertically { 2 | transition: all .5s; 3 | line-height: 250px; 4 | width: 250px; 5 | height: 250px; 6 | .user-logo { 7 | transition: all .5s; 8 | max-width: 250px; 9 | max-height: 250px; 10 | } 11 | &.shrink { 12 | line-height: 0; 13 | height: 0; 14 | width: 0; 15 | .user-logo { 16 | max-height: 0; 17 | max-width: 0; 18 | } 19 | } 20 | } 21 | 22 | -------------------------------------------------------------------------------- /app/states/root/children/users/components/directives/fd-user-logo.html: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /app/states/root/children/users/components/directives/fd-user-logo.js: -------------------------------------------------------------------------------- 1 | export default ngModule => { 2 | ngModule.directive('fdUserLogo', fdUserLogo); 3 | 4 | require('./fd-user-logo.css'); 5 | function fdUserLogo() { 6 | return { 7 | restrict: 'E', 8 | template: require('./fd-user-logo.html'), 9 | scope: { 10 | shrink: '=', 11 | logo: '=', 12 | centerVertically: '@' 13 | }, 14 | controllerAs: 'vm', 15 | bindToController: true, 16 | controller: angular.noop 17 | }; 18 | } 19 | }; 20 | -------------------------------------------------------------------------------- /app/states/root/children/users/components/directives/index.js: -------------------------------------------------------------------------------- 1 | export default ngModule => { 2 | require('./fd-user-logo')(ngModule); 3 | }; 4 | -------------------------------------------------------------------------------- /app/states/root/children/users/components/index.js: -------------------------------------------------------------------------------- 1 | export default ngModule => { 2 | require('./directives')(ngModule); 3 | }; 4 | -------------------------------------------------------------------------------- /app/states/root/children/users/index.css: -------------------------------------------------------------------------------- 1 | .\@Users { 2 | .user { 3 | text-align: center; 4 | float: left; 5 | padding: 15px; 6 | } 7 | .user-name { 8 | font-weight: bold; 9 | font-size: 20px; 10 | margin-top: 14px; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /app/states/root/children/users/index.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 | 6 |
{{user.name}}
7 | 8 |
9 |
10 |
11 | 12 |
13 | -------------------------------------------------------------------------------- /app/states/root/children/users/index.js: -------------------------------------------------------------------------------- 1 | const ngModule = require('registerModule')(require('ngCommon')); 2 | const stateUtils = require('stateUtils'); 3 | 4 | const formlyUsers = require('./components/data/users'); 5 | formlyUsers.forEach(user => { 6 | user.slug = user.slug || user.name.replace(/ /g, '-').replace(/\./g, '').toLowerCase(); 7 | }); 8 | require('./index.css'); 9 | require('./components')(ngModule); 10 | 11 | module.exports = { 12 | name: ngModule.name, 13 | url: 'users', 14 | template: require('./index.html'), 15 | data: { 16 | activationEvents: 'showUsers' 17 | }, 18 | children: require('./children'), 19 | resolve: { 20 | users: stateUtils.resolveIdentity(formlyUsers) 21 | }, 22 | controllerAs: 'vm', 23 | controller: function(users) { 24 | 'ngInject'; 25 | var vm = this; 26 | vm.users = users; 27 | vm.inDetails = inDetails; 28 | 29 | function inDetails() { 30 | return stateUtils.includes('users/'); 31 | } 32 | } 33 | }; 34 | -------------------------------------------------------------------------------- /app/states/root/components/directives/fd-example-search.css: -------------------------------------------------------------------------------- 1 | .fd-example-search .formly-examples .example-link { 2 | transition: color .3s; 3 | } 4 | 5 | .fd-example-search .formly-examples .example-link.active { 6 | color: #B52E31; 7 | } 8 | -------------------------------------------------------------------------------- /app/states/root/components/directives/fd-example-search.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 | {{::category.title}} 15 |
16 | {{example.title}} 17 |
18 |
19 |
20 |
21 |
22 | -------------------------------------------------------------------------------- /app/states/root/components/directives/fd-example-search.js: -------------------------------------------------------------------------------- 1 | export default ngModule => { 2 | ngModule.directive('fdExampleSearch', fdExampleSearch); 3 | 4 | require('./fd-example-search.css'); 5 | 6 | function fdExampleSearch() { 7 | return { 8 | restrict: 'E', 9 | scope: { 10 | examples: '=' 11 | }, 12 | template: require('./fd-example-search.html'), 13 | controllerAs: 'vm', 14 | bindToController: true, 15 | controller: function(stateUtils, $filter) { 16 | var vm = this; 17 | 18 | 19 | vm.onSearchEntered = onSearchEntered; 20 | var allTheExamples = []; 21 | 22 | vm.exampleClass = exampleClass; 23 | 24 | angular.forEach(vm.examples, function(category) { 25 | allTheExamples = allTheExamples.concat(category.examples); 26 | angular.forEach(category.examples, example => example.category = category.name); 27 | }); 28 | 29 | 30 | function onSearchEntered($event, search) { 31 | var filteredExamples = $filter('filter')(allTheExamples, search); 32 | if (filteredExamples && (filteredExamples.length === 1 || $event.keyCode === 13)) { 33 | stateUtils.eventNavigate('exampleSelected', filteredExamples[0]); 34 | if ($event.keyCode === 13) { 35 | vm.search = null; 36 | } 37 | } 38 | } 39 | 40 | function exampleClass(example) { 41 | return { 42 | active: stateUtils.includesEvent('exampleSelected', example) 43 | }; 44 | } 45 | } 46 | }; 47 | } 48 | }; 49 | -------------------------------------------------------------------------------- /app/states/root/components/directives/index.js: -------------------------------------------------------------------------------- 1 | export default ngModule => { 2 | require('./fd-example-search')(ngModule); 3 | }; 4 | -------------------------------------------------------------------------------- /app/states/root/components/index.js: -------------------------------------------------------------------------------- 1 | export default ngModule => { 2 | require('./directives')(ngModule); 3 | }; 4 | -------------------------------------------------------------------------------- /app/states/root/components/resources/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formly-js/angular-formly-website/7d3ddd7786c378e62f0a8df267af7d936eb11db8/app/states/root/components/resources/logo.png -------------------------------------------------------------------------------- /app/states/root/controller.js: -------------------------------------------------------------------------------- 1 | module.exports = function MainCtrl(examples, logoSrc) { 2 | 'ngInject'; 3 | var vm = this; 4 | 5 | vm.examples = examples; 6 | vm.logoSrc = logoSrc; 7 | }; 8 | -------------------------------------------------------------------------------- /app/states/root/index.css: -------------------------------------------------------------------------------- 1 | .main-ui-view { 2 | position: relative; 3 | } 4 | 5 | .main-ui-view [ui-view] { 6 | width: 100%; 7 | transition: all 0.3s ease-in-out; 8 | } 9 | 10 | .main-ui-view [ui-view].ng-enter, 11 | .main-ui-view [ui-view].ng-leave { 12 | position: absolute; 13 | opacity: 0; 14 | } 15 | 16 | .main-ui-view [ui-view].ng-enter { 17 | position: absolute; 18 | opacity: 0; 19 | } 20 | 21 | .main-ui-view [ui-view].ng-enter-active { 22 | opacity: 1; 23 | } 24 | 25 | .main-ui-view [ui-view].ng-leave { 26 | opacity: 1; 27 | } 28 | 29 | .main-ui-view [ui-view].ng-leave-active { 30 | position: absolute; 31 | opacity: 0; 32 | } 33 | 34 | .left-nav-title { 35 | font-size: 1.3em; 36 | font-weight: bold; 37 | } 38 | -------------------------------------------------------------------------------- /app/states/root/index.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

4 | Angular Formly logoangular-formly 5 |
6 | JavaScript Powered Forms for AngularJS 7 |

8 |
9 | 10 |
11 |
12 |
13 |
14 |

Links

15 | Documentation 16 |
17 | Learn angular-formly 18 |
19 | Get Help 20 |
21 | Who uses angular-formly? 22 |
23 | Formly for Angular 2 24 |
25 |

Examples

26 | 27 |
28 | $upport angular-formly 29 |
30 |
31 |
32 |
33 | Sponsor 34 |
35 |
36 |
37 | 38 |
39 | -------------------------------------------------------------------------------- /app/states/root/index.js: -------------------------------------------------------------------------------- 1 | const ngModule = require('registerModule')(require('ngCommon')); 2 | const stateUtils = require('stateUtils'); 3 | 4 | require('./components')(ngModule); 5 | 6 | const logoSrc = require('./components/resources/logo.png'); 7 | 8 | module.exports = { 9 | name: ngModule.name, 10 | abstract: true, 11 | styles: require('./index.css'), 12 | template: require('./index.html'), 13 | controller: require('./controller'), 14 | controllerAs: 'vm', 15 | children: require('./children'), 16 | resolve: { 17 | examples: stateUtils.resolveRequest('https://rawgit.com/formly-js/angular-formly-website/master/examples.json'), 18 | logoSrc: stateUtils.resolveIdentity(logoSrc) 19 | } 20 | }; 21 | 22 | -------------------------------------------------------------------------------- /app/utilities.css: -------------------------------------------------------------------------------- 1 | .\+text-center { 2 | text-align: center; 3 | } 4 | 5 | .\+font-size-large { 6 | font-size: 1.1em; 7 | } 8 | 9 | .\+font-size-xlarge { 10 | font-size: 3.7em; 11 | } 12 | 13 | .\+margin-top-small { 14 | margin-top: 20px; 15 | } 16 | 17 | .\+margin-bottom-medium { 18 | margin-bottom: 40px; 19 | } 20 | 21 | .\+margin-bottom-large { 22 | margin-bottom: 80px; 23 | } 24 | -------------------------------------------------------------------------------- /examples.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "title": "Intro", 4 | "name": "intro", 5 | "examples": [ 6 | { 7 | "title": "Introduction Example", 8 | "slug": "introduction", 9 | "jsbinId": "kunaho" 10 | }, 11 | { 12 | "title": "Codementor", 13 | "slug": "codementor", 14 | "jsbinId": "yopola" 15 | } 16 | ] 17 | }, 18 | { 19 | "title": "Field Options", 20 | "name": "field-options", 21 | "examples": [ 22 | { 23 | "title": "Expression Properties", 24 | "slug": "expression-properties", 25 | "jsbinId": "vupihu" 26 | }, 27 | { 28 | "title": "Model", 29 | "slug": "model", 30 | "jsbinId": "haxenu" 31 | }, 32 | { 33 | "title": "Default Value", 34 | "slug": "default-value", 35 | "jsbinId": "kecaloq" 36 | }, 37 | { 38 | "title": "Hide Fields", 39 | "slug": "hide-fields", 40 | "jsbinId": "femepa", 41 | "keywords": "hideExpression expressionProperties" 42 | }, 43 | { 44 | "title": "modelOptions", 45 | "slug": "model-options", 46 | "jsbinId": "zeroyu", 47 | "keywords": "ng-model-options model options" 48 | }, 49 | { 50 | "title": "Watchers", 51 | "slug": "watchers", 52 | "jsbinId": "kilihu" 53 | }, 54 | { 55 | "title": "onKeypress", 56 | "slug": "on-keypress", 57 | "jsbinId": "hecece", 58 | "keywords": "ng-keypress ng-keyup ng-keydown ng-click" 59 | }, 60 | { 61 | "title": "templateOptions.focus", 62 | "slug": "focus", 63 | "jsbinId": "nemika", 64 | "keywords": "focus on-focus ng-focus onFocus" 65 | }, 66 | { 67 | "title": "parsers and formatters", 68 | "slug": "parsers-and-formatters", 69 | "jsbinId": "luwoso", 70 | "keywords": "change model update different" 71 | } 72 | ] 73 | }, 74 | { 75 | "title": "Form Options", 76 | "name": "form-options", 77 | "examples": [ 78 | { 79 | "title": "Reset Model", 80 | "slug": "reset-model", 81 | "jsbinId": "fufado" 82 | }, 83 | { 84 | "title": "Form State", 85 | "slug": "form-state", 86 | "jsbinId": "xukure" 87 | } 88 | ] 89 | }, 90 | { 91 | "title": "Bootstrap Formly", 92 | "name": "bootstrap-formly", 93 | "examples": [ 94 | { 95 | "title": "Table Rows", 96 | "slug": "bootstrap-table-rows", 97 | "jsbinId": "tuliju" 98 | }, 99 | { 100 | "title": "Select", 101 | "slug": "select", 102 | "jsbinId": "tiwizu", 103 | "keywords": "bootstrap select" 104 | } 105 | ] 106 | }, 107 | { 108 | "title": "Custom Types", 109 | "name": "custom-types", 110 | "examples": [ 111 | { 112 | "title": "Creating Custom Templates", 113 | "slug": "custom-templates", 114 | "jsbinId": "xekali" 115 | }, 116 | { 117 | "title": "Default Options", 118 | "slug": "default-options", 119 | "jsbinId": "medayo", 120 | "keywords": "optionsTypes defaultOptions custom types validation validators extends" 121 | }, 122 | { 123 | "title": "Extending Types", 124 | "slug": "extending-types", 125 | "jsbinId": "koweni" 126 | } 127 | ] 128 | }, 129 | { 130 | "title": "Integrations", 131 | "name": "integrations", 132 | "examples": [ 133 | { 134 | "title": "angular-material", 135 | "slug": "angular-material", 136 | "jsbinId": "menequ", 137 | "keywords": "material design" 138 | }, 139 | { 140 | "title": "angular-material-lite", 141 | "slug": "angular-material-lite", 142 | "jsbinId": "bujuwi", 143 | "keywords": "material design lite" 144 | }, 145 | { 146 | "title": "angular-translate", 147 | "slug": "angular-translate", 148 | "jsbinId": "hopoco", 149 | "keywords": "i18n internationalization translation" 150 | }, 151 | { 152 | "title": "UI Bootstrap Tabs", 153 | "slug": "ui-bootstrap-tabs", 154 | "jsbinId": "menegexezo", 155 | "keywords": "angular-ui-bootstrap tabs" 156 | }, 157 | { 158 | "title": "UI Bootstrap Modal", 159 | "slug": "ui-bootstrap-modal", 160 | "jsbinId": "qateqav", 161 | "keywords": "angular-ui-bootstrap modal" 162 | }, 163 | { 164 | "title": "UI Bootstrap Typeahead", 165 | "slug": "ui-bootstrap-typeahead", 166 | "jsbinId": "lurira", 167 | "keywords": "autocomplete, typeahead, bootstrap" 168 | }, 169 | { 170 | "title": "UI Select", 171 | "slug": "ui-select", 172 | "jsbinId": "gagilo" 173 | }, 174 | { 175 | "title": "UI Select (Angular 1.4+)", 176 | "slug": "ui-select-angular-1-4", 177 | "jsbinId": "fubahe" 178 | }, 179 | { 180 | "title": "UI Grid", 181 | "slug": "ui-grid", 182 | "jsbinId": "netafi", 183 | "keywords": "table" 184 | }, 185 | { 186 | "title": "UI Datepicker", 187 | "slug": "ui-datepicker", 188 | "jsbinId": "zanarah", 189 | "noSSL": true, 190 | "keywords": "datepicker" 191 | }, 192 | { 193 | "title": "UI Timepicker", 194 | "slug": "ui-timepicker", 195 | "jsbinId": "palesa", 196 | "keywords": "timepicker" 197 | }, 198 | { 199 | "title": "UI tinymce", 200 | "slug": "ui-tinymce", 201 | "jsbinId": "lalosi", 202 | "noSSL": true, 203 | "keywords": "tinymce, ui.tinymce" 204 | }, 205 | { 206 | "title": "UI Mask", 207 | "slug": "ui-mask", 208 | "jsbinId": "hasosog", 209 | "keywords": "mask" 210 | }, 211 | { 212 | "title": "Color Picker", 213 | "slug": "colorpicker", 214 | "jsbinId": "yogiye" 215 | }, 216 | { 217 | "title": "angular-wizard", 218 | "slug": "angular-wizard", 219 | "jsbinId": "fexuji", 220 | "keywords": "multi-step multistep step form multiple" 221 | }, 222 | { 223 | "title": "angular-xeditable", 224 | "slug": "angular-xeditable", 225 | "jsbinId": "bezetu", 226 | "keywords": "read only, read-only" 227 | }, 228 | { 229 | "title": "is.js", 230 | "slug": "is-js", 231 | "jsbinId": "vexoqa", 232 | "keywords": "validation validators custom validation error" 233 | }, 234 | { 235 | "title": "nya-bootstrap-select", 236 | "slug": "nya-bootstrap-select", 237 | "jsbinId": "vovile", 238 | "keywords": "select dropdown nya select options" 239 | }, 240 | { 241 | "title": "Dropzone.js", 242 | "slug": "dropzone-js", 243 | "jsbinId": "gemebi", 244 | "keywords": "fileupload file upload dropzone" 245 | }, 246 | { 247 | "title": "ng-currency with maxlength", 248 | "slug": "ng-currency-maxlength", 249 | "jsbinId": "toqoha", 250 | "keywords": "ng-currency, validation, custom-validation, maxlength" 251 | }, 252 | { 253 | "title": "angular-credit-card", 254 | "slug": "angular-credit-card", 255 | "jsbinId": "hijagut" 256 | }, 257 | { 258 | "title": "angularjs-slider", 259 | "slug": "angularjs-slider", 260 | "jsbinId": "vudameneko", 261 | "keywords": "slider range-slider", 262 | "noSSL": true 263 | }, 264 | { 265 | "title": "angular-base64-upload", 266 | "slug": "angular-base64-upload", 267 | "jsbinId": "fepilo", 268 | "keywords": "upload image preview", 269 | "noSSL": true 270 | } 271 | ] 272 | }, 273 | { 274 | "title": "Bootstrap Specific", 275 | "name": "bootstrap-specific", 276 | "examples": [ 277 | { 278 | "title": "Advanced Layout", 279 | "slug": "advanced-layout", 280 | "jsbinId": "yutixo", 281 | "keywords": "fieldGroup field group" 282 | }, 283 | { 284 | "title": "Bootstrap Horizontal", 285 | "slug": "bootstrap-horizontal", 286 | "jsbinId": "hapava" 287 | }, 288 | { 289 | "title": "Input add-ons", 290 | "slug": "input-add-ons", 291 | "jsbinId": "tiluhi" 292 | }, 293 | { 294 | "title": "Multiselect", 295 | "slug": "multiselect", 296 | "jsbinId": "lokoni" 297 | }, 298 | { 299 | "title": "Grouped Typeahead", 300 | "slug": "grouped-typeahead", 301 | "jsbinId": "rayake", 302 | "keywords": "typeahead, grouped-typeahead" 303 | } 304 | ] 305 | }, 306 | { 307 | "title": "Other", 308 | "name": "other", 309 | "examples": [ 310 | { 311 | "title": "api-check", 312 | "slug": "api-check", 313 | "jsbinId": "biwawa" 314 | }, 315 | { 316 | "title": "Testing", 317 | "slug": "testing", 318 | "jsbinId": "hayixo" 319 | }, 320 | { 321 | "title": "Production Tips", 322 | "slug": "production-tips", 323 | "jsbinId": "kaqaqa", 324 | "keywords": "disable apiCheck api-check warnings performance" 325 | }, 326 | { 327 | "title": "Disable submit button", 328 | "slug": "disable-submit-button", 329 | "jsbinId": "kubeko" 330 | }, 331 | { 332 | "title": "Read-only form", 333 | "slug": "read-only-form", 334 | "jsbinId": "tinoxo" 335 | }, 336 | { 337 | "title": "Matching Two Fields", 338 | "slug": "matching-two-fields", 339 | "jsbinId": "ginere" 340 | }, 341 | { 342 | "title": "Advanced Layout (Flex)", 343 | "slug": "advanced-layout-flex", 344 | "jsbinId": "hehedo", 345 | "keywords": "advanced layout, flex, soooooo awesome!, fieldGroup field group" 346 | }, 347 | { 348 | "title": "Nested Forms (fieldGroup wrapper)", 349 | "slug": "nested-formly-forms", 350 | "jsbinId": "zaqeke", 351 | "keywords": "nesting, formly, forms, custom, wrapper, fieldGroup" 352 | }, 353 | { 354 | "title": "Async Select Options with Controller", 355 | "slug": "async-select-options-with-controller", 356 | "jsbinId": "jubiha" 357 | }, 358 | { 359 | "title": "Cascaded Select", 360 | "slug": "cascaded-select", 361 | "jsbinId": "dimojo", 362 | "keywords": "cascaded dependant select combobox" 363 | }, 364 | { 365 | "title": "JSON powered", 366 | "slug": "json-powered", 367 | "jsbinId": "pakivu" 368 | }, 369 | { 370 | "title": "Force showing error state", 371 | "slug": "force-show-error", 372 | "jsbinId": "mowube" 373 | }, 374 | { 375 | "title": "Async validation of unique value", 376 | "slug": "unique-value-async-validation", 377 | "jsbinId": "wujapi" 378 | }, 379 | { 380 | "title": "Toggle required field validation", 381 | "slug": "toggle-required", 382 | "jsbinId": "mewosa" 383 | }, 384 | { 385 | "title": "Multi-Input", 386 | "slug": "multi-input", 387 | "jsbinId": "yuyawo" 388 | }, 389 | { 390 | "title": "Error Summary", 391 | "slug": "error-summary", 392 | "jsbinId": "gimipu", 393 | "keywords": "validation ng-messages ng-animate ngMessages ngAnimate error wrapper validators" 394 | }, 395 | { 396 | "title": "Multiple Errors", 397 | "slug": "multiple-errors", 398 | "jsbinId": "xiqotu", 399 | "keywords": "validation ng-messages ngMessages error wrapper validators" 400 | }, 401 | { 402 | "title": "Filter Select", 403 | "slug": "filter-select", 404 | "jsbinId": "fisevu", 405 | "keywords": "filter select expressionProperties expression properties model formState" 406 | }, 407 | { 408 | "title": "Button Type", 409 | "slug": "button", 410 | "jsbinId": "puvaxa", 411 | "keywords": "api-check apiCheck custom type onClick on-click" 412 | }, 413 | { 414 | "title": "Date-Time Picker", 415 | "slug": "date-time-picker", 416 | "jsbinId": "tofezu", 417 | "keywords": "datetime date time bootstrap angular ui picker" 418 | } 419 | ] 420 | }, 421 | { 422 | "title": "Advanced", 423 | "name": "advanced", 424 | "examples": [ 425 | { 426 | "title": "Nested property keys", 427 | "slug": "nested-property-keys", 428 | "jsbinId": "qewore", 429 | "keywords": "dot notation arrays" 430 | }, 431 | { 432 | "title": "Custom Validators", 433 | "slug": "validators", 434 | "jsbinId": "gomoro" 435 | }, 436 | { 437 | "title": "Validation on form submit", 438 | "slug": "validation-on-form-submit", 439 | "jsbinId": "yatufi", 440 | "keywords": "validation, form, submit" 441 | }, 442 | { 443 | "title": "Template Wrappers", 444 | "slug": "template-wrappers", 445 | "jsbinId": "gomoro" 446 | }, 447 | { 448 | "title": "Template Manipulators", 449 | "slug": "template-manipulator", 450 | "jsbinId": "sokube" 451 | }, 452 | { 453 | "title": "Custom IDs and names", 454 | "slug": "custom-ids-and-names", 455 | "jsbinId": "lodot" 456 | }, 457 | { 458 | "title": "Custom controller & link", 459 | "slug": "custom-controller-and-link", 460 | "jsbinId": "gonode" 461 | }, 462 | { 463 | "title": "Repeating Section", 464 | "slug": "repeating-section", 465 | "jsbinId": "murule" 466 | }, 467 | { 468 | "title": "Nonstandard $interpolate symbols", 469 | "slug": "nonstandard-interpolate-symbols", 470 | "jsbinId": "yarefo", 471 | "keywords": "interpolation markup interpolateProvider template" 472 | }, 473 | { 474 | "title": "Deal with input file type", 475 | "slug": "deal-with-input-file-type", 476 | "jsbinId": "koredu", 477 | "noSSL": true, 478 | "keywords": "file upload file-type input" 479 | } 480 | ] 481 | }, 482 | { 483 | "title": "Very Advanced", 484 | "name": "very-advanced", 485 | "examples": [ 486 | { 487 | "title": "ngModelAttrs", 488 | "slug": "ngModelAttrs", 489 | "jsbinId": "biliras" 490 | }, 491 | { 492 | "title": "fieldTransform", 493 | "slug": "field-transform", 494 | "jsbinId": "kaluya", 495 | "keywords": "parsers is.js validators messages" 496 | }, 497 | { 498 | "title": "Remove property on hide", 499 | "slug": "remove-property-on-hide", 500 | "jsbinId": "sufate", 501 | "keywords": "hideExpression remove delete fieldTransform" 502 | }, 503 | { 504 | "title": "ngMask", 505 | "slug": "ng-mask", 506 | "jsbinId": "mevidi", 507 | "keywords": "ngModelAttrs masked" 508 | }, 509 | { 510 | "title": "OIM (Online Interface Mapper)", 511 | "slug": "oim", 512 | "jsbinId": "gemaje" 513 | } 514 | ] 515 | } 516 | ] 517 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formly-js/angular-formly-website/7d3ddd7786c378e62f0a8df267af7d936eb11db8/favicon.ico -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | angular-formly 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 19 | 20 | 21 | 22 | Fork me on GitHub 23 | 24 |
25 |

Angular Formly is loading...

26 |
27 | 28 |
29 | 30 | 37 | 38 | 39 | 40 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-formly-website", 3 | "version": "1.0.0", 4 | "private": true, 5 | "author": "Kent C. Dodds ", 6 | "contributors": [ 7 | "Kent C. Dodds " 8 | ], 9 | "homepage": "http://formly-js.github.io/angular-formly/", 10 | "repository": { 11 | "type": "git", 12 | "url": "git://github.com/formly-js/angular-formly.git" 13 | }, 14 | "main": "app/index.js", 15 | "licenses": [ 16 | { 17 | "type": "MIT", 18 | "url": "https://raw.githubusercontent.com/formly-js/angular-formly/master/LICENSE" 19 | } 20 | ], 21 | "scripts": { 22 | "build": "cross-env NODE_ENV=production webpack --config webpack.config.js --colors --progress", 23 | "start": "cross-env NODE_ENV=development webpack-dev-server --colors --progress", 24 | "add-example": "npm run build && git commit -am 'Adding example' && git push && npm run deploy", 25 | "deploy": "grunt deploy" 26 | }, 27 | "description": "Website for angular-formly", 28 | "dependencies": { 29 | "angular": "^1.3.10", 30 | "angular-aria": "^1.3.10", 31 | "angular-formly": "^6.1.0", 32 | "highlight.js": "^8.4.0", 33 | "angular-highlightjs": "0.4.1", 34 | "angular-ui-router": "^0.2.13", 35 | "angulartics": "^0.17.2", 36 | "api-check": "^7.0.0", 37 | "bootstrap": "^3.3.2" 38 | }, 39 | "devDependencies": { 40 | "angular-animate": "^1.3.11", 41 | "autoprefixer-core": "^5.1.7", 42 | "babel-core": "^4.4.6", 43 | "babel-loader": "^4.0.0", 44 | "cross-env": "^1.0.7", 45 | "css-loader": "^0.9.1", 46 | "csswring": "^3.0.2", 47 | "deep-extend": "^0.3.2", 48 | "file-loader": "^0.8.1", 49 | "grunt": "^0.4.5", 50 | "grunt-gh-pages": "^0.10.0", 51 | "html-loader": "^0.2.3", 52 | "imports-loader": "^0.6.3", 53 | "jshint": "^2.6.0", 54 | "jshint-loader": "^0.8.1", 55 | "json-loader": "^0.5.1", 56 | "lodash": "^2.4.1", 57 | "markdown-loader": "^0.1.2", 58 | "ng-annotate": "^0.15.1", 59 | "ng-annotate-loader": "^0.0.2", 60 | "postcss": "^4.0.6", 61 | "postcss-loader": "^0.3.0", 62 | "postcss-nested": "^0.2.2", 63 | "raw-loader": "^0.5.1", 64 | "style-loader": "^0.8.3", 65 | "url-loader": "^0.5.5", 66 | "webpack": "^1.5.3", 67 | "webpack-dev-server": "^1.7.0" 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /res/glyphicons-halflings-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formly-js/angular-formly-website/7d3ddd7786c378e62f0a8df267af7d936eb11db8/res/glyphicons-halflings-regular.eot -------------------------------------------------------------------------------- /res/glyphicons-halflings-regular.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | -------------------------------------------------------------------------------- /res/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formly-js/angular-formly-website/7d3ddd7786c378e62f0a8df267af7d936eb11db8/res/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /res/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formly-js/angular-formly-website/7d3ddd7786c378e62f0a8df267af7d936eb11db8/res/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /res/glyphicons-halflings-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formly-js/angular-formly-website/7d3ddd7786c378e62f0a8df267af7d936eb11db8/res/glyphicons-halflings-regular.woff2 -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var fs = require('fs'); 3 | var webpack = require('webpack'); 4 | var _ = require('lodash'); 5 | 6 | var dev = process.env.NODE_ENV !== 'production'; 7 | 8 | module.exports = { 9 | entry: './app', 10 | output: { 11 | filename: 'bundle.js', 12 | path: __dirname 13 | }, 14 | 15 | stats: { 16 | colors: true, 17 | reasons: true 18 | }, 19 | 20 | devtool: dev ? 'eval' : null, 21 | 22 | plugins: [ 23 | new webpack.DefinePlugin({ 24 | ON_DEV: dev 25 | }) 26 | ], 27 | 28 | resolve: { 29 | extensions: ['', '.js'], 30 | modulesDirectories: ['shared', 'node_modules', 'bower_components'], 31 | alias: { 32 | // sadly have to do this because formly's trying to load it's version of angular 33 | // which is different from the one in the demo folder... Nesting with node_modules 34 | // and requiring files outside of this is a little odd... 35 | // Nobody else will have to do this! 36 | angular: path.join(__dirname, '/node_modules/angular/angular'), 37 | stateUtils: path.join(__dirname, '/app/shared/ngCommon/services/stateUtils') 38 | } 39 | }, 40 | 41 | module: { 42 | loaders: [ 43 | {test: /\.css$/, loader: 'style!css!postcss'}, 44 | {test: /\.html$/, loader: 'raw', exclude: /node_modules/}, 45 | {test: /\.md$/, loader: 'html!markdown'}, 46 | {test: /\.json$/, loader: 'json'}, 47 | {test: /\.png$/, loader: 'url?mimetype=image/png'}, 48 | {test: /\.js$/, loader: 'ng-annotate!babel!jshint', exclude: /node_modules/}, 49 | { 50 | test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 51 | loader: 'file-loader?name=res/[name].[ext]?[hash]' 52 | } 53 | ] 54 | }, 55 | 56 | jshint: { 57 | failOnHint: true, 58 | emitErrors: true 59 | }, 60 | postcss: [ 61 | require('postcss-nested'), 62 | require('autoprefixer-core'), 63 | require('csswring') 64 | ] 65 | }; 66 | --------------------------------------------------------------------------------