Intro to AngularJS
•
0 likes•355 views
Tom Wilson Jack Russell Software - President POSSCON 4/15/2015 Front-End Track - 1:30 PM
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Intro to AngularJS
Similar to Intro to AngularJS (20)
More from POSSCON
More from POSSCON (20)
Recently uploaded
Recently uploaded (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
- 10. Add Script <html> <head>...</head> <body> <script src=”.../angular. js”></script> </body> </html>
- 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
- 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 }) })