angular js
TRANSCRIPT
Sumit KhanduriSoftware 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 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
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
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.
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.
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:
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.
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 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.
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>
: 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 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.
Filters
Data Binding
Basic Controller
Modules, Routes And Factories
Factories
Factories
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/#/
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
Thank You...Thank You !! :D