intro to angularjs
TRANSCRIPT
Intro to AngularJSPOSSCON 2015
WHOAMI
Tom Wilson● Lead Technologist JRS● <3 JavaScript● <3 io.js/node● <3 couchdb/pouchdb● <3 angularjs/mercury
Intro to AngularJS
● What is AngularJS● Why should I use AngularJS?● How should I get started?
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.
Why AngularJS
● Simpler code● Easier manage DRY Code● Easier to Unit Test● Flexible Organization● Easy to integrate with other JS Libs
Desktop
NW.js
Mobile
AngularJS 2What about angularjs 2?
Getting Started
Install
● Download - https://angularjs.org/● bower install angular● npm install angular
Add Script
<html> <head>...</head><body><script src=”.../angular.
js”></script></body>
</html>
On Tap
● Two-Way Databinding● HTML Templates● Controllers● Services● Directives
Two-Way Databinding
<body ng-app> <h1>{{title}}</h1> <input type=”text” ng-model=”title”></body>
http://jsbin.com/verifa/1/edit?html,output
HTML Templates
Compiles HTML5
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>
Compile and Link
<body ng-app=”App”> ...</body>
Built-In Directives
Built-In Directives
Directives are custom elements, attributes, or class names that enables declarative coding.
<body ng-app=”myApp”></body>
Built-In Directives
ng-app, ng-init, ng-class, ng-model, ng-repeat, ng-bind, ng-controller, etc
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
Controllers
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
Routinghttp://jsbin.com/tanoko/3/edit?output
UI-Routerhttp://angular-ui.github.io/ui-router/site/#/api/ui.router
ui-router
<nav> <a ui-sref=”foo”>Foo</a> <a ui-sref=”bar”>Bar</a></nav><ui-view></ui-view>
Configuration - $stateProvider
angular.module(‘app’, []) .config(function($stateProvider, $urlRouterProvider) { $stateProvider .state(‘foo’, { url: ‘/foo’, controller: …, template: …, })
Configuration - $urlRouterProvider
angular.module(‘app’, []) .config(function($stateProvider, $urlRouterProvider) { $urlRouterProvider
.otherwise(‘/’) … })
Viewshttp://jsbin.com/koreki/2/edit?html,output
Serviceshttp://jsbin.com/yakuti/3/edit?js,output
Custom Directiveshttp://jsbin.com/yuhulu/4/edit?html,js
Unit Testing
Unit Testing
// ng-mock
describe(‘foo’, function() { beforeEach(inject(...)) it(‘bar’, function() { expect(bam).toEqual(‘bam’) })})
Resourceshttps://github.com/jmcunningham/AngularJS-Learning
QuestionsThank you
Thank You
Extra Info
Modules
Modules
// create moduleangular.module(‘app’, [])
<body ng-app=”app”>…</body>
Modules
// reference modulevar app = angular.module(‘app’)
Multiple Modules
angular.module(‘foo’, []) .constant(‘bar’, ‘baz’)
var app = angular.module(‘app’, [‘foo’]) .run(function(bar) { console.log(bar) })
Models
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
Filtershttp://jsbin.com/qavixu/1/edit?html,output
Filters - Collectionshttp://jsbin.com/comisot/1/edit?html,js,output
ng-classhttp://jsbin.com/yuhulu/1/edit?html,output
ng-clickhttp://jsbin.com/zagoxa/2/edit?html,js,output
Formshttp://jsbin.com/naziheduje/1/edit?html,js,output
$http
$http
Is a service to make ajax calls in AngularJS
.controller(‘fooCtrl’, function($scope, $http) {
$http.get(‘/someurl’)
.then(function(res) {
$scope.widgets = res
})
})
$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
})
})