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

More Related Content

What's hot

Similar to Angular js slides

More from Amr Abd El Latief

Recently uploaded

Angular js slides

Editor's Notes