What is
AngularJS?
AngularJs
is a Frame work used to develop Dynamic Web Pages. The AngularJs library Reads
in HTML that contain additional information of all tags. It obeys the custom
attributes and it binds the input, output parts of the page model.
Why AngularJs?
§ AngularJs is used to organize your web
application.
§ It is an open source web application
on frame work development.
§ It makes the user to develop the web
application easily.
§ It helps to Design your structure and
test JAVA
SCRIPT code easily.
ABOUT ANGULARJS
« AngularJs is an extension of HTML for
web apps.
« It is futuristic frame work for web
application development.
« It is the new & advanced concept
behind standards of HTML, WEB COMPONENT and Model Driven View.
« It was Invented In 2009 by “MISKO
HEVERY” and “ADAM ABRONS”.
« It is used for gaining attraction in
industry.
« At present it is used by Vibrant
[huge] Community of users.
How to use
AngularJs?
i.
Include AngularJs Library
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
ii.
Create AngularJs Application
<html
ng-app></html>
Or
<html
ng-app=”demoApp”></html>
Or
<div
ng-app></div>
Or
<div
ng-app=”demoApp”></div>
iii.
Define Controller:
<div ng-controller="Ctrl">
<input
type="text" ng-model="message">
</div>
iv.
Implementation of Controller
Function Ctrl ($scope) { $scope.message=”Hello.
Enter your name plz”; }
Tags of
AngularJs
Binding:
i. <span
ng-bind="{expression}"></span>
Ex: - <span
ng-bind="message"></span>
ii. <p> {{message}} </p>
Looping:
i. <ul>
<li ng-repeat="thing in awesome Things">{{thing}}</li>
</ul>
Include
Template:
<div ng-view=”_template.html”></div>
DATABINDING
FRAME WORKS:
Class
of frame work is called data binding frame works.
The
whole purpose of Data Base Frame work is to help creating single web page
applications.
It
means they’re more general purpose but this is the main use for the screening of
single page apps.
i) SINGLE
PAGE APPLICATION
A
single page application also known as interface of a single page in web
application (or) web site that fits on a single web page with the goal
providing a more fluid user experience akin to a desktop application.
ii) AJAX
Ajax
is the most prominent technique currently being used in AJAX popular LIBRARIES
like jQUERY.
iii) JQUERY
It
is created to simplify client side scripting of html.
MODEL VIEW
CONTROL:
Data
Mining Frame works are based on a model view controller concept which is old
concept in computer science and it’s really still relevant today, so this is
main concept that there is a model which is dated.
Model
View Controller can be explained as Software architectural pattern for implementing
user interface it divides a given software application into three connected
parts.
MODEL:
Model
behind the thing that your ship that you are looking on the screen that is like
the data behind the application but only the data it is number of behaviors is
on prevention logic (or) layout it’s just the data.
VIEW:
View
is an element that user sees it’s like graphical presentation up the model and
then the user.
USER:
The
user interact with the tings on the screen and all those interactions change
the model through what called a controller.
CONTROLLER:
The
controller is a set of functions, that you know just changing the model and may
be they have some logic in the controller about how to translate the user interaction
to change the model.
So
I Love this Data Binding Framework.
PROVIDE
SOLUTION FOR COMPARISONS TO BACKBONE.JS:
Routing:
Handling updates to the URL has grain.
Templating: You can express your view in somewhat called a templating language. There are parts of the replaced with things from the model and Data Binding.
Templating: You can express your view in somewhat called a templating language. There are parts of the replaced with things from the model and Data Binding.
Data
Binding: Data
binding is really that the new part of these in web frame works and what that
does it.
It
maintains a Synchronization between model and the view the user interface.
THE
TOP DATABASE FRAME WORKS ARE:
·
ANGULARJS
·
KNOCKOUT
·
EMBER
·
JS
VIEW etc..,
Out
of above Technologies AngularJs is found to be the best and user friendly Technology
as of my research in various books, case studies and personal experience too.
CONTENTS:
1) PHILOSOPHY.
2) BOOTSTRAPPER.
3) NOTABLE DIRECTIVES.
4) TWO WAY DATABINDING.
5) CHROME PLUGIN.
6) LEGACY BROWSER SUPPORT.
7) DEVELOPMENT HISTORY.
PHILOSOPHY:
a) AngularJs is developed for the benefit
that declarative programing should be used for binding user interface and write
software components.
b) It follows Model View Control (MVC).
c) It extends tradition of HTML to better
serve dynamic concepts through Two Way Data Binding.
BOOTSTRAPPER:
Three
levels of the Angular Bootstrapper.
a) Creating new injector.
b) Compile service: - The compile service
like JAVA, dotNET.
c) Link Phase: - Its helps attaches all
the directive scope.
Notable
Directives (or) Important Directives:
a) ng-app
Declares
element as root element of the application allowing behavior to be modified
over custom HTML tags.
b) ng-bind
Changes
the text of element to the value of expression. <span
ng-bind="name"></span> will display the value of ‘name’
inside the span. Any changes to ‘name’ are emulated (reflected) instantly in
the DOM anywhere the variable is used.
c) ng-model
Akin
(Similar) to ng-bind, but allows two-way data binding between the view and the
scope.
d) ng-class
Allows
class attributes to be loaded dynamically.
e) ng-controller
Specifies
a JavaScript controller class that appraise (evaluates) HTML expressions.
f) ng-repeat
Instantiate
an element once per item from collection.
g) ng-show & ng-hide
Conditionally
show or hide elements, which depends on the value of a boolean expression. Show
& hide is achieved by setting the Cascading Style Sheet (CSS) display
style.
h) ng-switch
Conditionally
instantiate one template from a group of choices, depending on the value of a
selection expression.
i) ng-view
The
base directive responsible for maintaining routes that resolve JSON before
clarifying templates driven by specified controllers.
j) ng-if
Basic
if statement directive which allow you to show the latter elements if the
conditions are true. When the condition is false, the element is removed from
DOM. When true, clone of compiled element is re-inserted again.
Chrome
plugin
In
July 2012, the Angular team built a plugin for the Google Chrome browser called
Batarang, that improves the debugging experience for web applications built
with Angular. The extension aims to allow for easy detection of performance
bottlenecks and offers a GUI for debugging applications. The Chrome extension
is not compatible with latest releases of Angular.
Legacy
browser support
Versions
1.2 and later of AngularJS do not support Internet Explorer versions 6 or 7.
Versions 1.3 and later of AngularJS drop support for Internet Explorer 8.
Development
History:
- First developed in 2009 MISKO HEVERY & ADAM ABRONS at Brat techLLC.
- Software behind on Online JSON STORAGE SWRIVE.
- This venture was located at the web domain “GETANGULAR.com”
- ABRONS later left the project but HEVERY employee at Google continue to develop and maintain the library with the fellow google employees UGOR MINAR & VOJTA JINA.
Advantages of
AngularJs
- It is used for Super-fast development
- Makes developing SPA easy
- Awesome performance
- Make apps scalable
- Data-binding & automatic DOM manipulation
- XHR/JSONP
Disadvantages
·
Good
for IO driven apps only (not games)
·
SEO?
