Intro to AngularJS
0 likes356 views
The document provides an introduction to AngularJS, including what it is, why it should be used, and how to get started. AngularJS is a JavaScript framework that uses two-way data binding and HTML templates to build applications. It simplifies code, promotes DRY principles, and is easy to test and integrate with other libraries. Getting started involves downloading AngularJS, adding the script to an HTML file, and then exploring core concepts like data binding, templates, controllers, services, and directives.
![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](https://image.slidesharecdn.com/intro2angularjs-posscon-20151-150427120407-conversion-gate01/85/Intro-to-AngularJS-20-320.jpg)
![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](https://image.slidesharecdn.com/intro2angularjs-posscon-20151-150427120407-conversion-gate01/85/Intro-to-AngularJS-22-320.jpg)
![Configuration - $stateProvider
angular.module(‘app’, [])
.config(function($stateProvider,
$urlRouterProvider) {
$stateProvider
.state(‘foo’, {
url: ‘/foo’,
controller: …,
template: …,
})](https://image.slidesharecdn.com/intro2angularjs-posscon-20151-150427120407-conversion-gate01/85/Intro-to-AngularJS-26-320.jpg)
![Configuration - $urlRouterProvider
angular.module(‘app’, [])
.config(function($stateProvider,
$urlRouterProvider) {
$urlRouterProvider
.otherwise(‘/’)
…
})](https://image.slidesharecdn.com/intro2angularjs-posscon-20151-150427120407-conversion-gate01/85/Intro-to-AngularJS-27-320.jpg)
![Modules
// create module
angular.module(‘app’, [])
<body ng-app=”app”>
…
</body>](https://image.slidesharecdn.com/intro2angularjs-posscon-20151-150427120407-conversion-gate01/85/Intro-to-AngularJS-38-320.jpg)
![Multiple Modules
angular.module(‘foo’, [])
.constant(‘bar’, ‘baz’)
var app = angular.module(‘app’, [‘foo’])
.run(function(bar) { console.log(bar) })](https://image.slidesharecdn.com/intro2angularjs-posscon-20151-150427120407-conversion-gate01/85/Intro-to-AngularJS-40-320.jpg)
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 }) })