configuring routes in angularjs

configuring routes in angularjs

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

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Google Amazon and Flipkart Book Store!

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions
SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book