AngularJs Tutorial-1

Angular Js Tutorial
-----------------------------------------------

Angular Js prog 1 : To get input from text field and display the message
1)Create a html page and copy paste the content under HTML to the file
2)Under app.js add the router content
3)Under Index.html add the controller.js content
4)Create a javascript File mypage.js and add the content of the "Controller.js" to it



1) HTML
-----------------------------------------------
<div>
    <p>{{message}}</p>
    <input type ="text" size="50" ng-model="myVariable"/>
    <input type="button" ng-click="submit()" value="submit"  />
</div>

2) app.js
-----------------------------------------------

'use strict';
angular.module('mytodoApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch'
  ])
 

.config(function ($routeProvider)
{
   
$routeProvider
     
.when('/', {
       
    templateUrl: 'views/main.html',
       
    controller: 'MainCtrl'
     
    })
     
.when('/about', {
       
    templateUrl: 'views/about.html',
       
    controller: 'AboutCtrl'
     
    })
     
.when('/mypage',{
       
    templateUrl:'views/MyPage.html',
       
    controller: 'MyPageCtrl'
     
    })
     
.otherwise({
       
    redirectTo: '/'
     
    });
 
});

Controller.js
------------------------------------------------------------------------------------
'use strict';
angular.module("mytodoApp")
.controller("MyPageCtrl", function ($scope) {

    $scope.message = "Hello World from Angular";
    $scope.submit = function () {
        $scope.message = $scope.message + $scope.myVariable;
    }

});


Index.html - Add
-----------------------------------------------
<script src="scripts/controllers/mypage.js"></script>