For creating an application using AngularJS we need to know the following three important built in directives(html attributes which are prefixed with ng-*.)
| Directive | Description |
|---|
ng-app | This directive represents the root element of the application and is used to bootstrap the framework. |
ng-model | This directive is used to attach a form element(html input controls) to a scope thus binding the view to the model. |
ng-bind | This directive is used to replace the text content with the specified HTML. The ngBindHTML replaces an element's inner HTML with the specified HTML. |
1. Load AngularJS framework
Add the angularjs using the
<script> tag.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js">
</script>
2. Define AngularJS application using ng-app directive.
Define
ng-app in the root html element. We can use it without any parameter, thereby indicating that the application will be bootstrapped in the automatic mode. But it is recommended to include the module name.
snippet
<!doctype html>
<html ng-app>
<head>
<title>Rookie Nerd</title>
<script src="angular.js"></script>
</head>
<body>
</body>
</html>
[or]
<div ng-app="">
...
</div>
3. Define model name using ng-model
You can define a model name using
ng-model directive.
<p>Enter your Name: <input type="text" ng-model="name"></p>
4. Bind data using ng-bind
You can bind the value of above model defined using
ng-bind directive.
<div>Hello <span ng-bind="name"></span>! Welcome to RookieNerd..!</div>
