Introduction of angular js

Introduction of
AngularJS
By : Tamer Solieman

What's AngularJS
● Why Called ng.
● Is AngularJS a library, framework, plugin
or a browser extension?
● Is AngularJS a templating system?
● What browsers does AngularJS work with?
● Does AngularJS use the jQuery library?
● It was developed by Google.
AngularJS came about to standardize web application structure and
provide a future template for how client-side apps should be developed.

Why AngularJS?
● Bootstrapping
● Templates
● 2-way data binding
● Dependency Injection
● Routing
● Directives

BOOTSTRAPPING
Step 1:
<html ng-app>

Step 2 :
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5
/angular.min.js"></script>

TEMPLATES
<ul>
<li ng-repeat = "item in [ 'web' , 'element' , '#14'] ">
{{item}}
</li>
</ul>

This will result :
● web
● eleent
● #14

TEMPLATES
● with Controller
○ JS
myApp.controller('TemplatesController',function($scope){
$scope.items=['web','element','#14'];
});

○ Template
<div ng-controller="TemplatesController">
<span ng-repeat="item in items">
{{item}} <small> {{$index}} </small>
</span>
</div>

TEMPLATES
● Async Templates
<div ng-view >

But You can use this
<div ng-include = "templates/foo.html" >

with nested levels ;-)

AngularJS loads the templates
asynchronously.

2-WAY DATA BINDING
● MVVM Pattern

● $scope Object

DEPENDENCY INJECTION

myApp.service('myService',function(){/*...*/});

myApp.controller('SomeItemsController',function(myService){
//myService was automatically injected

myService.get('some/path').success(function(data){
$scope.items=data.items;
});
});

ROUTING
$routeProvider
myApp.config(['$routeProvider',function($rp){
$rp
.when('/foo',{
templateUrl : 'tpl/foo.html',
controller : FooController
})
.otherwise({ redirectTo : '/bar' });
}]);

DIRECTIVES
● Directives let you invent new HTML
syntax, specific to your application.
● Reusable Components.
● Localization.

THANKS

Author : Tamer Solieman

Twitter: @tamersolieman

G+ : gplus.to/tamersolieman

Introduction of angular js

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Introduction of angular js

Ähnlich wie Introduction of angular js (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Introduction of angular js