Hello readers, Today in my blog I will discuss about Angular JS which is basically a web application framework.
Introduction:-
- It is a structural framework for creating dynamic web applications.
- The Angular JS is an extended form of HTML that is used to create various web applications.
- It is a JavaScript (Modal View Controller) framework that is created by Google.
- It is also used to build Single Page Application.
- It is used to test MVC (model-view-controller) and (model-view-view model) MVVM based web applications.
Now, for creating an Angular JS we need to add a script into the HTML.
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
Advantages :-
- It is easy to learn.
- It is more responsive to the user actions.
- This framework provides a reusable components.
- It is an open source and free framework.
- It reduces the JavaScript code.
Disadvantages :-
- It is big and complicated.
- The lifecycle of Angular Application is complex.
- It is not secure.
Components :-
The Angular JS framework has three major major components, let us discuss about them.
- ng-app :- This directive provides a functionality to an Angular JS application and link it to the HTML.
It acts as a root element of an Angular JS application.
Below is an example of ng-app :-
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="" ng-init="firstName='John'">
<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
</body>
</html>
- ng-model :- The function of this directive is to bind the value of the HTML controls such as input, select and textarea along with the application data.
It helps to provide CSS classes for the HTML elements and help them to bind with the HTML form.
Below is an example of ng-model :-
!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp">
<w3-test-directive></w3-test-directive>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
return {
template : "<h1>Made by a directive!</h1>"
};
});
</script>
</body>
</html>
- Ng-bind :- The function of this directive is to bind the data of the Angular JS Application to the HTML Tags within a web page.
We can also use double braces {{ }} to display the content.
` Below is the ng-bind example :-
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-bind="firstname"></p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname = "John";
$scope.lastname = "Doe";
});
</script>
<p>Use the ng-bind directive to bind the innerHTML of an element to a property in the data model.</p>
</body>
</html>
Conclusion :-
Hence, I hope each one would have got a brief overview of Angular JS.
0 Comment(s)