Over the past years, the demand for JavaScript development has touched unprecedented heights. JavaScript is being used in several front-end frameworks to incorporate modern functionalities and features in websites. AngularJS is among one of these frameworks. Like, traditional JavaScript, you can add AngularJS code to any HTML document by using the following tag.
AngularJS is a client-side JS MVC (model view controller) framework which is mainly used for the production of modern dynamic websites. The project was initially conceptualized by the tech giant Google, however, later it was made available for the global software community. The entire AngularJS syntax is based on JavaScript and HTML; therefore you do not have to learn any other language.
You can convert static HTML to dynamic HTML through the use of AngularJS. It helps to enrich the capabilities of HTML-based website through the addition of built-in components and attributes. To understand some basic concepts in AngularJS, read further.
Expressions
Expressions are used to bind data with HTML in AngularJS. These expressions are defined through double braces. On a similar note, you can also use the ng-bind=”expression” to define your expressions. When AngularJS counters an expression then it instantly works to execute it and sends back the result to the point from where it was called. Similar to the expressions in JavaScript, AngularJS has its own expressions which store operators, variables, and literals. For instance, consider the following example where an expression is displayed.
<!DOCTYPE html>
<html>
https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js
<body>
The calculation result is {{ 4 * 6 }}
</body>
</html>
Modules
Modules in AngularJS are used to specify the type of application. It is essentially a container which holds several application components like controllers. To create a module, you simply have to use the angular. module method.
var e1 = angular.module(“example1”, []);
Here “example1” is used for referencing an HTML element which is used to run the application. After defining your module, you can add other Angular JS elements like directives, filters, and controllers.
Directives
To modify HTML elements, you can use directives in AngularJS. You can either used built-in directives to add any functionality or specify your own directive to add behavior. Directives are distinct due to the fact that they begin with a special prefix, ng-.
- You can use the ng-app directive to initialize an application in the AngularJS.
- You can use the ng-init directive to initialize an application data in the AngularJS.
- You can use the ng-model directive to bind values from HTML controls and connect them with the application data.
For example, consider the following example.
<!DOCTYPE html>
<html>
https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js
<body>
Type anything in the textbox.
User Name:
You typed: {{ userName }}
</body>
</html>
In this example, the ng-app first relays to the AngularJS that the
You can use the “.directive” function to create your own directives. To generate a new directive, use the same tag name for your directive which is used by your HTML element. Consider the following example.
https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js
var a = angular.module(“example1”, []);
a.directive(“newdirective”, function() {
return {
template : “
This text is created through a user-defined directive!
”
};
});
Model
As explained before, the ng-model directive is used to bind HTML controls. Consider the following example,
https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js
Name of the Employee:
var a = angular.module(‘Example1’, []);
a.controller(‘first’, function($scope) {
$scope.empname = “Jesse James”;
});
</body>
</html>
Here, the controller was used to create a property after which the ng-model was used for data binding. Similarly, you can use it to validate user input. For example, consider the following code. Whenever a user types irrelevant information, an error messages appears.
<!DOCTYPE html>
<html>
https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js
<body>
<form ng-app=”” name=”login”>
Email Address:
<input type=”email” name=”emailAddress” ng-model=”text”>
<span ng-show=”login.emailAddress.$error.email”>This is an invalid email address</span>
</form>
</body>
</html>
Data Binding
In Angular JS, the synchronization between the view and model is referred to as data binding. In general terms, you can think of data binding as a procedure through which a user can dynamically change the elements of a web page.
A standard application in AngularJS consists of a data model which stores the complete data of that specific application.
By view, we mean the HTML container in which we have defined our AngularJS application. Afterward, an access is configured to the model for the view. For data binding, you can also use the ng-bind directive. This directive applies binding on an element’s innerHTML and the defined property for the model. For example,
<!DOCTYPE html>
<html>
https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js
<body>
Student Name: {{studentname}}
var ajs = angular.module(‘angjs1’, []);
ajs.controller(‘firstController’, function($scope) {
$scope.studentname = “Matthew”;
});
</body>
</html>
Note, that double braces are used in HTML elements to show the stored data from any model.
Controller
Controllers form the backbone of AngularJS applications and contain the business or central logic of the application. Since, AngularJS synchronizes the view and the model via data binding; therefore the controller needs to only focus on data on the model. An example, of controller is the following.
<!DOCTYPE html>
<html>
https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js
<body>
{{name}}
var a = angular.module(‘app1’, []);
a.controller(‘first’, function($scope) {
$scope.name = “Larry”;
$scope.modifyname = function() {
$scope.name = “David”;
}
});
</body>
</html>
When you click on the heading, then the controller dynamically changes the content of the element.
IT Tech Book 