AngularJS Tutorial Part – 1

Published on : April 6, 2015

Author: wahid

Category: Jquery

What is Angular JS ?

AngularJs is a framework that binds you html and JavaScript objects. The benefit is when your models change, your page will change automatically. The opposite is also occur. When your text changed your model will also update with associated value.

I am writing AngularJS tutorial to implement AngularJS

How to use Angular JS ?

To use Angular JS, you have to include angular js in your page before closing tag


<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>

Setting Up The Page For Angular JS
There are a few things we need to do to tell Angular Js that it needs to render this page as an application. Declare index.html page as an Angular JS app is very simple.
Add ng-app=”MyTutorialApp” to the content Div as follows:


<!DOCTYPE html>
  <head>
	<title>Learning AngularJS</title>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript">  </script>
  </head>
  <body>
	<div id='content' ng-app='MyTutorialApp'></div>
  </body>
</html>

Now link AngularJs that this div is an angular application. This is very simple-


<!DOCTYPE html>
<head>
	<title>Learning AngularJS</title>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
</head>
<body>
	<div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>

	</div>
</body>
</html>

MainController is just a name. Now anything in the #content div will be controlled by the MainController.
We need to make this controller. We create a file named app.js within the same directory where we create index.html
app.js looks like following:


var app = angular.module(‘MyTutorialApp’,[]);

We need to create another file called maincontroller.js


app.controller(“MainController”,function($scope){
});

And then update html file


<!DOCTYPE html>
<head>
	<title>Learning AngularJS</title>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
	<script src="app.js" type="text/javascript"></script>
	<script src="maincontroller.js" type="text/javascript"></script>
</head>
<body>
	<div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>

	</div>
</body>
</html>

We will describe more details about angular.js in our next tutorial.