An introduction to AngularJS

1. AngularJs
CHRISTOFFER NORING
INTRODUCTION

2. What is AngularJs?
DOM
manipulation
(move, create,
replace, etc)
- Super heroic Javascript MVW Framework,
“DOM manip-way”
<div>
<span>content</span>
<span>new element</span>
</div>
Model View Whatever
- SPA, single page application
- Brings MVC capbability to javascript
making it easier to test
“Angular-way”
<div ng-app>
<span ng-model=“name”></span>
</div>
- Angular deemphasizes DOM
manipulation
- Angular is Test focused, support for unit
testing, ui testing mocking etc..
Augmenting –
add functionality
to existing DOM

3. 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

4. Angular learning curve

5. The presentation
UI
Ui directives,
routing etc
Middle
Services, DI
Backend
$http
Writing directives
Testing

6. Killer features
Data binding
Routing
Dependency Injection
Testing, unit and e2e, Mocking
and
Directives, aka User Controls
Ajax encapsulation, REST support
Filters
…

7. Angular MVW
Controller
controller
Decorates scope with primitives,
Decorates
objects and callbacks. Responsible for
constructing a model
Scope
scope
model
detect changes to model objects and
create an execution context for expressions
View
uses scope
view
Binds

8. Worlds smallest app
<script src="”angular.js”"></script>
Include angular
script
<div ng-app>
{{ 1+2 }}
</div>
Create an angular
application
Expression

9. Demo – building an app
ng-app
ng-model
ng-controller
ng-repeat
Filtering
Routing (enter app.js)

10. Useful directives
ng-app
creates the app
ng-model
creates a 2-way binding
<input type="text" ng-model="name" />
ng-repeat
repeats data
<ul><li ng-repeat="item" in
items">{{item}}</li></ul>
ng-class
renders a css class given a boolean expression ex
ng-controller
points out a controller with its own scope
<div ng-controller="userController">
</div>
list.length > 0 ? "show": "hide"
ng-show
determines whether an element should be visible
<div ng-show=”hasErrors”>{{errorMessage}}</div>

11. Dependency injection
Injection just works, no hassle
var app = modules("myApp");
app.controller("MyController", function($scope,userService){
$scope.user = userService.getUser();
});
But, enter minification
var app = modules("myApp");
app.controller("MyController", ["$scope", "userService",function($scope,userService){
$scope.user = userService.getUser();
}]);
Minification safe,
strings are left intact
Variables are minified to ex
a,b
Angular cant find it!

12. Demo Dependency injection
Bootstrapping
Creating a service
Inject a service

13. Demo Testing
Karma,
Jasmine
What can I test?
Demo of karma and different tests, mocking
Karma Coverage

14. Backend - $http
Shortcut methods
Configuration object
$http({ method: "GET", url: "/Users" })
.success(successCallback)
.error(errorCallback);
Returns a promise
$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);
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

15. Backend demo
Demo with call to visual studio controller, get and post

16. Directives – user controls
<my-directive attr=”boundProperty” >hi there</my-directive>
Directive logic
Hi there Charlie
<my-directive attr=”boundProperty” />
Directive logic

17. Directives demo
Basics
Demo of ChartJs + other directives

18. E2e testing demo

19. Organizing your code - templates

20. UI- bootstrap
Is a subset of bootstrap especially adjusted to fit AngularJs
http://angular-ui.github.io/bootstrap/
And many more…

21. Further reading
http://docs.angularjs.org/api
www.ng-newsletter.com
https://github.com/angular/angular-seed
http://egghead.io/
http://www.pluralsight.com
https://github.com/softchris/angulartemplate
www.google.com
Shameless self promotion 
Google is your friend

22. Questions?