Angular js

643 views

Published on

Intro session of AngularJS by Thomas Vriens at the E2 offices.

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

  • Be the first to like this

No Downloads
Views
Total views
643
On SlideShare
0
From Embeds
0
Number of Embeds
58
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Angular js

  1. 1. WHAT IS IT, HOW DO I USE IT AND WHY
  2. 2. Agenda • What is Angular (15 min) • Why Angular (15 min) • What makes it different from other JavaScript frameworks • Angular vs ASP.NET MVC • How do I use it (45 min) • Controllers • Scopes • Providers • Directives • Questions
  3. 3. What is Angular
  4. 4. What is Angular – Part 1 • Initial release 2009 • Open-source • SPA framework • Model-View-Whatever • Declarative programming • Developed and maintained by Google
  5. 5. What is Angular – Part 2 • Modular, Extensible • angular.js • angular-animate.js, angular-route.js, angular-touch.js, … • Testable • Browser Compatibility • Current version (1.2.x) requires pollyfills for IE 7 and bellow • Version 1.3 will drop IE 8 and bellow • Active community • Documentation • Tutorials • Third-party directives
  6. 6. Why Angular
  7. 7. • Initial release 2010 • Dependencies: • Underscore.js • Backbone.Router • Backbone.View • jQuery and json2.js for backwards compatibility • Many modules available
  8. 8. • Initial release 2011 • Dependencies: • jQuery • Handlebars.js • Pure MVC
  9. 9. • Dependencies: • jQuery • Knockout • Require.js • Lead developer and architect Rob Eisenberg working on AngularJS V2 • MVVM
  10. 10. AngularJS & MVC • Do I need to choose? • MVC & jQuery • Type safety • Routing • Typescript
  11. 11. How do I use it • Controllers • How to deal with scopes • Providers • Service • Factory • Provider • Directives
  12. 12. Controllers DEMO!!!
  13. 13. Scopes • ngRepeat and scopes • Always have a dot in your expression • JavaScript Prototypical Inheritance • Functions/objects are safe, parameters are not • $parent
  14. 14. Providers • Service • Factory • Provider
  15. 15. Providers - Service var myApp = angular.module('myApp', []); myApp.service('helloWorldFromService', function () { this.sayHello = function () { return "Hello, World!"; }; });
  16. 16. Providers - Factory var myApp = angular.module('myApp', []); myApp.factory('helloWorldFromFactory', function() { return { sayHello: function() { return "Hello, World!"; } }; });
  17. 17. Providers - Provider var myApp = angular.module('myApp', []); myApp.provider('helloWorld', function() { this.name = 'Default'; this.$get = function() { var name = this.name; return { sayHello: function() { return "Hello, " + name + "!"; } } }; this.setName = function (name) { this.name = name; }; }); // Configure a provider myApp.config(function (helloWorldProvider) { helloWorldProvider.setName('World'); });
  18. 18. Directives • AngularJS HTML compiler ($compile) • Directive names, ngModel or is it ng-model? • HTML validators • Usage • Tag • Attribute • Comment • Class • Template options
  19. 19. Questions?

×