Introduction to Angular Js

Angular JS tutorial
by professionalguru

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

• 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)
NotifiesChanges

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>

Angular JS Applications:
• Angular JS modules define Angular JS
applications.
• Angular JS controllers control Angular JS
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 Angular JS 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.

Angular JS Directives:
• Angular JS lets you extend HTML with new
attributes called Directives.
• Angular JS has a set of built-in directives which
offers functionality to your applications.
• Angular JS 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 Angular JS
application.
• The ng-init directive initializes application data.
• The ng-model directive binds the value of HTML
controls (input, select, textarea) to application data.

Angular JS 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.

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.

Introduction to Angular Js

More Related Content

What's hot (20)

Similar to Introduction to Angular Js (20)

More from Professional Guru (20)

Recently uploaded (20)

Introduction to Angular Js