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

1. WHAT IS IT, HOW DO I USE IT AND WHY

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. What is Angular

4. What is Angular – Part 1
• Initial release 2009
• Open-source
• SPA framework
• Model-View-Whatever
• Declarative programming
• Developed and maintained by Google

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. Why Angular

8. • Initial release 2010
• Dependencies:
• Underscore.js
• Backbone.Router
• Backbone.View
• jQuery and json2.js for backwards compatibility
• Many modules available

9. • Initial release 2011
• Dependencies:
• jQuery
• Handlebars.js
• Pure MVC

10. • Dependencies:
• jQuery
• Knockout
• Require.js
• Lead developer and architect Rob Eisenberg working on AngularJS V2
• MVVM

11. AngularJS & MVC
• Do I need to choose?
• MVC & jQuery
• Type safety
• Routing
• Typescript

12. How do I use it
• Controllers
• How to deal with scopes
• Providers
• Service
• Factory
• Provider
• Directives

13. Controllers
DEMO!!!

14. Scopes
• ngRepeat and scopes
• Always have a dot in your expression
• JavaScript Prototypical Inheritance
• Functions/objects are safe, parameters are not
• $parent

15. Providers
• Service
• Factory
• Provider

16. Providers - Service
var myApp = angular.module('myApp', []);
myApp.service('helloWorldFromService', function () {
this.sayHello = function () {
return "Hello, World!";
};
});

17. Providers - Factory
var myApp = angular.module('myApp', []);
myApp.factory('helloWorldFromFactory', function() {
return {
sayHello: function() {
return "Hello, World!";
}
};
});

18. 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');
});

19. Directives
• AngularJS HTML compiler ($compile)
• Directive names, ngModel or is it ng-model?
• HTML validators
• Usage
• Tag
• Attribute
• Comment
• Class
• Template options

20. Questions?