getting started with angular.js
Before we start developing in Angular you need to download Angular.js from its official page .It's available in both minfied and normal version .
Structure :
First we will look at the structure of the Angular.
<!doctype html>
<html ng-app>
<body>
...
<script src="angular.js">
</body>
</html>
The first line <!doctype html> is for the browser to make him aware about the page is HTML5 based .
The next tag is <html ng-app> the ng-app means your app will auto bootstrap or auto initialize .You can initialize the app manuallly also .
If you wanna get support on IE 7 or below also write it like this <html ng-app id="ng-app">.
One important thing we wrote the script tag at end of the body tag . The purpose of this is to let dom structure get ready . It is best practis
Now lets develope some thing .
<!doctype html>
<html ng-app>
<head>
<title>My angular first program</title>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="myMess" placeholder="Type any message here">
<hr>
<h1>it is your message {{myMess}}!</h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</body>
</html>
Explanation : <input type="text" ng-model="myMess" placeholder="Type any message here">
Here we are declaring an input text type field .
"ng-model" is Angular API which is responsible for two way data binding (binding view to the model).
It alow you the form validation like you normally does in HTML require ,url,number,email.We will review it in brief in future for now you just understand it is something related to the form
<h1>it is your message {{myMess}}!</h1> : this "{{ }}" is how we write expression in angular.{{myMess}} means the value of [ ng-model="myMess" ] will be get displayed here . This is called two way data binding .
