AngularJs Routes

Introduction about AngularJs Routes:-

The Routes are a ways to create the different URLs for the different content in our web applications. It’s also providing a ways to view the multiple views in the single HTML page.

The routes are specified in the URLs after “#” sign and the specified URL example as given below.

1. http://yourdomain.com/angular/routes/home.html#Routes

2. http://yourdomain.com/angular/routes/home.html#RoutesModule

3. http://yourdomain.com/angular/routes/home.html#ngViewDirective

In above URLs, when links are load in the brewers that means the applications are loaded.

The below image show the working process of angular application

The basic example for AngularJs Routes

<!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) {
              //TODO
        });

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

<body ng-app="routesApp">
    <div ng-view></div>
    <div>
        <ul>
            <li>
                <a href="#/routeURL1">Route Text1</a>
            </li>
            <li>
                <a href="#/routeURL2">Route Text2</a>
            </li>
            <li>
                <a href="#/routeURL3">Route Text3</a>
            </li>
        </ul>
    </div>
</body>
</html>

The output as given

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