Intro to AngularJS
âą
0 gostouâą355 visualizaçÔes
Tom Wilson Jack Russell Software - President POSSCON 4/15/2015 Front-End Track - 1:30 PM
Recomendados
Mais conteĂșdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a Intro to AngularJS
Semelhante a Intro to AngularJS (20)
Mais de POSSCON
Mais de POSSCON (20)
Ăltimo
Ăltimo (20)
Intro to AngularJS
- 2. WHOAMI Tom Wilson â Lead Technologist JRS â <3 JavaScript â <3 io.js/node â <3 couchdb/pouchdb â <3 angularjs/mercury
- 3. Intro to AngularJS â What is AngularJS â Why should I use AngularJS? â How should I get started?
- 4. What is AngularJS? AngularJS is a JavaScript Framework that abstracts away the direct manipulation of the DOM using two-way data-binding and leverages html templates and dependency injection to create applications.
- 5. Why AngularJS â Simpler code â Easier manage DRY Code â Easier to Unit Test â Flexible Organization â Easy to integrate with other JS Libs
- 7. Mobile
- 8. AngularJS 2 What about angularjs 2?
- 9. Getting Started Install â Download - https://angularjs.org/ â bower install angular â npm install angular
- 11. On Tap â Two-Way Databinding â HTML Templates â Controllers â Services â Directives
- 12. Two-Way Databinding <body ng-app> <h1>{{title}}</h1> <input type=âtextâ ng-model=âtitleâ> </body> http://jsbin.com/verifa/1/edit?html,output
- 13. HTML Templates
- 14. Compiles HTML5
- 15. Template Example <body ng-app=âAppâ> <section ng-controller=âMainCtrlâ> <h2>{{appTitle}}</h2> <article ng-repeat=âarticle in articlesâ> <header> <h2>{{article.title}}</h2> </header> {{article.body}} </article> </section> </body>
- 16. Compile and Link <body ng-app=âAppâ> ... </body>
- 18. Built-In Directives Directives are custom elements, attributes, or class names that enables declarative coding. <body ng-app=âmyAppâ> </body>
- 19. Built-In Directives ng-app, ng-init, ng-class, ng-model, ng-repeat, ng-bind, ng-controller, etc
- 20. ng-repeat <body ng-app> <div ng-init=âlist = [1,2,3,4]â></div> <ul> <li ng-repeat=ân in listâ>{{n}}</li> </ul> </body> http://jsbin.com/sisuku/1/edit?html,output
- 21. Controllers
- 22. Controllers <body ng-app=âappâ> <div ng-controller=â FooCtrlâ> <h1>{{color}}</h1> </div> </body> angular.module('app', []) .controller('FooCtrl', function ($scope) { $scope.color = 'green'; }); http://jsbin.com/qejime/3/edit?html,js
- 25. ui-router <nav> <a ui-sref=âfooâ>Foo</a> <a ui-sref=âbarâ>Bar</a> </nav> <ui-view></ui-view>
- 26. Configuration - $stateProvider angular.module(âappâ, []) .config(function($stateProvider, $urlRouterProvider) { $stateProvider .state(âfooâ, { url: â/fooâ, controller: âŠ, template: âŠ, })
- 27. Configuration - $urlRouterProvider angular.module(âappâ, []) .config(function($stateProvider, $urlRouterProvider) { $urlRouterProvider .otherwise(â/â) ⊠})
- 31. Unit Testing
- 32. Unit Testing // ng-mock describe(âfooâ, function() { beforeEach(inject(...)) it(âbarâ, function() { expect(bam).toEqual(âbamâ) }) })
- 35. Thank You
- 36. Extra Info
- 37. Modules
- 38. Modules // create module angular.module(âappâ, []) <body ng-app=âappâ> ⊠</body>
- 39. Modules // reference module var app = angular.module(âappâ)
- 40. Multiple Modules angular.module(âfooâ, []) .constant(âbarâ, âbazâ) var app = angular.module(âappâ, [âfooâ]) .run(function(bar) { console.log(bar) })
- 41. Models
- 42. Models <body ng-app> <div ng-init=âcolor = âredââ></div> <h1>{{color}}</h1> <input type=âtextâ ng-model=âcolorâ> </body> http://jsbin.com/geqede/1/edit?html,output
- 48. $http
- 49. $http Is a service to make ajax calls in AngularJS .controller(âfooCtrlâ, function($scope, $http) { $http.get(â/someurlâ) .then(function(res) { $scope.widgets = res }) })
- 50. $http Is a service to make ajax calls in AngularJS .controller(âfooCtrlâ, function($scope, $http) { $http.post(â/someurlâ, { foo: âbarâ}) .then(function(res) { $scope.widgets = res }) })