AngularJs Sample Application

Create an Empty Web Application in your JavaScript IDE (there are many IDEs available like AptanaStudio, WebStorm etc.) and add a HTML page (say index .html). After adding the index.html page add below line in the head tag

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"type="text/javascript" charset="utf-8"></script>

Step 2:-
Add a JavaScript file named “app.js” and include the reference of this file into your INDEX html <head> tag.

<head>
   <script src="app.js"></script>
</head>

Step 3:-
In the body tag of your index.html add ng-app attribute, this will tells angular that what part of HTML contains the angular App. We are free to add this to HTML element or body tag or event to DIVs as well. Like below –

<body ng-app="AngularApp"></body>

Step 4:-

Now we have to attach controller to the view so that the data-binding can be controlled. We can do this by adding ng-controller attribute to the div where we want to add.

Like below –

<div ng-controller="HelloController"></div>

Step 5:-

Creating controller - We can create controller in our app.js as below –

Var myApp= angular.module("AngularApp",[]);
myApp.controller("HelloController", function($scope){
            $scope.text= "";
});

Step 6:-

Add the model and data to the view like below –

<input type="text" ng-model = "text">
<p>Hello : {{text}}</p>

Below is the complete code of index. html and app.js –

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Angular Demo</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="app.js"></script>
</head>

<body ng-app="AngularApp">
    <div ng-controller="HelloController">
        <input type="text" ng-model="text">
        <p>Hello : {{text}}</p>
    </div>
</body>
</html>

App.js :-

        var myApp= angular.module("AngularApp",[]);
        myApp.controller("HelloController", function($scope){
            $scope.text= "";
        });

For Example,

About Blogger

Hey! I am Anil Singh. I am Active Blogger, Writer and Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
http://www.code-sample.com
http://www.code-sample.xyz