Angular js slides

AngularJS
By
Amr Abd El Latief
 Presented to : JETS, ITI

Agenda
 Why Angular
 Sites uses Angular
 What is Angular
 History
 Single page Applications
 AngularJs
 Angular Controllers
 Angular Templates
 Angular Directives
 Angular Routers
 Filters , Services
 Questions

Why AngularJS
 AngularJS is the 6th most starred project of all time on GitHub.
 Mobile Compatibility web Apps.
 usage

Sites use AngularJS
 https://www.madewithangular.com/

History
 Origins within Google, invented by Misko Hevery,
Brad Green
 Misko is the creator of AngularJS and an agile
coach at Google.
 17,000 lines in 6 months => 1,500 in 3 weeks
2008 - 2009
 “You are all liars”
 Open-sourced jan- 2010

AngularJS - What is
 Def :
 Is a JavaScript-based open-source front-end web application Framework build
for single page applications.
 open-source https://github.com/angular/angular.js
 front-end > No Business Logic > visualization Logic
DB
B.E.
Any Back End
Technology
JSON
F.E. App
AngularJs

AngularJS - What is
 Def :
 is a JavaScript-based open-source front-end web application Framework build
for single page applications.
D.B B.E.
Angular JS App
Mobile
JSon

AngularJS - What is
 Def :
 is a JavaScript-based open-source front-end web application Framework build
for single page apllications.
 Frame Work > Enhance productivity
 For Single page Applications ,

Single Page Applications
 As :

AngularJS Strength points
(what Angular presents to you? )
 Two way Binding
 MVC
 Run on Clients Browser.
 Testing

AngularJS is MVC
ng-bind
{{ }}
ng-model
ng-app
ng-init

AngularJS - Walk through , And First Steps
 ng-app
 ng-init
 ng-model <input> , <textarea > , … etc
 ng-bind <p></p> , <span></span>,… etc
 {{}}

AngularJS - Walk through , Continue
 ng-repeat
 Divide Model

How it really works
Read
• HTML
• custom tag attributes
interprets
• Attributes as Directives
Bind
• input and output parts of View
TO model
• Model is java script variable
• set by Code , or by static or
Dynamic Json

AngularJS , Main Components
 Controllers
 Templates
 Directives
 Routers
 Filters
 Services

AngularJs Controllers
 AngularJS controllers control the data of AngularJS applications.
 AngularJS controllers are regular JavaScript Objects.
 One app could have one or more Controllers

Template
 Template is a part from Html page
 Saved as .html File

Directives cont.
 AngularJS lets you extend HTML with new attributes called Directives.
 AngularJS has a set of built-in directives which offers functionality to your
applications.
 AngularJS also lets you define your own directives.
 Directive = Controller( javascript) + Template ( <html>)

Directives
Directives
Built-In
Custom

Built-In
 ng-app
 ng-init
 ng-model
 ..etc

Custom Directives
 Create
 app.directive("w3TestDirective", function( ) {
return {
template : "<h1>Made by a directive!</h1>"
};
});

Custom Directives Cont.
 Components = Directives

Routes
 he ngRoute module routes your application to different pages without
reloading the entire application.
 You must include [angular-route.js]
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-
route.js"></script>
 You must include [ngRoute] in the App
 var app = angular.module("myApp", ["ngRoute"]);

Routes Cont.
 ngRoute provides You $routeProvider

So, Where Does it Go?
 It goes between : ng-view
 <div ng-view></div>
 <ng-view></ng-view>
 <div class="ng-view"></div>
 Application can only have one ng-view directive.

AngularJS Filters
 Formats data for display.

AngularJS Filters cont.
Built In Filters

 How to use
 {{ expression | filter }}
 {{12}} - > 12
 {{12 | currency}} - > $12.00
 Filter Chaining
 {{expression | filter1 | filter2 | ...}}

 Custom Filters
 app.filter('myFormat', function() {
return function(x) {
var i, c, txt = "";
for (i = 0; i < x.length; i++) {
c = x[i];
if (i % 2 == 0) {
c = c.toUpperCase();
}
txt += c;
}
return txt;
};
});

AngularJs services
 a service is a function, or object, that is available for, and limited to, your
AngularJS application.
 AngularJS has about 30 built-in services. One of them is the $location
service.

AngularJs services Cont.
Services
Built In
Custom
made

Built-in Services
 $location window.location
 $http
 $timeout window.setTimeout
 $interval window.setInterval
 More : https://docs.angularjs.org/api/ng/service

How does it work
 Compile: traverse the DOM and collect all of the directives. The result is a
linking function.
 Link: combine the directives with a scope and produce a live view.

Future & Readings (Complete the Trip)
 https://github.com/angular/angular-seed
 https://karma-runner.github.io/1.0/index.html
 https://docs.angularjs.org/guide
 https://github.com/angular/angular.js/wiki/Understanding-Scopes
 https://www.youtube.com/watch?v=r1A1VR0ibIQ
 https://github.com/johnpapa/angularstyleguide/blob/master/a1/READ
ME.md

Refrences
 https://docs.angularjs.org/tutorial/
 https://www.youtube.com/playlist?list=PLF8OvnCBlEY1wS7CSq_FKPYD_
2E5eng79
 https://www.w3schools.com/angular/
 https://www.slideshare.net/SathishVJ/angularjs-beginners-workshop
 https://github.com/angular/angular.js/wiki/Understanding-Scopes
 https://github.com/johnpapa/angular-
styleguide/blob/master/a1/README.md#controllers
 https://www.youtube.com/watch?v=khk_vEF95Jk

Angular js slides

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Angular js slides

Similar to Angular js slides (20)

More from Amr Abd El Latief

More from Amr Abd El Latief (10)

Recently uploaded

Recently uploaded (20)

Angular js slides

Editor's Notes