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

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

AngularJS Filters cont.  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/angularstyleguide/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