over 8 years ago
Hello readers, Today in my blog I will discuss about Angular JS which is basically a web application framework.
Now, for creating an Angular JS we need to add a script into the HTML.
The Angular JS framework has three major major components, let us discuss about them.
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>
<!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>
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>
!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>
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>
<!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>
Hence, I hope each one would have got a brief overview of Angular JS.
Can you help out the community by solving one of the following Javascript problems?
Do activity (Answer, Blog) > Earn Rep Points > Improve Rank > Get more opportunities to work and get paid!
For more topics, questions and answers, please visit the Tech Q&A page.
0 Comment(s)