/ / configuring routes in angularjs
configuring routes in angularjs

configuring routes in angularjs

Edit
Hello everyone, I am going to share the code-sample for angularjs routing, the angularjs routing are used to linking URLs to controllers and views.

We can achieve routing using below steps
  1. Declaring a Dependency in ngRoute Route module
  2. Configuring the $routeProvider
  3. The ng-view directive 
  4. $routeParams used to pass the route parameters.
The reference files of Angular Route as given below

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-route.js"></script>

The AngularJs code-sample as given below

var app = angular.module('ConfigurRoutes', ['ngRoute']);
        app.config(function ($routeProvider) {
            $routeProvider
              .when('/Home', {
                  templateUrl: 'Views/Home/index.cshtml',
                  controller: 'HomeCtrl',
                  controllerAs: 'Home'
              })
              .when('/Home/Email/:EmailId', {
                  templateUrl: 'Views/Home/email.cshtml',
                  controller: 'EmailCtrl',
                  controllerAs: 'Email'
              })
              .when('/TermsnCondition/', {
                  templateUrl: 'Views/Terms/TermsnCondition.cshtml',
                  controller: 'TermsnConditionCtrl',
                  controllerAs: 'Terms'
              })
              .otherwise({
                  redirectTo: '/Account'
              });
        });
        app.controller('HomeCtrl', function ($scope) {
            // here model and view bindings logic
            $scope.title = "This is home controller";
        });
        app.controller('TermsnConditionCtrl', function ($scope) {
            // here model and view bindings logic
            $scope.title = "This is Terms and Condition controller";
        });

The HTML code-sample as given below

<div ng-app="ConfigurRoutes" ng-controller="HomeCtrl">
        <div>
            // here model bindings logic
           <div ng-view></div>
        </div>
    </div>
    <div ng-controller="TermsnConditionCtrl">
        <div>
            // here model bindings logic
        </div>
    </div>

The Live demo code-sample as given below

<!doctype html>
<html ng-app="ConfigurRoutes">
<head>
    <title>Example - Configuring Routes</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.1/angular.min.js"> </script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-route.js"></script>

 <script>
        var app = angular.module('ConfigurRoutes', ['ngRoute']);
        app.config(function ($routeProvider) {
            $routeProvider
              .when('/Home', {
                  templateUrl: 'Views/Home/index.cshtml',
                  controller: 'HomeCtrl',
                  controllerAs: 'Home'
              })
              .when('/Home/Email/:EmailId', {
                  templateUrl: 'Views/Home/email.cshtml',
                  controller: 'EmailCtrl',
                  controllerAs: 'Email'
              })
              .when('/TermsnCondition/', {
                  templateUrl: 'Views/Terms/TermsnCondition.cshtml',
                  controller: 'TermsnConditionCtrl',
                  controllerAs: 'Terms'
              })
              .otherwise({
                  redirectTo: '/Account'
              });
        });

        app.controller('HomeCtrl', function ($scope) {
            // here model and view bindings logic
            $scope.title = "This is home controller";
        });

        app.controller('TermsnConditionCtrl', function ($scope) {
            // here model and view bindings logic
            $scope.title = "This is Terms and Condition controller";
        });
    </script>
</head>
<body>
    <div ng-controller="HomeCtrl">
        <div>
            // here model bindings logic
           <div ng-view></div>
        </div>
    </div>
    <div ng-controller="TermsnConditionCtrl">
        <div>
            // here model bindings logic
        </div>
    </div>
</body>
</html>


ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

www.code-sample.com/. Powered by Blogger.
^