angular js
TRANSCRIPT
![Page 1: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/1.jpg)
Sumit KhanduriSoftware Consultant
Knoldus Software LLP
![Page 2: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/2.jpg)
Agenda
What Became?What is SPA?What not?What?Zen of Angular?When?Why?How to code?
![Page 3: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/3.jpg)
What Became AngularJS?
![Page 4: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/4.jpg)
An observation became angularjs ?
![Page 5: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/5.jpg)
What exactly is SPA?
![Page 6: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/6.jpg)
To have a SPA is really all about modifying the DOM.
![Page 7: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/7.jpg)
![Page 8: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/8.jpg)
![Page 9: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/9.jpg)
![Page 10: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/10.jpg)
![Page 11: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/11.jpg)
![Page 12: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/12.jpg)
![Page 13: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/13.jpg)
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
![Page 14: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/14.jpg)
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
![Page 15: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/15.jpg)
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.
![Page 16: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/16.jpg)
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.
![Page 17: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/17.jpg)
Angular free's you from
1> Manipulating HTML DOM programmatically:
l By declaratively describing how the UI should change as your application state changes, you are freed from low-level DOM manipulation tasks.
l Most 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:
l Angular 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:
![Page 18: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/18.jpg)
When AngularJS?
Angular's sweet spot
l Angular was built with the CRUD application in mind.
l Angular simplifies application development by presenting a higher level of abstraction to the developer.
l Don't use AngularJS in Games and GUI editors types of applications because they have intensive and tricky DOM manipulation.
l Less Code.
l Testability.
l When you need SPA.
![Page 19: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/19.jpg)
Why should I use AngularJS as my Front-End ?
![Page 20: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/20.jpg)
Interest Over Time
![Page 21: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/21.jpg)
Contd..
![Page 22: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/22.jpg)
Community
![Page 23: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/23.jpg)
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.
![Page 24: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/24.jpg)
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>
![Page 25: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/25.jpg)
: MV*
![Page 26: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/26.jpg)
And if you still think why?
![Page 27: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/27.jpg)
![Page 28: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/28.jpg)
Let's get started...!!
![Page 29: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/29.jpg)
How to setup the environment?
![Page 30: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/30.jpg)
Reference:
![Page 31: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/31.jpg)
And thats all of it
![Page 32: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/32.jpg)
Key Features
Directives and filters
Two way data binding
Views, controllers, Scope
Modules
![Page 33: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/33.jpg)
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.
![Page 34: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/34.jpg)
![Page 35: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/35.jpg)
Filters
![Page 36: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/36.jpg)
Data Binding
![Page 37: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/37.jpg)
![Page 38: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/38.jpg)
![Page 39: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/39.jpg)
Basic Controller
![Page 40: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/40.jpg)
![Page 41: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/41.jpg)
![Page 42: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/42.jpg)
Modules, Routes And Factories
![Page 43: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/43.jpg)
![Page 44: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/44.jpg)
![Page 45: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/45.jpg)
![Page 46: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/46.jpg)
![Page 47: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/47.jpg)
![Page 48: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/48.jpg)
![Page 49: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/49.jpg)
Factories
![Page 50: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/50.jpg)
Factories
![Page 51: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/51.jpg)
![Page 52: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/52.jpg)
![Page 53: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/53.jpg)
Links you must go through
l https://builtwith.angularjs.org/
l https://docs.angularjs.org/guide
l http://www.codeproject.com/Articles/891718/AngularJS-Interview-Questions-and-Answers
l http://weblogs.asp.net/dwahlin/what%E2%80%99s-%E2%80%9Cright%E2%80%9D-with-angularjs
l http://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/
l https://medium.com/@mnemon1ck/why-you-should-not-use-angularjs-1df5ddf6fc99
l http://www.codeproject.com/Tips/872181/CRUD-in-Angular-js
l http://curran.github.io/screencasts/introToAngular/exampleViewer/#/
![Page 54: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/54.jpg)
Videos You must watch
l https://www.youtube.com/watch?v=HCR7i5F5L8c
l https://www.youtube.com/watch?v=i9MHigUZKEM
l https://www.youtube.com/watch?v=TRrL5j3MIvo
l https://www.youtube.com/watch?v=6J08m1H2BME
![Page 55: Angular Js](https://reader038.vdocuments.net/reader038/viewer/2022110318/55d2e017bb61ebaa428b4805/html5/thumbnails/55.jpg)
Thank You...Thank You !! :D