Download - AngularJs

Transcript
Page 1: AngularJs

Angular

Page 2: AngularJs

Angular Expressions

Page 3: AngularJs

$interopolateProvieder

Page 4: AngularJs

Undefined / Null

Page 5: AngularJs

$eval()

Page 6: AngularJs

2-Way Data Binding

Page 7: AngularJs

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

Page 8: AngularJs

angular.module('opentalks')

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

$scope.username = "Someone :D";

}]);

Page 9: AngularJs

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

Page 10: AngularJs

angular.module('opentalks')

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

Page 11: AngularJs

Filters

Page 12: AngularJs

Pipes In Linux

|

Page 13: AngularJs

ls | “ ”grep something

Page 14: AngularJs

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

Page 15: AngularJs

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

Page 16: AngularJs

Custom Filter

Page 17: AngularJs

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

Page 18: AngularJs

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

Page 19: AngularJs

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

Page 20: AngularJs

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

return function(){….

};

});

Page 21: AngularJs

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

return function(input){

};

});

Page 22: AngularJs

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

return function(input){return 'output';

};

});

Page 23: AngularJs

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

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

};

});

Page 24: AngularJs

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

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

};

});

Page 25: AngularJs

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

Page 26: AngularJs

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

Page 27: AngularJs

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

Page 28: AngularJs

Filters in

{ , , ... Controllers Services }

Page 29: AngularJs

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

}

Page 30: AngularJs

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

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

Page 31: AngularJs

Services

Page 32: AngularJs

Reusability

Page 33: AngularJs

Singleton

Page 34: AngularJs

. ( )angular module 'opentalks'

.factory(...);

Page 35: AngularJs

. ( )angular module 'opentalks'

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

Page 36: AngularJs

. ( )angular module 'opentalks'

. ( , factory 'OpentalksPeople' (){function

... });

Page 37: AngularJs

. ( )angular module 'opentalks'

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

.... }; });

Page 38: AngularJs

. ( )angular module 'opentalks'

. ( , (){factory 'OpentalksPeople' function

{return

.... }; });

Page 39: AngularJs

. ( )angular module 'opentalks'

. ( , (){factory 'OpentalksPeople' function

()return new Aservice ;

});

Page 40: AngularJs

. ( )angular module 'opentalks'

. ( , (){factory 'OpentalksPeople' function

return 'Or even a string';

});

Page 41: AngularJs

. ( )angular module 'opentalks'

. ( , (){factory 'OpentalksPeople' function

return 123465798;

});

Page 42: AngularJs

Revealing Module Pattern

Page 43: AngularJs

. ( )angular module 'opentalks'

. ( , ( )factory 'OpentalksPeople' function Dependencies

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

= (){...}aPrivateFunction function

... {return

: aMethod somePublicfunction

}; });

Page 44: AngularJs

. ( )angular module 'opentalks'

.service(...);

Page 45: AngularJs

. ( )angular module 'opentalks'

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

Page 46: AngularJs

. ( )angular module 'opentalks'

. ( , service 'OpentalksPeople' (){function

... });

Page 47: AngularJs

. ( )angular module 'opentalks'

. ( , service 'OpentalksPeople' (){function

... });

Page 48: AngularJs

. ( )angular module 'opentalks'

. ( , (){service 'OpentalksPeople' function

. = (){}this somemethod function ;

… });

Page 49: AngularJs

. ( )angular module 'opentalks'

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

... });

Page 50: AngularJs

Configurable?

Page 51: AngularJs

Providers

Page 52: AngularJs

Accessible in Config Phase

Page 53: AngularJs

As a Service

Page 54: AngularJs

. ( )angular module 'opentalks'

.provider(...);

Page 55: AngularJs

. ( )angular module 'opentalks'

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

Page 56: AngularJs

. ( )angular module 'opentalks'

. ( , provider 'OpentalksWebsite' (){function

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

});

Page 57: AngularJs

. ( )angular module 'opentalks'

. ( , (){provider 'OpentalksWebsite' function

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

});

Page 58: AngularJs

. ( )angular module 'opentalks'

. ( , (){provider 'OpentalksWebsite' function

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

Page 59: AngularJs

Using In Config Phase

Page 60: AngularJs

. ( )angular module 'opentalks'

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

});

Page 61: AngularJs

Using As A Service

Page 62: AngularJs

. ( )angular module 'opentalks'

. ( , controller 'CityController'

(function OpentalksWebsite){ ... });

Page 63: AngularJs

Directives

Page 64: AngularJs

Teaching HTML New Tricks

Page 65: AngularJs

DOM Manipulation

Page 66: AngularJs

jqLite

Page 67: AngularJs

-Angular UI

Page 68: AngularJs

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

{{ }}person

/< div>

Page 69: AngularJs

<pagination ... />< pagination>

Page 70: AngularJs

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

Page 71: AngularJs

HTML5 Compliance

Page 72: AngularJs

data-{attribute-name}

Page 73: AngularJs

x-{attribute-name}

Page 74: AngularJs

Imperative

.vs

Declarative

Page 75: AngularJs

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

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

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

Page 76: AngularJs

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

Page 77: AngularJs

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

….

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

Page 78: AngularJs

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

Page 79: AngularJs

Dependency Injection

Page 80: AngularJs

Form Validation

Page 81: AngularJs

<form name="opentalks">

.../< form>

Page 82: AngularJs

.opentalks $valid

Page 83: AngularJs

.opentalks $invalid

Page 84: AngularJs

.opentalks $pristine

Page 85: AngularJs

.opentalks $dirty

Page 86: AngularJs

<form name="opentalks">

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

Page 87: AngularJs

.opentalks username.$pristine

Page 88: AngularJs

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

Page 89: AngularJs

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

Page 90: AngularJs

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

Page 91: AngularJs

Minification

Page 92: AngularJs

ngmin

Page 93: AngularJs

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

Page 94: AngularJs

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

Page 95: AngularJs

-Angular seed

Page 96: AngularJs

...Debuging

Page 97: AngularJs

Unminified Version

Page 98: AngularJs

AngularJs Batarang

Page 99: AngularJs

SEO

Page 100: AngularJs

Search Engine Crawlers

Page 101: AngularJs

.prerender io

Page 102: AngularJs

.getseojs com