My PPT on AngularJS at Infobeans

1. A session by Amit Baghel
Superheroic JavaScript MVW Framework

2. History
AngularJS was created, as a side project, in 2009 by two developers,
Misko Hevery and Adam Abrons. The two originally envisioned their
project, GetAngular, to be an end-to-end tool that allowed web
designers to interact with both the frontend and the backend.
Hevery eventually began working on a project at Google called Google
Feedback. Hevery and 2 other developers wrote 17,000 lines of code
over the period of 6 months for Google Feedback. However, as the
code size increased, Hevery began to grow frustrated with how
difficult it was to test and modify the code the team had written.
So Hevery made the bet with his manager that he could rewrite the
entire application using his side GetAngular project in two weeks.
Hevery lost the bet. Instead of 2 weeks it took him 3 weeks to rewrite
the entire application, but he was able to cut the application from
17,000 lines to 1,500 lines.

3. 17000 lines of code to 1500 how?
Take an example
In JQuery
HTML
<p id="test"></p>
<p id="test1"></p>
<p id="test2"></p>
<p id="test3"></p>

4. 17000 lines of code to 1500 how?
Script
$(function(){
$('#test’).text('Hello World!');
$('#test1’).show();
$('#test2’).hide();
$('#test3’).addClass(‘active’);
});

5. 17000 lines of code to 1500 how?
Same thing in Angularjs ?
HTML
<p>{{greeting}}</p>
<p ng-show=’visible’ ></p>
<p ng-hide=’visible’></p>
<p ng-class=’{ ‘active’: visible }’></p>

6. 17000 lines of code to 1500 how?
Same thing in Angularjs ?
Script
$scope.greeting=’Hello Viatech’;
$scope.visible=’true’;

7. •Structure, Quality and Organization
•Lightweight ( < 36KB compressed and
minified)
•Free
•Separation of concern
•Modularity
•Extensibility & Maintainability
•Reusable Components
Benefits of Angularjs

8. What Browsers Does AngularJS Support?
Angular claims to support “Class A Browsers.” As of Angular 1.2, the Angular team considers the
following browsers “Class A”:
● Chrome
● Firefox
● Safari
● iOS
● Android
● IE8+.

9. https://angularjs.org

11. What is SPA?

12. In Angularjs SPA application
is created with the help of
one of the most happening
features of Angularjs i.e.
Routing

13. ● Modules
● Directives
● Templates
● Scope
● Expressions
● DataBinding
● MVC (Model, View & Controller)
● Validations
● Filters
● Services
● Routing
● Dependency Injection
Features

14. What is a module?
A container for code for the
different parts of your
applications.
Your module goes here
ng-app=’yourModuleName’
Module

15. What is a controller?
AngularJS applications are
controlled by controllers.
Controller does not directly
communicate to views but with
the help of scope as like model
in ASP.Net MVC.
ng-
controller=’yourControllerName’
ControllerController

16. A quick note
$rootscope is the parent
scope for all the scopes of
several controller
Behaves like models in MVC
but models are two-way
Scope

17. one way binding is done with
the help of inbuilt directive
i.e.
Ng-bind for once
and
{{}} / interpolation /
expression
Binding

18. Two way binding is done
with the help of an inbuilt
directive i.e.
ng-model
Binding

19. As we say controls in
ASP.net or Partial views in
MVC
Directive

20. What are expressions or code blocks in ASP.Net or MVC?

21. ASP.NET
MVC
Code blocks in Microsoft technologies

22. {{ variable }}
Will get evaluated to its
value .
Expression in Angularjs

23. Good luck!
Keep learning.
Thank you everyone !!

24. In next session
We will decide :)