Post on 12-Apr-2017
Why this AngularJS “CRAZE”
Generation of the web page layout and Insertion of the content inside that layout is no-more the job of server side code
JavaScript can do the above job very well, especially with AngularJS. (i.e generation of layouts and insertion of the contents)
AngularJS framework helps the JavaScript developers to write well structured code in a very short time.
Why only AngularJS ?
to write Maintainable, Testable
and Reusable JavaScript Code
What is “special”
about AngularJS
1. Follows MVC/MVVM/MVW
2. Built in components for better code
a. Module
i. Controller
ii. Directive
iii.Service
iv. filters
3. Features
a. Dependency Injection
b. Data Binding
c. Dirty checking
d. Single Page Application
e. Routing
f. Filtering
g. HTML extension
h. Templating
i. Ready for the RESTful Services
j. Unit Testing
SPA (Single Page
Applications)
?
Single Page Application (SPA) is a web application or website that loads all of the resources required to navigate throughout the site on the first page load.
As the user clicks links and interacts with the page, subsequent content is loaded dynamically.
The application will often update the URL in the address bar to emulate traditional page navigation, but another full page request is never made.
AngularJS is one of the popular framework to develop SPA
Examples for SPA
FacebookGmailFlipkartTwitter
How to Develop
AngularJS Application
1. Create an AngularJS module
2. Add a controller to the module
3. Link the module and controller to HTML page
4. Perform data binding/templating whatever you want
(Example in the live code)
Data Binding
1. One way Data BindingData binding is the automatic synchronization of data between view and the model.
2. Two way Data Bindingthe synchronization process of data between view and model in the both ways.
Dependency Injection
A software design pattern that deals with how components get hold of their dependencies.
Directives
A directive is an extension of the HTML vocabulary that allows us to create new behaviors.
Ex: ng-repeat,ng-show,ng-hide ...
Directives are markers on DOM elements such as elements, attributes, css, and more. These can be used to create custom HTML tags that serve as new, custom widgets.
Filters
Filters transform the data before it is processed by a directive and displayed in a view without modifying the original data in the scope, allowing the same data to be displayed in different ways in different parts of the application.
Example: Apply ‘orderBy’ filter for ng-repeat directive
ServicesEncapsulate functionality(business logic) that you want to reuse in an application
1. Built-in Services
2. Custom Services
RoutingRoutes are the secret sauces that let us write Single Page Applications (SPAs) with ease.
We configure which views are to be shown for which URLs using the$routeProvider service.
conclusion
This is a simple introduction to AngularJS and its features.
In the coming session we will see all these features in detailed way.
Thank You!!!! Keep Smiling