Samples of ng-click, ng-disable, $watch in AngularJs

This sample shows the use of  ng-click, ng-disable, flag, $watch, ng-model binding in angularjs.

Scenario  :-  Create a page with two input type one for Name and other for Age. Also one button to increased age. Bind these input type using ng-model with default values as Name=”Test” , Age=20.

when click on increased button age should be increase till 26 and button should disabled. If Age input type value change with other value,it should change the state of increase button accordingly.

Solution:-

Create the Samples.html page with Name, Age input type with Increase age button as shown below.

Samples.html


<html ng-app="testApp">
<head>
<title></title>
</head>
<body>
<div ng-controller="SampleController">

<!-- Bind the text value using ng-model -->
Name:<input type="text" ng-model="Name" />
<br />
Age: <input type="text" ng-model="Age" />
<br />
Note: -
You Can increase Age till 26 .
<br />
<button ng-disabled="flag" ng-click="increaseAge()"> Increase Age </button>
</div>
<script src="Scripts/angular.min.js"></script>
<!-- Code to check the condition -->
<script>

var module = angular.module("testApp", []);
module.controller("SampleController", function ($scope) {
$scope.Name = "Test";
$scope.Age = 20;
$scope.increaseAge = function () {
if ($scope.Age != 26) {
$scope.Age++;
}
else {
$scope.flag = true;
}
};
$scope.$watch("Age", function () {
if ($scope.Age < 26) {
$scope.flag = false;
}
else {
$scope.flag = true;
}
});
});
</script>
</body>
</html>

After running the above code you will get the desired output as per the above mention scenario.

Output :-

Ng-Sample1
 

🙂 Happy Coding……….

Advertisements

Routing in AngularJS

As one of my friend asked me how to used multiple controllers in angular Js with SPA, I thought it will be better to summaries this concepts using the routing.

Below example shows

  1. Routing
  2. Dynamic html page using ng-template
  3. Using separate html page for menu

in single page application.

To start with the demo we need to first download the angular Js and routing library from angular site.

Note:- angular-route.js is require for routing.

Dashboard.html


<html>
<head>
<title></title>
<script src="Scripts/angular.min.js"></script>

<script src="Scripts/angular-route.js"></script>

</head>
<body ng-app="testApp">
<h1> Some Application    </h1>
<a ng-href="#/">Index</a>
<a ng-href="#/home">Home</a>
<a ng-href="#/contact">Contact Us</a>

<!-- Show the selected menu page in angular view -->
<div ng-view></div>

<!-- Create angular template to generate page dynamically -->
<script type="text/ng-template" id="index.html">
<h1> Index Page</h1>
<p> {{message}}</p>

</script>

<script type="text/ng-template" id="home.html">
<h1> Home Page</h1>
<p> {{message}}</p>

</script>
<script type="text/javascript">
        var app = angular.module('testApp', ['ngRoute']);

        app.config(['$routeProvider', function ($routeProvider) {
            $routeProvider.when('/', {
                templateUrl: 'index.html',
                controller:'MainCtrl'
            }).when('/home', {
                templateUrl: 'home.html',
                controller: 'HomeCtrl'
            }).when('/contact', {
                templateUrl: 'contact.html',
                controller: 'ContactCtrl'
            })
        }]);

        app.controller('MainCtrl', ['$scope', function ($scope) {
            $scope.message = 'hello index';
        }]);

        app.controller('HomeCtrl', ['$scope', function ($scope) {
            $scope.message = 'hello home';
        }]);

        app.controller('ContactCtrl', ['$scope', function ($scope) {
           $scope.addresses = [
        { name: 'Jhon R', city: 'New York' },
        { name: 'Eric P', city: 'Belgium' },
        { name: 'Was K', city: 'Canada' }
            ];

        }]);

    </script>
</body>
</html>

Here in the above code I am generating home and index page dynamically using the angular ng-template and for contact us i have created a separate html page. I have set the contact us controller values in dashboard page but you can put these into the contact us page if you want.

Best practice to write the script code in separate Js file.

The code for the contact us page is shown below.

contact.html

  <div>
        <p>This is contact us page</p>

        Search contact:
        <br />
        <input type="text" ng-model="name" />
        <br /><br />
        List of contact us person
        <ul> 

            <li ng-repeat="address in addresses | filter:name">{{address.name}} , {{address.city}}</li>
        </ul>

        <a href="#/home"> Back</a>

    </div>

After run the above code you will get the following output.

🙂 Happy Coding……..