Angular js anupama

Angular JS
MVC Javascript Framework by
Google for Rich Web Application
Development

About AngularJs
• AngularJS is a super heroic javascript MVVM
framework from Google
• Open sourced and has a really huge community
behind it https://github.com/angular/angular.js
• NOT a DOM manipulation library like jQuery but
uses a subset of jQuery (jqLite)
• V1.2.x is the current stable version. V1.3.x is the
beta release and V2.0.x is where Angular team is
making big changes
• Declarative HTML

KEY FEATURES
• Declarative HTML
• 2 way databinding
• Expressions
• MVC / MVVM Pattern
• Dependency Injection
• Routing
• Templating
• Modules
• Services / Factories / Providers

Why AngularJS
“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”.
Structure, Quality and Organization
Lightweight ( < 36KB compressed and minified)
Free
Separation of concern
Modularity
Extensibility & Maintainability
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

PRIMITIVE DIRECTIVES
ng-app
• Bootstraps angular application
• Only one ng-app per HTML document
• Syntax: <body ng-app=“myapp”>

ng-controller
• Determines which javascript controller is
bound to specific portions of a page
• A single HTML document can have many ng-
controller
• Syntax: <div ng-controller=“mycontroller”>

ng-model
• Determines what model the value
of an input field will be bound to
• Two way databinding
• Syntax: <input type=“text” ng-
model=“propertyvalue”>

MORE DIRECTIVES
• ng-if
• ng-repeat
• ng-show
• ng-click
• Expressions {{ 1 + 2 }}
• And more… we will learn more as
we go

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
<html ng-app>
<head>
<script src='angular.js'></script>
<script src='controllers.js'></script>
</head>
<body ng-controller='UserController'>
<div>Hi {{user.name}}</div>
</body>
</html>
function XXXX($scope) {
$scope.user = { name:'Larry' };
}

AngularJs training
If you want to undergo advanced training in
AngularJs,then join Victorious Digital.You will get
trained in Angularjs from well qualified trainers by
joining this institute.For further details you may visit
the website at
https://victoriousdigital.in/product/angularjs-training/

Angular js anupama

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Angular js anupama

Ähnlich wie Angular js anupama (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Angular js anupama