WHAT IS IT, HOW DO I USE IT AND WHY

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

What is Angular

What is Angular – Part 1• Initial release 2009

• Open-source

• SPA framework

• Model-View-Whatever

• Declarative programming

• Developed and maintained by Google

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

Why Angular

• Initial release 2010

• Dependencies:• Underscore.js

• Backbone.Router

• Backbone.View

• jQuery and json2.js for backwards compatibility

• Many modules available

• Initial release 2011

• Dependencies:• jQuery

• Handlebars.js

• Pure MVC

• Dependencies:• jQuery

• Knockout

• Require.js

• Lead developer and architect Rob Eisenberg working on AngularJS V2

• MVVM

AngularJS & MVC• Do I need to choose?

• MVC & jQuery

• Type safety

• Routing

• Typescript

How do I use it• Controllers

• How to deal with scopes

• Providers• Service

• Factory

• Provider

• Directives

ControllersDEMO!!!

Scopes• ngRepeat and scopes

• Always have a dot in your expression

• JavaScript Prototypical Inheritance

• Functions/objects are safe, parameters are not

• $parent

Providers• Service

• Factory

• Provider

Providers - Servicevar myApp = angular.module('myApp', []);

myApp.service('helloWorldFromService', function () {this.sayHello = function () {

return "Hello, World!";};

});

Providers - Factoryvar myApp = angular.module('myApp', []);

myApp.factory('helloWorldFromFactory', function() {return {

sayHello: function() {return "Hello, World!";

}};

});

Providers - Providervar 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');});

Directives• AngularJS HTML compiler ($compile)

• Directive names, ngModel or is it ng-model?

• HTML validators

• Usage• Tag

• Attribute

• Comment

• Class

• Template options

Questions?