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.
-
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.
-
Introduction
AngularJS Example
<html>
<head>
<title>Angular JS Example</title>
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
</body>
</html>
AngularJS Example
-
AngularJS starts automatically when the web page has loaded.
- The ng-app directive tells AngularJS that the <div> element is the "owner" of an AngularJS application.
- The ng-model directive binds the value of the input field to the application variable name.
- The ng-bind directive binds the content of the <p> element to the application variable name.
AngularJS Expressions
- AngularJS binds data to HTML using Expressions
-
AngularJS expressions can be written inside double braces: {{ expression }}.
-
AngularJS expressions can also be written inside a directive: ng-bind="expression".
-
AngularJS will resolve the expression, and return the result exactly where the expression is written.
-
AngularJS expressions are much like JavaScript expressions: They can contain literals, operators, and variables.
Example {{ 5 + 5 }} or {{ firstName + " " + lastName }}
Example
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Example
If you remove the ng-app directive, HTML will display the expression as it is, without solving it:
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div>
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Angular JS Expressions
You can write expressions wherever you like, AngularJS will simply resolve the expression and return the result.
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="" ng-init="myCol='lightblue'">
<input style="background-color:{{myCol}}" ng-model="myCol">
</div>
</body>
</html>
Angular JS Objects
AngularJS objects are like JavaScript objects:
<html>
<script src="angular.min.js"></script>
<body>
<div ng-app="" ng-init="person={firstName:Ravi',lastName:'Chythanya'}">
<p>The name is: {{person.firstName +' ' +person.lastName }}</p>
</div>
</body>
</html>
Angular JS Arrays
AngularJS arrays are like JavaScript arrays:
<html>
<script src="angular.min.js"></script>
<body>
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The name is: {{ points[2] }}</p>
</div>
</body>
</html>
Angular JS 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.
Creating a Module
A module is created by using the AngularJS function angular.module as follows:
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
- The "myApp" parameter refers to an HTML element in which the application will run.
- Now you can add controllers, directives, filters, and more, to your AngularJS application.
Adding a Directive
You can use the module to add your own directives to your applications:
<script>
var app = angular.module('myApp', []);
app.directive("myDirective", function() {
return {
template : "I was made in a directive constructor!"
};
});
</script>
</body>
</html>
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.
AngularJS 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.
Repeating HTML Elements
The ng-repeat directive repeats an HTML element:
<html>
<script src="angular.min.js"></script>
<body>
<div ng-app="" ng-init="subjects=['WT','TOC','OS']">
<ul>
<li ng-repeat="x in subjects">{{ x }}</li>
</ul>
</div>
</body>
</html>
Create New Directives
- In addition to all the built-in AngularJS directives, you can create your own directives.
- New directives are created by using the .directive function.
-
To invoke the new directive, make an HTML element with the same tag name as the new directive.
-
When naming a directive, you must use a camel case name, myDirective, but when invoking it, you must use - separated name, my-directive:
Example
AngularJS arrays are like JavaScript arrays:
<body ng-app="myApp">
<my-directive></my-directive>
<!--div my-directive></div-->
<script>
var app = angular.module("myApp", []);
app.directive("myDirective", function() {
return {
template : "<h1>Made by a directive!</h1>"
};
});
</script>
</body>
AngularJS Controllers
-
AngularJS controllers control the data of AngularJS applications.
-
AngularJS controllers are regular JavaScript Objects.
-
The ng-controller directive defines the application controller.
-
A controller is a JavaScript Object, created by a standard JavaScript object constructor.
Example
<html>
<script src="angular.min.js"></script>
<body>
<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>
Example
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "Ravi";
$scope.lastName = "Chythanya";
});
</script>
</body>
</html>
Controller Methods
A controller can also have methods (variables as functions):
<html>
<script src="angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="personCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}
</div>
Controller Methods
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.firstName = "Ravi";
$scope.lastName = "Chythanya";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
};
});
</script>
Angular JS Events
AngularJS has its own HTML events directives.
- ng-blur
- ng-change
- ng-click
- ng-copy
- ng-cut
- ng-dblclick
- ng-focus
- ng-keydown
- ng-keypress
- ng-keyup
- ng-mousedown
- ng-mouseenter
- ng-mouseleave
- ng-mousemove
- ng-mousedown
- ng-mouseenter
- ng-mouseleave
- ng-mousemove
- ng-mouseup
- ng-paste
- ng-show
Mouse Events
Increase the count variable when the mouse moves over the H1 element:
<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-mousemove="count = count + 1">Mouse over me!</h1>
<h2>{{ count }}</h2>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
});
</script>
ng-paste Event
<html>
<script src="angular.min.js"></script>
<body ng-app="">
<input ng-paste="count = count + 1" ng-init="count=0" value="Paste text here!" />
<p>Text has been pasted {{count}} times.</p>
<p>This example will increase the value of the variable "count" every time you paste text into the input field.</p>
</body>
</html>
ng-click Event
<button ng-click="myFunc()">Click Me!</button>
<div ng-show="showMe">
<h1>Menu:</h1>
<div>Pizza</div>
<div>Pasta</div>
<div>Pesce</div>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.showMe = false;
$scope.myFunc = function() { $scope.showMe = !$scope.showMe; }
});