AngularJS is a very famous Javascript-based MVC framework meanly used to create single-page applications. AngularJs was created by Google and Lot of developers want to learn this framework. But the lot of confusion regarding Angular and AngularJS. So first of all we need to understand the difference between angular and angular js.
Basically, AngularJS is based on an angular version less than 2 in which Javascript works. But if we talk about angular then it’s an angular version greater than 2 in which typescript works. But here we are focusing on AngularJS and as soon as possible we will create an article on angular.
How to use
- You need angularJs library or CDN.
- You need to add on script tag using local file or CDN
- Now we need to define the module. It’s like a container witch holds our application service, factor, controller, directive, component, filter etc.
- Now we can add a controller.
- You can create a variable inside the controller.
- You can use created variables inside HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Learn AngularJS in 20 minutes</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-app="AngularLearn">
<div ng-controller="AngularLearnController">
<div>Hi: {{ msg }}</div>
</div>
<script>
var app = angular.module("AngularLearn", []);
app.controller("AngularLearnController", function($scope) {
$scope.msg = "Learner";
});
</script>
</body>
</html>
Here AngularLearn parameter inside the body tag and here our AngularJS application run. Inside custom script tag angular.module function creating a module for our AngularJS application. AngularLearnController is your application controller. $scope.msg is your controller variable and inside HTML, it can be used as an expression.
AngularJS Controllers
In AngularJS to control the data, we use a controller. Using the ng-controller AngularJS attribute we can express the controller name and inside the script part, we can handle or control data.
<div ng-controller="AngularLearnController">
<div>Hi: {{ msg }}</div>
</div>
<script>
var app = angular.module("AngularLearn", []);
app.controller("AngularLearnController", function($scope) {
$scope.msg = "Learner";
});
</script>
AngularJS Expressions
In AngularJS to bind data with HTML, we have expressions and you can write expressions in two ways.
<div ng-controller="AngularLearnController">
<div>Hi: {{ msg }}</div>
<div>Hi: <span><span ng-bind="msg"></div>
</div>
AngularJS Scope
A scope is a spatial object in AngularJS and it’s a part of AngularJS view and controller. and all property inside the controller is the key of that object we can also create a js object inside the controller but we can’t access inside view like AngularJS expression
<div ng-controller="AngularLearnController">
<div>Hi: {{ name }}</div>
<div>Hi: <span><span ng-bind="msg"></div>
</div>
<script>
var app = angular.module("AngularLearn", []);
app.controller("AngularLearnController", function($scope) {
$scope.msg = "Learner";
// Js variables
var name = “John”;
$scope.name = name;
});
</script>
Our angularjs application can be contain multiple controller and if we want some common property for all controller then we have $rootScope object that is global scope for your entire application.
<div ng-controller="AngularLearnController1">
<div>{{prefix}} : <span><span ng-bind="msg"></div>
</div>
<div ng-controller="AngularLearnController2">
<div>{{prefix}} : <span><span ng-bind="msg"></div>
</div>
<script>
var app = angular.module("AngularLearn", []);
app.run(function($rootScope) {
$rootScope.prefix = "Hi";
});
app.controller("AngularLearnController1", function($scope) {
$scope.msg = "AngularLearnController1";
});
app.controller("AngularLearnController2", function($scope) {
$scope.msg = "AngularLearnController2";
});
</script>
Here we are using run method witch execute before controller load so here rootScope initiate at the beginning and now you can see we are using {{ prefix }} inside Both controller.
AngularJS Directives
Inside HTML we know we have a lot of attributes like id, class, style and a lot of other attributes but those are related to HTML and js but when we are using Angularjs then we have some special attributes like ng-app, ng-controller, ng-bind, ng-init etc those are AngularJS attributes inside HTML and they have some Spacial functionality like if we use ng-init directive then we can initialise variable inside HTML.
<div ng-controller="AngularLearnController">
<div ng-init="prefix='Hi'">{{ prefix }}: <span><span ng-bind="msg"></div>
</div>
<script>
var app = angular.module("AngularLearn", []);
app.controller("AngularLearnController", function($scope) {});
</script>
Here prefix variable initializes inside HTML. We can also create our own custom directive.
AngularJS Custom Directives
<div ng-controller="AngularLearnController">
<my-msg></my-msg>
</div>
<script>
var app = angular.module("AngularLearn", []);
app.controller("AngularLearnController", function($scope) {
});
app.directive('myMsg',function() {
return {
template: '<div>Angular JS Learner!!</div>'
}
});
</script>
AngularJS Data Binding
It’s an AngularJS concept that is very useful in day to day life because it reduces a lot of extra work. So basically it is dealing with synchronisation between model and view.
<div ng-controller="AngularLearnController">
<div>Hi: {{ msg }}</div>
</div>
<script>
var app = angular.module("AngularLearn", []);
app.controller("AngularLearnController", function($scope) {
$scope.msg = "Learner";
});
</script>
Here msg is bind with HTML content. But it is a one-way bind.
<div ng-controller="AngularLearnController">
<div>Hi: {{ msg }}</div>
<input type="text" ng-model="msg"/>
</div>
<script>
var app = angular.module("AngularLearn", []);
app.controller("AngularLearnController", function($scope) {
$scope.msg = "Learner";
});
</script>
Here using the ng-model directive we can do two-way bindings and in this example, if we can input text value then our msg box also change. Means it will synchronise both side either model side or view side.
AngularJS Loop
<div ng-controller="AngularLearnController">
<ul>
<li ng-repeat="book in jsBooksList">
<strong>[{{ $index + 1 }}] </strong>
{{ book.name }} - [{{ book.author }}]
</li>
</ul>
</div>
<script>
var app = angular.module("AngularLearn", []);
app.controller("AngularLearnController", function($scope) {
// Js collection
$scope.jsBooksList = [
{ "name": "JavaScript: The Good Parts", "author": "Douglas Crockford" , “M.R.P”: “2,004”},
{ "name": "JavaScript: The Definitive Guide", "author": "David Flanagan", “M.R.P”: “3600” },
{ "name": "You Don’t Know JS", "author": "Kyle Simpson", “M.R.P”: “4000” }
];
});
</script>
Using the ng-repeat directive we can render a list or collection inside our HTML
AngularJS Filter
Using AngularJS filter we can format data like in our previous example if we need book name in uppercase then we can use AngularJS filter with the pipe symbol.
<div ng-controller="AngularLearnController">
<ul>
<li ng-repeat="book in jsBooksList">
<strong>[{{ $index + 1 }}] </strong>
{{ book.name | uppercase }} -> {{ book.author }}, [ {{ book["M.R.P"] | currency }} ]
</li>
</ul>
</div>
<script>
var app = angular.module("AngularLearn", []);
app.controller("AngularLearnController", function($scope) {
$scope.jsBooksList = [
{ "name": "JavaScript: The Good Parts", "author": "Douglas Crockford" , "M.R.P": "2,004"},
{ "name": "JavaScript: The Definitive Guide", "author": "David Flanagan", "M.R.P": "3600" },
{ "name": "You Don’t Know JS", "author": "Kyle Simpson", "M.R.P": "4000" }
];
});
</script>
AngularJS HTML DOM
In AngularJS we have a lot of Dom directives. Like
<div ng-controller="AngularLearnController" ng-init="name='Javascript Learner'">
<div>
<div>
Disabled [ {{ !!name }} ]: <button ng-disabled='name'>{{ name }}</button>
</div>
<div>
Disabled [ {{ !!!name }} ]: <button ng-disabled='!name'>{{ name }}</button>
</div>
<div>
<hr>
<div>
<div>
Hide [ {{ !!name }} ]: <span ng-hide="name">{{ name }}</span>
</div>
<div>
Hide [ {{ !!!name }} ]: <span ng-hide="!name">{{ name }}</span>
<div>
</div>
<hr>
<div>
<div>
Show [ {{ !!name }} ]: <span ng-show="name">{{ name }}</span>
</div>
<div>
Show [ {{ !!!name }} ]: <span ng-show="!name">{{ name }}</span>
<div>
</div>
<hr>
<div>
<div>
If [ {{ !!name }} ]: <span ng-if="name">{{ name }}</span>
</div>
<div>
If [ {{ !!!name }} ]: <span ng-if="!name">{{ name }}</span>
<div>
</div>
</div>
<script>
var app = angular.module("AngularLearn", []);
app.controller("AngularLearnController", function($scope) {});
</script>
ng-disabled – directive disabled the HTML input element if the value of that element is true
ng-hide – directive hides the HTML element if the value of that element is true
ng-show – directive shows the HTML element if the value of that element is true but it just hides the element if a value is false.
ng-if – directive shows the HTML element if the value of that element is true but it will not create an element if the value is false.
AngularJS Events
Like js in AngularJS, we have all events. Here we are using the ng-click event and handle that event inside the AngularLearnController controller. Same we can use another event handler.
<div ng-controller="AngularLearnController">
<input type="text" ng-model="name">
<button ng-click="alertButton()">Alert</button>
</div>
<script>
var app = angular.module("AngularLearn", []);
app.controller("AngularLearnController", function($scope) {
$scope.name = "John";
$scope.alertButton = function () {
alert("Hi," + $scope.name);
}
});
</script>
AngularJS Services
Angularjs have some built-in service as well as we can create custom service. Services are those utilities for our application witch make reusable our code and available for the entire application.
<div ng-controller="AngularLearnController">
<input type="text" ng-model="name">
<button ng-click="alertButton()">Alert</button>
</div>
<script>
var app = angular.module("AngularLearn", []);
app.controller("AngularLearnController", function($scope, $log) {
$scope.name = "John";
$scope.alertButton = function () {
$log.log("Hi," + $scope.name);
}
});
</script>
Here we are using AngularJS log service same this way we can use $timeout, $interval, $http service.
If we want to create some custom service then we can create like that.
<div ng-controller="AngularLearnController">
<input type="text" ng-model="num1" style="width: 50px;">
<input type="text" ng-model="num2" style="width: 50px;">
<button ng-click="add()">+</button>
</div>
<script>
var app = angular.module("AngularLearn", []);
app.service("Maths", function() {
this.add = function (a, b) {
return (+a) + (+b);
}
});
app.controller("AngularLearnController", function($scope, $log, Maths) {
$scope.num1 = 0;
$scope.num2 = 0;
$scope.add = function () {
var sum = Maths.add($scope.num1, $scope.num2)
$log.log("Sum is - " + sum);
}
});
</script>
We always remember to add a service inside the controller.
