Your SlideShare is downloading. ×
0
AngularJs
CHRISTOFFER NORING

INTRODUCTION
What is AngularJs?

DOM
manipulation
(move, create,
replace, etc)

- Super heroic Javascript MVW Framework,

“DOM manip-wa...
Why should you care?
AngularJS was originally developed in 2009 by Miško Hevery and Adam Abrons (google)
Started out as a ...
Angular learning curve
The presentation
UI

Ui directives,
routing etc

Middle

Services, DI

Backend

$http

Writing directives

Testing
Killer features
Data binding
Routing
Dependency Injection
Testing, unit and e2e, Mocking
and
Directives, aka User Controls...
Angular MVW
Controller

controller

Decorates scope with primitives,
Decorates

objects and callbacks. Responsible for
con...
Worlds smallest app
<script src="”angular.js”"></script>
Include angular
script

<div ng-app>
{{ 1+2 }}
</div>

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

creates the app
ng-model

creates a 2-way binding
<input type="text" ng-model="name" />

ng-repe...
Dependency injection
Injection just works, no hassle
var app = modules("myApp");
app.controller("MyController", function($...
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
Shortcut methods
Configuration object

$http({ method: "GET", url: "/Users" })

.success(successCallback)
...
Backend demo
Demo with call to visual studio controller, get and post
Directives – user controls
<my-directive attr=”boundProperty” >hi there</my-directive>
Directive logic

Hi there Charlie

...
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 ma...
Further reading
http://docs.angularjs.org/api
www.ng-newsletter.com
https://github.com/angular/angular-seed
http://egghead...
Questions?
Upcoming SlideShare
Loading in...5
×

AngularJS intro

1,386

Published on

An introduction to AngularJS

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,386
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
51
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "AngularJS intro"

  1. 1. AngularJs CHRISTOFFER NORING INTRODUCTION
  2. 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. 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. 4. Angular learning curve
  5. 5. The presentation UI Ui directives, routing etc Middle Services, DI Backend $http Writing directives Testing
  6. 6. Killer features Data binding Routing Dependency Injection Testing, unit and e2e, Mocking and Directives, aka User Controls Ajax encapsulation, REST support Filters …
  7. 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. 8. Worlds smallest app <script src="”angular.js”"></script> Include angular script <div ng-app> {{ 1+2 }} </div> Create an angular application Expression
  9. 9. Demo – building an app ng-app ng-model ng-controller ng-repeat Filtering Routing (enter app.js)
  10. 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. 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. 12. Demo Dependency injection Bootstrapping Creating a service Inject a service
  13. 13. Demo Testing Karma, Jasmine What can I test? Demo of karma and different tests, mocking Karma Coverage
  14. 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. 15. Backend demo Demo with call to visual studio controller, get and post
  16. 16. Directives – user controls <my-directive attr=”boundProperty” >hi there</my-directive> Directive logic Hi there Charlie <my-directive attr=”boundProperty” /> Directive logic
  17. 17. Directives demo Basics Demo of ChartJs + other directives
  18. 18. E2e testing demo
  19. 19. Organizing your code - templates
  20. 20. UI- bootstrap Is a subset of bootstrap especially adjusted to fit AngularJs http://angular-ui.github.io/bootstrap/ And many more…
  21. 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. 22. Questions?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×