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……..