AngularJs CHRISTOFFER NORING INTRODUCTION
AngularJsCHRISTOFFER NORING
INTRODUCTION
What is AngularJs? - Super heroic Javascript MVW Framework,
Model View Whatever
- SPA, single page application
- Brings MVC capbability to javascript making it easier to test
- Angular deemphasizes DOM manipulation
- Angular is Test focused, support for unit
testing, ui testing mocking etc..
DOM manipulation (move, create, replace, etc)
Augmenting – add functionality to existing DOM
“DOM manip-way”<div> <span>content</span> <span>new element</span></div>
“Angular-way”<div ng-app> <span ng-model=“name”></span></div>
Why should you care? AngularJS was originally developed in 2009 by Miško Hevery and Adam Abrons (google)
Started out as a business but went on to be open source framework, currently stable release at 1.2
AngularJs
Knockout
Angular learning curve
UI
Middle
Backend
Writing directives
Services, DI
Ui directives, routing etc
$http
Testing
The presentation
Killer featuresData binding
Routing
Dependency Injection
Testing, unit and e2e, Mocking
and
Directives, aka User Controls
Ajax encapsulation, REST support
Filters
…
model
Angular MVW Controller Decorates scope with primitives,
objects and callbacks. Responsible for
constructing a model
Scope detect changes to model objects and
create an execution context for expressions
View
uses scope
view
controller
scope
Decorates
Binds
Worlds smallest app<script src="”angular.js”"></script>
<div ng-app>
{{ 1+2 }}
</div>
Include angular script
Create an angular application
Expression
Demo – building an app ng-app
ng-model
ng-controller
ng-repeat
Filtering
Routing (enter app.js)
Useful directives
creates the app
creates a 2-way binding
points out a controller with its own scope
repeats data
renders a css class given a boolean expression ex
determines whether an element should be visible
ng-app
ng-model
ng-controller
ng-repeat
ng-class
ng-show
<input type="text" ng-model="name" />
<div ng-controller="userController"></div>
<ul><li ng-repeat="item" in items">{{item}}</li></ul>
list.length > 0 ? "show": "hide"
<div ng-show=”hasErrors”>{{errorMessage}}</div>
Dependency injection
Minification safe,strings are left intact
Injection just works, no hassle
var app = modules("myApp");app.controller("MyController", ["$scope", "userService",function($scope,userService){ $scope.user = userService.getUser();}]);
var app = modules("myApp");app.controller("MyController", function($scope,userService){ $scope.user = userService.getUser();});
Variables are minified to exa,b
Angular cant find it!
But, enter minification
Demo Dependency injection Bootstrapping
Creating a service
Inject a service
Demo Testing Karma,
Jasmine
What can I test?
Demo of karma and different tests, mocking
Karma Coverage
Backend - $http
$http({ method: "GET", url: "/Users" })
.success(successCallback)
.error(errorCallback);
$http.get(url).success(successCallback);$http.post(url, data, config).success(successCallback)$http.put(url, data, config);$http.delete(url, config);$http.jsonp(url, config);
Shortcut methods
Returns a promise
Configuration object
interface for interacting with an object that represents the result of an action that is performed asynchronously, and may or
may not be finished at any given point in time
Backend demo Demo with call to visual studio controller, get and post
Directives – user controls
Directive logic
<my-directive attr=”boundProperty” >hi there</my-directive>
Hi there Charlie
Directive logic
<my-directive attr=”boundProperty” />
Directives demo Basics
Demo of ChartJs + other directives
E2e testing demo
Organizing your code - templates
UI- bootstrap Is a subset of bootstrap especially adjusted to fit AngularJs
http://angular-ui.github.io/bootstrap/
And many more…
Further reading
http://docs.angularjs.org/api
https://github.com/angular/angular-seed
https://github.com/softchris/angulartemplate
http://egghead.io/
http://www.pluralsight.com
www.google.com
Shameless self promotion
Google is your friend
www.ng-newsletter.com
Questions?