Angular

Angular Expressions

$interopolateProvieder

Undefined / Null

$eval()

2-Way Data Binding

<div>{{ username }}</div>

angular.module('opentalks')

.controller('UserController', ['$scope', function($scope){

$scope.username = "Someone :D";

}]);

<input type="text" ng-model="username" />

angular.module('opentalks')

.controller('UserController', ['$scope', function($scope){ $scope.$watch('username', function(newVal, oldVal){ ... console.log("Username has been changed!"); }; }]);

Filters

Pipes In Linux

|

ls | “ ”grep something

<div>{{ username }}</div>

<div>{{ username | uppercase }}</div>

Custom Filter

angular.module('opentalks') .filter(...);

angular.module('opentalks') .filter('opentalks', ...);

angular.module('opentalks') .filter('opentalks', function(){ …. });

angular.module('opentalks') .filter('opentalks', function(){

return function(){….

};

});

angular.module('opentalks') .filter('opentalks', function(){

return function(input){

};

});

angular.module('opentalks') .filter('opentalks', function(){

return function(input){return 'output';

};

});

angular.module('opentalks') .filter('opentalks', function(){

return function(input, arg1, arg2, ...){return 'output';

};

});

angular.module('opentalks') .filter('opentalks', function(Dependencies){

return function(input, arg1, arg2, ...){return 'output';

};

});

<div>{{ username | opentalks }}</div>

<div>{{ username | opentalks:'arg1' }}</div>

<div>{{ username | opentalks:'arg1':'arg2' }}</div>

Filters in

{ , , ... Controllers Services }

Angular.modeule('opentalks') .controller('OpentalksController', function(opentalksopentalksFilterFilter){

}

Angular.modeule('opentalks') .controller('OpentalksController', function(opentalksFilter){

var output = opentalksFilteropentalksFilter(input, arg1, arg2)(input, arg1, arg2);;}

Services

Reusability

Singleton

. ( )angular module 'opentalks'

.factory(...);

. ( )angular module 'opentalks'

. (factory 'OpentalksPeople', ...);

. ( )angular module 'opentalks'

. ( , factory 'OpentalksPeople' (){function

... });

. ( )angular module 'opentalks'

. ( , (factory 'OpentalksPeople' function Dependencies){ {return

.... }; });

. ( )angular module 'opentalks'

. ( , (){factory 'OpentalksPeople' function

{return

.... }; });

. ( )angular module 'opentalks'

. ( , (){factory 'OpentalksPeople' function

()return new Aservice ;

});

. ( )angular module 'opentalks'

. ( , (){factory 'OpentalksPeople' function

return 'Or even a string';

});

. ( )angular module 'opentalks'

. ( , (){factory 'OpentalksPeople' function

return 123465798;

});

Revealing Module Pattern

. ( )angular module 'opentalks'

. ( , ( )factory 'OpentalksPeople' function Dependencies

{ ... = (){...}aPublicfunction function

= (){...}aPrivateFunction function

... {return

: aMethod somePublicfunction

}; });

. ( )angular module 'opentalks'

.service(...);

. ( )angular module 'opentalks'

. (service 'OpentalksPeople', ...);

. ( )angular module 'opentalks'

. ( , service 'OpentalksPeople' (){function

... });

. ( )angular module 'opentalks'

. ( , service 'OpentalksPeople' (){function

... });

. ( )angular module 'opentalks'

. ( , (){service 'OpentalksPeople' function

. = (){}this somemethod function ;

… });

. ( )angular module 'opentalks'

. ( , (service 'OpentalksPeople' function Dependencies){ . = (){}this somemethod function ;

... });

Configurable?

Providers

Accessible in Config Phase

As a Service

. ( )angular module 'opentalks'

.provider(...);

. ( )angular module 'opentalks'

. (provider 'TabrizOpentalks', ...);

. ( )angular module 'opentalks'

. ( , provider 'OpentalksWebsite' (){function

.... . = (){...} this setCity function ;

});

. ( )angular module 'opentalks'

. ( , (){provider 'OpentalksWebsite' function

.... . = (){...} this $get function

});

. ( )angular module 'opentalks'

. ( , (){provider 'OpentalksWebsite' function

.... . = (this $get function ServiceDependencies){ ... } });

Using In Config Phase

. ( )angular module 'opentalks'

. ( (config function OpentalksWebsiteProviderProvider){ . ( )OpentalksWebsiteProvider setCity 'Tabriz' ;

});

Using As A Service

. ( )angular module 'opentalks'

. ( , controller 'CityController'

(function OpentalksWebsite){ ... });

Directives

Teaching HTML New Tricks

DOM Manipulation

jqLite

-Angular UI

<div -ng repeat= "person in opentalks">

{{ }}person

/< div>

<pagination ... />< pagination>

<button -ng click= ( "someFunction ' :D:D ) /' ">< button>

HTML5 Compliance

data-{attribute-name}

x-{attribute-name}

Imperative

.vs

Declarative

=<div id "username /">< div>

.... (document getElementById 'username ). = ' innerHTML

, , !'My username not yours goes here ';

{{ <div> username }} /< div>

=”<div id pagination” />< div>

….

= . (var pagination document getElementById 'pagination )' ;...

<pagination currentPage=”139”></pagination>

Dependency Injection

Form Validation

<form name="opentalks">

.../< form>

.opentalks $valid

.opentalks $invalid

.opentalks $pristine

.opentalks $dirty

<form name="opentalks">

<input name=” ” username ...required />/< form>

.opentalks username.$pristine

. .opentalks username .{...}$error

=” ” <input name username minlength=”5” />

=” ” <input name username pattern=”A Pattern :D” />

Minification

ngmin

. ( , (controller 'SomeCtrl' function $scope){ ...});

. ( , controller 'SomeCtrl' ['$scope', (function $scope){ ...}]);

-Angular seed

...Debuging

Unminified Version

AngularJs Batarang

SEO

Search Engine Crawlers

.prerender io

.getseojs com