Scribd
Upload
14 views3 pages

Angularjs Tutorial

AngularJS is a JavaScript framework that enhances HTML by adding directives and data binding. It operates on an MVVM architecture and initializes automatically upon page load. The document provides examples of using AngularJS directives like ng-app, ng-model, and ng-bind to create dynamic web applications.

Uploaded by

lihomahowareyou
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
14 views3 pages

Angularjs Tutorial

AngularJS is a JavaScript framework that enhances HTML by adding directives and data binding. It operates on an MVVM architecture and initializes automatically upon page load. The document provides examples of using AngularJS directives like ng-app, ng-model, and ng-bind to create dynamic web applications.

Uploaded by

lihomahowareyou
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

AngularJS Tutorial

Ref:
[Link]
[Link]

What is AngularJS?
 AngularJS is a JavaScript framework
 Add to HTML page with <script> tag
 Extend HTML attributes with directive
 Bind data to HTML with expressions

MVVM (Model-View-Viewmodel)

AngularJS lifecycle
 starts automatically when the web page has loaded

Include javascript
 <scriptsrc="[Link]
angularjs/1.6.9/[Link]"></script>

Example:
<!DOCTYPE html>
<html lang="en-US">
<script src="[Link]
<body>
<div ng-app="">
<p>Name : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
<p ng-bind="name"></p>
</div>
</body>
</html>

AngularJS directive
Ng-Directives Description Explain Example
Ng-app Define Tell AngularJS, <div> <my app>
Application is the owner of an
AngularJS
application
Ng-model Bind the value of Bind the value of <input type=”text” ng-
HTML control to input field to model=”name”>
application data application variable
“name”
Ng-bind Bind application Bind the content of <p
data to HTML <p> element to ng-bind=”name”></p>
view application variable
“name”
Ng-init Initialize <div ng-app="" ng-
application init="firstName='John'">
variable <p ng-
bind=”firstName”></p>

Example2:
<div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName"><br>


Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script>
var app = [Link]('myApp', []);
[Link]('myCtrl', function($scope) {
$[Link]= "John";
$[Link]= "Doe";
});
</script>

Description Example
Ng-app Define Ng-app=”myApp”
Application
Ng- Define Ng-controller=”myCtrl”
controller Controller
AngularJS Define var app = [Link]('myApp',
module Application []);
AngularJS Control [Link]('myCtrl', function($sc
controller Application ope) {
$[Link]= "John";
$[Link]= "Doe";
});

AngularJS Expression

 AngularJS bind data to HTML by using Expression {{}} or ng-bind=”expression”

You might also like