ANGULAR JS TRAINING IN PUNE

A brief Introduction :
• What is Angular JS ?
AngularJS is a JavaScript framework. It can be
added to an HTML page with a <script> tag.
AngularJS extends HTML attributes with Directives,
and binds data to HTML with Expressions.

• Why Angular JS ?
Other frameworks deal with HTML’s
shortcomings by either abstracting away
HTML, CSS, and/or JavaScript or by providing
an imperative way for manipulating the DOM.
Neither of these address the root problem that
HTML was not designed for dynamic views.

1. Structure, Quality and Organization
2. Lightweight ( < 36KB compressed and minified)
3. Free
4. Separation of concern
5. Modularity
6. Extensibility & Maintainability
7. Reusable Components

jQuery :
• Allows for DOM Manipulation
• Does not provide structure to your
code
• Does not allow for two way binding

Features of AngularJS:
• Two-way Data Binding – Model as single source
of truth
• Directives – Extend HTML
• MVC
• Dependency Injection
• Testing
• Deep Linking (Map URL to route Definition)
• Server-Side Communication

Data Binding:
<html ng-app>
<head>
<script src='angular.js'></script>
</head>
<body>
<input ng-model='user.name'>
<div ng-show='user.name'>Hi
{{user.name}}</div>
</body>
</html>

MVC
Model (Data)
View (UI)
Notifies
NotifiesController
(Logic)
NotifiesNotifies

• Hello HTML:
<p>Hello World!</p>

• Hello Javascript:
<p id="greeting1"></p>
<script>
var isIE = document.attachEvent;
var addListener = isIE
? function(e, t, fn) {
e.attachEvent('on' + t, fn);}
: function(e, t, fn) {
e.addEventListener(t, fn, false);};
addListener(document, 'load', function(){
var greeting = document.getElementById('greeting1');
if (isIE) {
greeting.innerText = 'Hello World!';
} else {
greeting.textContent = 'Hello World!';
}
});
</script>

• Hello Jquery:
<p id="greeting2"></p>
<script>
$(function(){
$('#greeting2').text('Hello World!');
});
</script>

• Hello AngularJS:
<p ng:init="greeting = 'Hello
World!'">{{greeting}}</p>

•AngularJS Applications:
• AngularJS modules define AngularJS applications.
• AngularJS controllers control AngularJS
applications.
• The ng-app directive defines the application,
the ng-controller directive defines the controller.

•Angular JS Expressions:
• Angular JS expressions can be written inside double
braces: {{ expression }}.
• Angular JS expressions can also be written inside a
directive: ng-bind="expression".
• Angular JS will resolve the expression, and return the
result exactly where the expression is written.

AngularJS Modules:
•An AngularJS module defines an application.
•The module is a container for the different parts of an
application.
•The module is a container for the application
controllers.
•Controllers always belong to a module.

AngularJS Directives:
• AngularJS lets you extend HTML with new
attributes called Directives.
• AngularJS has a set of built-in directives which
offers functionality to your applications.
• AngularJS also lets you define your own directives.

Angular JS Directives:
Angular JS directives are extended HTML attributes
with the prefix ng-.
The ng-app directive initializes an AngularJS
application.
The ng-init directive initializes application data.
The ng-model directive binds the value of HTML
controls (input, select, textarea) to application data.

AngularJS Controllers:
• Angular JS controllers control the data of Angular
JS applications.
• Angular JS controllers are regular JavaScript
Objects.
• Angular JS applications are controlled by
controllers.
• The ng-controller directive defines the
application controller.
• A controller is a JavaScript Object, created by
a standard JavaScript object constructor.

AngularJS Filters:
AngularJS provides filters to transform data:
•currency Format a number to a currency format.
•date Format a date to a specified format.
•filter Select a subset of items from an array.
•json Format an object to a JSON string.
•limitTo Limits an array/string, into a specified number of
elements/characters.
•lowercase Format a string to lower case.
•number Format a number to a string.
•orderBy Orders an array by an expression.

Angular JS Services:
•In Angular JS you can make your own service, or
use one of the many built-in services.
•What is a Service?
•In Angular JS, a service is a function, or object,
that is available for, and limited to, your Angular
JS application.
•Angular JS has about 30 built-in services. One of
them is the $location service.

Angular JS Global API:
• The Angular JS Global API is a set of global
JavaScript functions for performing common tasks
like:
• Comparing objects
• Iterating objects
• Converting data
• The Global API functions are accessed using the
angular object.

ANGULAR JS TRAINING IN PUNE

Related slideshows

More Related Content

ANGULAR JS TRAINING IN PUNE