6. 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
10. 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
11. 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
12. 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 ,
22. 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
24. AngularJs Controllers
AngularJS controllers control the data of AngularJS applications.
AngularJS controllers are regular JavaScript Objects.
One app could have one or more Controllers
29. 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>)
37. 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"]);
40. 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.
44. 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;
};
});
45. 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.
51. 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.
History :
Started 2008 -2009 Idea by Misko Hevery
He thought : I want to simplify web apps for Designers , not Developers
That was not complete angular at 2009, not clean
Open sourced at 2010
Used by some google teams (3) as beginning instead of GWT
Tshirt Contest at 99Designs ,and another one for Logo
They wanted to ship first stable Api AngularJS V1.0 by August 2010
They failed
May – 2011 first release
Wrote on Google blog , and analyse the API on Google Analytics
- first Conference
they start with an anecdote, discussing how they were working on a web application at Google. They have already written 17000 lines of code in about 6 months and it was almost finished, albeit with great frustration related to development speed and testability. This guy, Miško Hevery, tells everyone that by using a framework that he wrote in his spare time (you gotta love devs!) they could rewrite the whole application in two weeks. He was wrong, they did it in three weeks and at the end the whole thing has only 1500 lines of code and was fully testable.
90% less code, in 90% less time. And it was very testable.
Note :
Model is java script variable
Values in model code be set by Code , or by static or Dynamic Json
Compiler
Compiler is an angular service which traverses the DOM looking for attributes. The compilation process happens into two phases.
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. Any changes in the scope model are reflected in the view, and any user interactions with the view are reflected in the scope model. Making the scope model a single source of truth.
Some directives such ng-repeat clone DOM elements once for each item in collection. Having a compile and link phase improves performance since the cloned template only needs to be compiled once, and then linked once for each clone instance.