Angular JS: The Ng-Init Directive Initialize Angularjs Application Variables

ANGULAR JS
AngularJS is a JavaScript framework. It can be added to an HTML page

with a <script> tag.
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.j
s">
</script>
AngularJS extends HTML with ng-directives.

The ng-app directive defines an AngularJS application.
The ng-model directive binds the value of HTML controls (input,
select, textarea) to application data.
The ng-bind directive binds application data to the HTML view.
<!DOCTYPE html>
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.j
s"></script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>
The ng-init directive initialize AngularJS application variables.

<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>

</div>
AngularJs Expressions
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
AngularJs Controller
<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 = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>
AngularJs Objects
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

<p>The name is {{ person.lastName }}</p>
</div>
AngularJs Arrays
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is {{ points[2] }}</p>
</div>
AngularJs ng-repeat Directive

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
AngularJs Controller Methods

<div ng-app="myApp" ng-controller="personCtrl">
<br>
Full Name: {{fullName()}}
</div>
<script>
app.controller('personCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
}
});
</script>
Controller in External Files

a) Index.html
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
<script src="namesController.js"></script>
b)namesController.js
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
});
AngularJs Filters
->{{ (quantity * price) | currency }}
->{{ lastName | uppercase }}
->{{ lastName | lowercase }}
-><ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
AngularJs $http:
{
]
"records" :
[ {},{},{},{},{},{},{},{}
AngularJS $http is a core service for reading data from web servers.
$http.get(url) is the function to use for reading server data.
<div ng-app="myApp" ng-controller="customersCtrl">

<ul>
{{ x.Name + ', ' + x.Country }}
</li>
</ul>
</div>
<script>
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://www.w3schools.com/angular/customers.php")
.success(function(response) {$scope.names = response.records;});
});
</script>
AngularJs ng-click directive

<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="count = count + 1">Click Me!</button>
<p>{{ count }}</p>
</div>
<script>
app.controller('myCtrl', function($scope) {
$scope.count = 0;
});
</script>
AngularJS Toggle---->ng-show
<div ng-app="myApp" ng-controller="personCtrl">
<button ng-click="toggle()">Toggle</button>
<p ng-show="myVar">
<br>
Full Name: {{firstName + " " + lastName}}
</p>
</div>
<script>
app.controller('personCtrl', function($scope) {
$scope.firstName = "John",
$scope.lastName = "Doe"
$scope.myVar = true;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
}
});
</script>
Controls Application Code

<div ng-app="myApp" ng-controller="formCtrl">
<form novalidate>
First Name:<br>
<input type="text" ng-model="user.firstName"><br>
Last Name:<br>
<input type="text" ng-model="user.lastName">
<br><br>
<button ng-click="reset()">RESET</button>
</form>
<p>form = {{user}}</p>
<p>master = {{master}}</p>
</div>
<script>
app.controller('formCtrl', function($scope) {
$scope.master = {firstName: "John", lastName: "Doe"};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
});
</script>
Example Explained
The ng-app directive defines the AngularJS application.
The ng-controller directive defines the application controller.
The ng-model directive binds two input elements to the user object in
the model.
The formCtrl function sets initial values to the master object, and
defines the reset() method.
The reset() method sets the user object equal to the master object.
The ng-click directive invokes the reset() method, only if the button is
clicked.
The novalidate attribute is not needed for this application, but normally
you will use it in AngularJS forms, to override standard HTML5
validation.
AngularJs Validation
<!DOCTYPE html>
<html>
<script src=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
<body>
<h2>Validation Example</h2>
<form ng-app="myApp" ng-controller="validateCtrl"
name="myForm" novalidate>
<p>Username:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty &&
myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is
required.</span>
</span>
</p>
<p>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty &&

myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is
required.</span>
<span ng-show="myForm.email.$error.email">Invalid email
address.</span>
</span>
</p>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
<script>
app.controller('validateCtrl', function($scope) {
$scope.user = 'John Doe';
$scope.email = 'john.doe@gmail.com';
});
</script>
</body>
</html>

Angular JS: The Ng-Init Directive Initialize Angularjs Application Variables

Uploaded by

Copyright:

Available Formats

Angular JS: The Ng-Init Directive Initialize Angularjs Application Variables

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Angular JS: The Ng-Init Directive Initialize Angularjs Application Variables

Uploaded by

Copyright:

Available Formats

ANGULAR JS

AngularJS is a JavaScript framework. It can be added to an HTML page

AngularJS extends HTML with ng-directives.

The ng-init directive initialize AngularJS application variables.

<p>The name is <span ng-bind="firstName"></span></p>

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

AngularJs ng-repeat Directive

AngularJs Controller Methods

Controller in External Files

<div ng-app="myApp" ng-controller="customersCtrl">

AngularJs ng-click directive

Controls Application Code

<span style="color:red" ng-show="myForm.email.$dirty &&

You might also like