First Application

For creating an application using AngularJS we need to know the following three important built in directives(html attributes which are prefixed with ng-*.)


DirectiveDescription
ng-appThis directive represents the root element of the application and is used to bootstrap the framework.
ng-modelThis directive is used to attach a form element(html input controls) to a scope thus binding the view to the model.
ng-bindThis 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>