Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Sumit Khanduri
Software Consultant
Knoldus Software LLP
Agenda
What Became?
What is SPA?
What not?
What?
Zen of Angular?
When?
Why?
How to code?
What Became AngularJS?
An observation became angularjs ?
What exactly is SPA?
To have a SPA is really all about modifying
the DOM.
What is not AngularJS?
 It's not a Javascript library (e.g., Jquery).
 Its not a Platform (e.g .Net, Java, ) or a Langua...
What is AngularJS ?
 AngularJS is a relatively new JavaScript SPA framework by Google, designed
to make your front-end de...
Contd...
A complete client-side solution
 Everything you need to build a CRUD app in a cohesive set: Data-binding, basic
...
The Zen of Angular
1.) Angular is built around the belief that declarative
code is better than imperative. But you can do
...
Angular free's you from
1> Manipulating HTML DOM programmatically:
lBy declaratively describing how the UI should change a...
When AngularJS?
Angular's sweet spot
lAngular was built with the CRUD application in mind.
lAngular simplifies application...
Why should I use AngularJS as my Front-End ?
Interest Over Time
Contd..
Community
Contd...
1.) Only one core library.
You don't have to rely on different another scripts and worried about those
different ...
Contd...
4.) Get Started in Minutes
<html ng-app = “”>
<head>
<meta charset="utf-8">
<title>First App </title>
<script src...
: MV*
And if you still think why?
Let's get started...!!
How to setup the environment?
Reference:
And thats all of it
Key Features
Directives and filters
Two way data binding
Views, controllers, Scope
Modules
Directives
1> Directives are markers on a DOM element (such as an attribute,
element name, comment or CSS class) that tell...
Filters
Data Binding
Basic Controller
Modules, Routes And Factories
Factories
Factories
Links you must go through
lhttps://builtwith.angularjs.org/
lhttps://docs.angularjs.org/guide
lhttp://www.codeproject.com/...
Videos You must watch
lhttps://www.youtube.com/watch?v=HCR7i5F5L8c
lhttps://www.youtube.com/watch?v=i9MHigUZKEM
lhttps://w...
Thank You...
Thank You !! :D
Angular Js
Angular Js
Angular Js
Angular Js
Angular Js
Angular Js
Angular Js
Angular Js
Angular Js
Angular Js
Angular Js
Angular Js
Angular Js
Angular Js
Angular Js
Angular Js
Angular Js
Angular Js
Angular Js
Angular Js
Prochain SlideShare
Chargement dans…5
×

Angular Js

2 073 vues

Publié le

AngularJS is a relatively new JavaScript SPA framework by Google, designed to make your front-end development as easy as possible.

Publié dans : Technologie
  • Identifiez-vous pour voir les commentaires

Angular Js

  1. 1. Sumit Khanduri Software Consultant Knoldus Software LLP
  2. 2. Agenda What Became? What is SPA? What not? What? Zen of Angular? When? Why? How to code?
  3. 3. What Became AngularJS?
  4. 4. An observation became angularjs ?
  5. 5. What exactly is SPA?
  6. 6. To have a SPA is really all about modifying the DOM.
  7. 7. 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
  8. 8. 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
  9. 9. 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.
  10. 10. 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.
  11. 11. 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:
  12. 12. 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.
  13. 13. Why should I use AngularJS as my Front-End ?
  14. 14. Interest Over Time
  15. 15. Contd..
  16. 16. Community
  17. 17. 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.
  18. 18. 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>
  19. 19. : MV*
  20. 20. And if you still think why?
  21. 21. Let's get started...!!
  22. 22. How to setup the environment?
  23. 23. Reference:
  24. 24. And thats all of it
  25. 25. Key Features Directives and filters Two way data binding Views, controllers, Scope Modules
  26. 26. 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.
  27. 27. Filters
  28. 28. Data Binding
  29. 29. Basic Controller
  30. 30. Modules, Routes And Factories
  31. 31. Factories
  32. 32. Factories
  33. 33. 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/#/
  34. 34. 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
  35. 35. Thank You... Thank You !! :D

×