Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo
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

More Related Content

AngularJs