The document provides an overview of AngularJS, a JavaScript framework by Google for building single-page applications (SPAs) that focuses on dynamic web development with features like data binding and templating. It explains the framework's benefits, including simplifying development and enhancing testability, while clarifying what AngularJS is not, such as a JavaScript library or plugin. Additionally, it discusses key concepts like directives, factories, and the general structure for setting up an AngularJS application.

1. Sumit Khanduri
Software Consultant
Knoldus Software LLP

2. Agenda
What Became?
What is SPA?
What not?
What?
Zen of Angular?
When?
Why?
How to code?

3. What Became AngularJS?

4. An observation became angularjs ?

5. What exactly is SPA?

6. To have a SPA is really all about modifying
the DOM.

13. What is not AngularJS?
 It's not a Javascript library (e.g., Jquery).
 Its not a Platform (e.g .Net, Java, ) or a Language (e.g C#).
 Its not a Plugin or a browser extension.
 It doesn't abstract away HTML, CSS, or JavaScript.
 It doesn't require jQuery or inheritance from proprietary
types.
 It doesn't use one-way data binding.
 It doesn't require boilerplate code.
 Its not that complicated :D

14. What is AngularJS ?
 AngularJS is a relatively new JavaScript SPA framework by Google, designed
to make your front-end development as easy as possible.
 Open Source and purely developed on Javascript.
 It lets you use HTML as your template language and lets you extend HTML's
syntax to express your application's components clearly and succinctly.
 AngularJS is a structural framework for dynamic web apps.
 Angular teaches the browser new syntax through a construct we call directives

15. Contd...
A complete client-side solution
 Everything you need to build a CRUD app in a cohesive set: Data-binding, basic
templating directives, form validation, routing, reusable components and
dependency injection.
 Testability story: Unit-testing, end-to-end testing, mocks.
 Seed application with directory layout and test scripts as a starting point.

16. The Zen of Angular
1.) Angular is built around the belief that declarative
code is better than imperative. But you can do
imperative coding also.
2.) Decouple DOM manipulation from app logic,
improves the testability of the code.
3.) Decouple the client side of an app from the server
side.
4.) One core framework so after development you
don't have to worry about maintainence.
5.) Templating system is actually HTML.

17. Angular free's you from
1> Manipulating HTML DOM programmatically:
lBy declaratively describing how the UI should change as your application state
changes, you are freed from low-level DOM manipulation tasks.
lMost applications written with Angular never have to programmatically manipulate the
DOM, although you can if you want to.
2> Marshaling data to and from the UI:
lAngular eliminates almost all of this boilerplate, leaving code that describes the
overall flow of the application rather than all of the implementation details
3> Writing tons of initialization code just to get started:

18. When AngularJS?
Angular's sweet spot
lAngular was built with the CRUD application in mind.
lAngular simplifies application development by presenting a higher level of
abstraction to the developer.
lDon't use AngularJS in Games and GUI editors types of applications because
they have intensive and tricky DOM manipulation.
lLess Code.
lTestability.
lWhen you need SPA.

19. Why should I use AngularJS as my Front-End ?

20. Interest Over Time

21. Contd..

22. Community

23. Contd...
1.) Only one core library.
You don't have to rely on different another scripts and worried about those
different scripts version playing nicely into the future.
2.) Angular is built and maintained by dedicated Google engineers.
“AngularJS came about to standardize web application structure and provide a future
template for how client-side apps should be developed.”
3.) REST Easy.
One line of JavaScript, you can quickly talk to the server and get the data you
need to interact with your web pages.

24. Contd...
4.) Get Started in Minutes
<html ng-app = “”>
<head>
<meta charset="utf-8">
<title>First App </title>
<script src="angular.min.js">
</script>
</head>
<body>
Name:<input ng-model="anything"
type="text"/>
Hello {{anything}}
</body>
</html>

25. : MV*

26. And if you still think why?

28. Let's get started...!!

29. How to setup the environment?

30. Reference:

31. And thats all of it

32. Key Features
Directives and filters
Two way data binding
Views, controllers, Scope
Modules

33. Directives
1> Directives are markers on a DOM element (such as an attribute,
element name, comment or CSS class) that tell AngularJS's
HTML compiler ($compile) to attach a specified behavior to that
DOM element or even transform the DOM element and its children.
2> In simple terms, directive teach HTML new tricks.
3> Angular comes with a set of these directives built-in, like ngBind,
ngModel, and ngRepeat.

35. Filters

36. Data Binding

39. Basic Controller

42. Modules, Routes And Factories

49. Factories

50. Factories

53. Links you must go through
lhttps://builtwith.angularjs.org/
lhttps://docs.angularjs.org/guide
lhttp://www.codeproject.com/Articles/891718/AngularJS-Interview-Questions-and-
Answers
lhttp://weblogs.asp.net/dwahlin/what%E2%80%99s-
%E2%80%9Cright%E2%80%9D-with-angularjs
lhttp://code.tutsplus.com/tutorials/3-reasons-to-choose-angularjs-for-your-next-
project--net-28457
l http://codechutney.in/blog/javascript/mvc-and-mvvm-with-angularjs/
l http://kodypeterson.com/angularjs-the-3-types-of-data-binding/
lhttps://medium.com/@mnemon1ck/why-you-should-not-use-angularjs-
1df5ddf6fc99
lhttp://www.codeproject.com/Tips/872181/CRUD-in-Angular-js
lhttp://curran.github.io/screencasts/introToAngular/exampleViewer/#/

54. Videos You must watch
lhttps://www.youtube.com/watch?v=HCR7i5F5L8c
lhttps://www.youtube.com/watch?v=i9MHigUZKEM
lhttps://www.youtube.com/watch?v=TRrL5j3MIvo
lhttps://www.youtube.com/watch?v=6J08m1H2BME

55. Thank You...
Thank You !! :D