AngularJS Notes
AngularJS Notes
1. Not Secure
2. Not Degradable
AngularJS MVC Architecture
1. More community
2. Readable code
3. Google as creation
4. Customizable
5. Flexible
6. Fast for small
7. Charge dependency
8. Pre-made solutions
9. Easy testing
AngularJS Modules
Example:
<div ng-app="myApp">...</div>
<script>
</script>
Adding a Controller
Add a controller to your application, and refer to the controller with the ng-controller
directive:
app.controller("Controller-name", function($scope)
{
$scope.variable-name= "";
});
Adding a Controller
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
AngularJS Directives
AngularJS provides support to create custom directives for the following type of
elements.
1. Element directives: activates when a matching element is encountered.
2. Attribute: activates when a matching attribute is encountered.
3. CSS: activates when a matching css style is encountered.
4. Comment: activates when a matching comment is encountered.
AngularJS Expressions
● AngularJS expression is like JavaScript expression surrounded with braces-
{{expression}}.
● Expressions are used to bind application data to HTML.
● AngularJS evaluates the specified expression and binds the result data to HTML.
● It can contain literals, operators and variable like JavaScript expression.
● For example: an expression {{2/2}} will produce the result 1 and will be bound to
HTML.
● {{ 5 + 5 }} or {{ firstName + " " + lastName }}
AngularJS Data Binding
</body>
</html>
<!DOCTYPE html>
<html>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<body>
<div ng-app="myApp" ng-controller="nCtrl">
<h1>number Filter - Numbers</h1>
<h2>Rs.{{money | number : 2}}</h2>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('nCtrl', function($scope) {
$scope.money = 999999;
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<body>
<div ng-app="myApp" ng-controller="datCtrl">
<p>Date = {{ today | date }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('datCtrl', function($scope) {
$scope.today = new Date();
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<p>Click the table headers to change the sorting order:</p>
<div ng-app="myApp" ng-controller="namesCtrl">
<table border="1" width="100%">
<tr>
<th ng-click="orderByMe('name')">Name</th>
<th ng-click="orderByMe('country')">Country</th>
</tr>
<tr ng-repeat="x in names | orderBy:myOrderBy">
<td>{{x.name}}</td>
<td>{{x.country}}</td>
</tr> </table> </div> <script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Carl',country:'Sweden'},
{name:'Margareth',country:'England'},
{name:'Mary',country:'England'},
{name:'Kai',country:'Norway'}
];
$scope.orderByMe = function(x) {
$scope.myOrderBy = x;
}
});
</script> </body> </html>
<!DOCTYPE html>
<html>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<body>
<div ng-app="myApp" ng-controller="sizeCtrl">
<ul>
<li ng-repeat="x in cars | limitTo : 5 : 0">{{x}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('sizeCtrl', function($scope) {
$scope.cars = ["Audi",
"BMW",
"Dodge",
"Fiat",
"Ford",
"Volvo",
"Lamborghini"];
});
</script>
<p>Filter applied from first
element to the fifth element.</p>
</body>
</html>
Currency Filter
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="costCtrl">
<h1>Price: {{ price | currency }}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('costCtrl', function($scope) {
$scope.price = 58;
});
</script>
<p>The currency filter formats a number to a currency format.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names | filter : 'i'">
{{ x }}
</li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
'Jani',
'Carl',
'Margareth',
'Hege',
'Joe',
'Gustav',
'Birgit',
'Mary',
'Kai'
];
});
</script>
<p>This example displays only the names containing the letter "i".</p>
</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<p>Type a letter in the input field:</p>
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter:test">
{{ x }}
</li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
'Jani',
'Carl',
'Margareth',
'Hege',
'Joe',
'Gustav',
'Birgit',
'Mary',
'Kai'
];
});
</script>
<p>The list will only consists of names matching the filter.</p>
</body>
</html>
AngularJS Controllers
● AngularJS controllers are used to control the flow of data of AngularJS application.
● A controller is defined using ng-controller directive.
● A controller is a JavaScript object containing attributes/properties and functions.
● Each controller accepts $scope as a parameter which refers to the application/module
that controller is to control.
● Syntax:
<element ng-controller="expression">
Contents...
</element>
<!DOCTYPE html>
<html>
<head>
<title>ng-controller Directive</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
};
});
</script>
</head>
<body style="padding: 30px">
<center>
<div ng-app="myApp" ng-controller="personCtrl">
<h2>ng-controller Directive</h2>
First Name:
<input type="text" ng-model="firstName">
<br><br>
Last Name:
<input type="text" ng-model="lastName">
<br><br>
Full Name: {{fullName()}}
</div>
</center>
</body>
</html>
AngularJS Scope
● The $scope in an AngularJS is a built-in object, which contains application data and
methods.
● Can create properties to a $scope object inside a controller function and assign a
value or function to it.
● It transfer data from the controller to view and vice versa.
● There are two types of Scope in AngularJS.
○ $Scope
○ $rootScope
AngularJS Scope
● AngularJS creates and injects a different $scope object to each controller in an
application.
● the data and methods attached to $scope inside one controller cannot be accessed in
another controller.
● With the nested controller, child controller will inherit the parent controller's scope
object.
● Therefore, child controller can access properties added in parent controller but parent
controller cannot access properties added in child controller.
$rootscope
● An AngularJS application has a single $rootScope. All the other $scope objects are child
objects.
● The properties and methods attached to $rootScope will be available to all the controllers.
● Properties added in $rootscope are available in all the controllers.
● The $scope object contains various methods.
○ $new(): create new child scope
○ $destroy(): removes current scope from parent scope.
○ $eval(): executes the expression on the current scope and return result.
○ $apply(): executes an expression in angular outside the angular framework.
○ $on(): register a callback for an event.
○ $watch(): register a callback to be executed whenever model property changes.
○ $digest(): processes all the watchers of the current scope and its children.
AngularJS Scope
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.carname = "Volvo";
});
</script>
</body>
</html>
AngularJS Dependency Injection
● It is a software design in which components are given their dependencies instead
of hard coding them within the component.
● It relieves a component from locating the dependency and makes dependencies
configurable.
● It also helps in making components reusable, maintainable and testable.
● AngularJS provides a supreme Dependency Injection mechanism.
AngularJS Dependency Injection
9. angular.noop: angular.noop
10. angular.isElement: angular.isElement(element)
11. angular.isFunction: angular.isFunction(fn)
12. angular.identity: angular.identity(argument)
13. angular.forEach: angular.forEach(object, funcion(value,key) {//function});
14. angular.isNumber: angular.isNumber(value)
15. angular.isObject: angular.isObject(value)
16. angular.fromJson: angular.fromJson(string | object)