What IS Angular JS
Angular
JS is javascript framework that helps built web application
It was originally developed in 2009 by Misko Hevery and Adam Abrons. It is now maintained by Google.
Benefits of
angular JS
1. Dependency
Injection
2. Two
way Data Binding (insert image releated to two way data binding)
3. Testing
4. Model
View Controller
5. Directives,
Filters etc.
Concepts :
Following diagram depicts some important parts of AngularJS.
A Simple Angular JS Example
Concepts :
Following diagram depicts some important parts of AngularJS.
A Simple Angular JS Example
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Simple AngularJS Application</title>
</head>
<body>
<div ng-app>
10 + 20 = {{ 10 + 20 }}
</div>
</body>
</html>
Explanation
ng prefix stands for angular.
ng-app directive is starting point of angularJS application.
Angular framework will firstly check for the ng-app directive
somewhere in html page if ng-app found then angular bootstrap itself and starts
to manage the
section of page that has ng-app directive.
In above example ng-app directive included within the body section so everything within the body section is managed by angular.
To display the sum of 10 and 20 we use the double curly braces “{{
}}”.
In AngularJS we call it Binding Expressions. Within curly braces
we can specify any angular expression.
In above example we specify {{ 10 + 20 }},
so angular take it as a expression and add those numbers.
Output
Steps
to create AngularJS Application
Step
1 − Load framework
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
Step 2 − Define AngularJS Application using ng-app directive
<div ng-app>
.
.
.
</div>
.
.
</div>
Step 3 − Define a model name using ng-model directive
<p>Enter your
Name: <input type = "text" ng-model = "name"></p>
<p>Hello <span ng-bind = "name"></span></p>
Example
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<title>AngularJS First Application</title>
<script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
</head>
<body>
<h1>Sample Application</h1>
<div ng-app = "">
<p>Enter your Name: <input type = "text" ng-model = "name"></p>
<p>Hello <span ng-bind = "name"></span></p>
</div>
</body>
</html>
Output :
No comments:
Post a Comment