AngularJs Routes, Route Module & ng-View Example

The combination example over all the topics likes,

//Adding & Declaring a Dependency on Route Module
//The ng-View Directive
//Configuring the $routeProvider
//Links to Routes
//Route Parameters

<!DOCTYPE html>
<html lang="en">

<head>
    <title>AngularJs Routes</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script>
    <script>
        var app = angular.module("routesApp", ['ngRoute']);

        app.controller("routesController", function ($scope, $routeParams) {
            $scope.params = $routeParams.param;
        });

        app.config(['$routeProvider',
          function ($routeProvider) {
              $routeProvider.when('/routeURL1/:params', {
                  templateUrl: 'templateURL1',
                  controller: 'routesController'
              }).
              when('/routeURL2/:params>', {
                  templateUrl: 'templateURL2',
                  controller: 'routesController'
              }).
              when('/routeURL3/:params', {
                  templateUrl: 'templateURL3',
                  controller: 'routesController'
              }).
              otherwise({
                  redirectTo: '/login'
              });
          }
        ]);
  </script>
</head>

<body ng-app="routesApp">
    <div ng-view></div>
    <div>
        <ul>
            <li>
                <a href="#/ruteoURL1/1001">Route Text1 with Params</a>
            </li>
            <li>
                <a href="#/routeURL2/1002">Route Text2 with Params</a>
            </li>
            <li>
                <a href="#/routeURL3/1003">Route Text3 with Params</a>
            </li>
        </ul>
    </div>
</body>
</html>

//The output as given below

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