{"category":"56d91c5507ae190b00004464","project":"5515ba4981faf83900d2b10c","user":"54e3723b8ef7552300409bf4","version":"56d91c5507ae190b00004460","updates":["55ad5b2cd0faac190017fe54"],"_id":"56d91c5607ae190b00004469","createdAt":"2015-03-27T20:15:07.005Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"order":0,"body":"[block:api-header]\n{\n \"type\": \"basic\",\n \"title\": \"Dependencies\"\n}\n[/block]\n- [Angular](https://angularjs.org/) - HTML enhanced for web apps\n- [api-check](https://github.com/kentcdodds/api-check) - VanillaJS version of [ReactJS propTypes](https://facebook.github.io/react/docs/reusable-components.html#prop-validation) \n[block:api-header]\n{\n \"type\": \"basic\",\n \"title\": \"Install in your project\"\n}\n[/block]\n# Getting the files\n\nInstall via `npm`, `bower`, or simply download the script and its dependencies.\n\n**Using npm**\n\n`$ npm install angular api-check angular-formly --save`\n\n**Using bower**\n\n`$ bower install angular api-check angular-formly --save`\n\n**Download**\n\n- [angular](https://angularjs.org/)\n- [api-check](https://github.com/kentcdodds/api-check/releases)\n- [angular-formly](https://github.com/formly-js/angular-formly/releases)\n\n----\n\n# Adding to your project\n\n**Webpack**\n\nI [recommend](https://egghead.io/series/angular-and-webpack-for-modular-applications) using [webpack](http://webpack.github.io/) for building your applications. To add angular-formly to your project, get the files via `npm`, then simply:\n[block:code]\n{\n \"codes\": [\n {\n \"code\": \"var angular = require('angular');\\nangular.module('yourModule', [require('angular-formly')]);\",\n \"language\": \"javascript\"\n }\n ]\n}\n[/block]\n**Browserify**\n\nIf you're using browserify, in addition to the webpack configuration above, you'll need to make sure you install `api-check` and `angular-formly` using npm (bower will not work). Also, no browserify shim or dependency listing in your package.json's browserify configuration object is necessary.\n\n**Script Tags** \n\nIf you're stuck with script tags (I'm sorry), here's how you might do it:\n[block:code]\n{\n \"codes\": [\n {\n \"code\": \"<script src=\\\"vendor/apiCheck.js\\\"></script> <!-- must appear before formly.js -->\\n<script src=\\\"vendor/angular.js\\\"></script>\\n<script src=\\\"vendor/formly.js\\\"></script>\",\n \"language\": \"html\"\n }\n ]\n}\n[/block]\nand\n[block:code]\n{\n \"codes\": [\n {\n \"code\": \"angular.module('yourModule', ['formly']);\",\n \"language\": \"javascript\"\n }\n ]\n}\n[/block]\n# Adding Templates\n\nangular-formly does not ship with any pre-defined types/templates (intentionally). You'll need to either create your own or use a template library. See [Custom Templates](doc:custom-templates).\n[block:api-header]\n{\n \"type\": \"basic\",\n \"title\": \"Quick Example\"\n}\n[/block]\nYou can add a formly-form in your HTML templates as shown below. This example is using the [angular-formly-templates-bootstrap](https://github.com/formly-js/angular-formly-templates-bootstrap) template library. (Note, there are three files here, click the link above the code).\n[block:code]\n{\n \"codes\": [\n {\n \"code\": \"angular.module('myModule', ['formly', 'formlyBootstrap']);\",\n \"language\": \"javascript\",\n \"name\": \"myModule.js\"\n },\n {\n \"code\": \"<form ng-submit=\\\"vm.onSubmit()\\\">\\n <formly-form model=\\\"vm.user\\\" fields=\\\"vm.userFields\\\">\\n <button type=\\\"submit\\\">Submit</button>\\n </formly-form>\\n</form>\",\n \"language\": \"html\",\n \"name\": \"MyFormCtrl.html\"\n },\n {\n \"code\": \"angular.module('myModule').controller('MyFormCtrl', function MyFormCtrl() {\\n var vm = this; // vm stands for \\\"View Model\\\" --> see https://github.com/johnpapa/angular-styleguide#controlleras-with-vm\\n vm.user = {};\\n\\n vm.userFields = [\\n {\\n // the key to be used in the model values\\n // so this will be bound to vm.user.username\\n key: 'username',\\n type: 'input',\\n templateOptions: {\\n label: 'Username',\\n placeholder: 'johndoe',\\n required: true,\\n description: 'Descriptive text'\\n }\\n },\\n {\\n key: 'password',\\n type: 'input',\\n templateOptions: {\\n type: 'password',\\n label: 'Password',\\n required: true\\n },\\n expressionProperties: {\\n 'templateOptions.disabled': '!model.username' // disabled when username is blank\\n }\\n }\\n ];\\n \\n vm.onSubmit = onSubmit;\\n \\n \\n function onSubmit() {\\n console.log('form submitted:', vm.user);\\n }\\n});\",\n \"language\": \"javascript\",\n \"name\": \"MyFormCtrl.js\"\n }\n ]\n}\n[/block]\nThere is so much more that you can do with this library. See the rest of the documentation and [the examples](http://angular-formly.com) for more!\n[block:api-header]\n{\n \"type\": \"basic\",\n \"title\": \"Learn angular-formly\"\n}\n[/block]\nThe best place to get started from here is to actually learn angular-formly! I have developed several short [egghead.io](https://egghead.io/) lessons about angular-formly concepts that should get you going. These and more resources are available (for free) on the [Learn angular-formly](doc:learn-angular-formly) page :-)","excerpt":"This page will help you get started with angular-formly. You'll be up and running in a jiffy!","slug":"getting-started","type":"basic","title":"Getting Started with angular-formly","__v":0,"childrenPages":[]}Getting Started with angular-formly
This page will help you get started with angular-formly. You'll be up and running in a jiffy!