How to navigate between pages using ngRoute in angularjsindexhtml ltDOCTYPE htmlgtlthtml xmlns34httpwwww3org1999xhtml34gtltheadgt ltbase href3434 gt lttitlegtlttitlegt ltscript src34httpsajaxgoogleapiscomajaxlibsangularjs178angularminjs34gtltscriptgt ltscript src34httpsajaxgoogleapiscomajaxlibsangularjs178angularrouteminjs34gtltscriptgt ltscript src34https

Hi skpRefer below codeHTMLIndexhtmllthtml xmlns34httpwwww3org1999xhtml34gtltheadgt lttitlegtlttitlegt ltscript type34textjavascript34 src34httpsajaxgoogleapiscomajaxlibsangularjs169angularminjs34gtltscriptgt ltscript type34textjavascript34 src34httpsajaxgoogleapiscomajaxlibsangularjs169angularroutejs34gtltscriptgt ltscript type34textjavascript34gt var app angularmodule34MyApp34 34ngRoute34 appcontroller39HomeController39 function scope scopeHome 39This is home page39 appcontroller39AboutController39 function scope scopeAbout 39This is about page39 appcontroller39ContactController39 function scope scopeContact 39This is contact page39 appconfig39routeP

Navigating between pages using ngRoute in AngularJS

skp

SOLVED CLOSED ACTIVE ANSWERED
User: skp
Posted: on Jul 03, 2019 01:33 AM
Forum: AngularJS
Answer: 1
Views: 1600
Sample Code: Download

How to navigate between pages using ngRoute in angularjs?

index.html :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <base href="/" />  
    <title></title>   
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular-route.min.js"></script>
    <script src="https://cdn.jsdelivr.net/ngstorage/0.3.6/ngStorage.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
    <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&display=swap" rel="stylesheet">
    <script src="EBSAjsN/app.module.js"></script>
    <script src="EBSAjsN/app.config.js"></script>
    <script src="EBSAjsN/Scripts/loginController.js"></script>
    <script src="EBSAjsN/Scripts/dashboardController.js"></script>
    <script src="EBSAjsN/Scripts/receiptController.js"></script>  
    <script src="EBSAjsN/Scripts/issueController.js"></script>  
</head>
<body ng-app="myApp">
    <div ng-view></div>    
</body>
</html>

app.config.js :

'use strict';
angular.module('myApp')
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
    $routeProvider.
    when('/EBSAjsN', {
        templateUrl: 'EBSAjsN/Views/login.html',
        controller: 'loginController'
    })
     .when('/dashboard', {
         templateUrl: 'EBSAjsN/Views/dashboard.html',
         controller: 'dashboardController'
     })
     .when('/receipt', {
         templateUrl: 'EBSAjsN/Views/receipt.html',
         controller: 'receiptController'
     })
     .when('/issue', {
         templateUrl: 'EBSAjsN/Views/issue.html',
         controller: 'issueController'
     })
    .otherwise({
        redirectTo: '/'
    });
    $locationProvider.html5Mode(true);
}]);

app.module.js :

angular.module('myApp', ['ngRoute', 'ngStorage']);

I have three pages after logging in . I don't know how to navigate between them.

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 3

Reply
ANSWER
User: dharmendr
Replied: on Jul 03, 2019 08:12 AM
Report

Hi skp,

Refer below code.

HTML

Index.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
    <script type="text/javascript">
        var app = angular.module("MyApp", ["ngRoute"]);
        app.controller('HomeController', function ($scope) {
            $scope.Home = 'This is home page.';
        });
        app.controller('AboutController', function ($scope) {
            $scope.About = 'This is about page.';
        });
        app.controller('ContactController', function ($scope) {
            $scope.Contact = 'This is contact page.';
        });
        app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
            $routeProvider.when("/", {
                templateUrl: "Views/Home.html",
                controller: 'HomeController'
            }).when("/about", {
                templateUrl: "Views/About.html",
                controller: 'AboutController'
            }).when("/contact", {
                templateUrl: "Views/Contact.html",
                controller: 'ContactController'
            });
        } ]);
    </script>
</head>
<body>
    <div ng-app="MyApp">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#!about">About</a></li>
            <li><a href="#!contact">Contact</a></li>
        </ul>
        <div ng-view>
        </div>
    </div>
</body>
</html>

Home.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <h1>Home</h1>
    <hr />
    <p>{{ Home }}</p>
</body>
</html>

About.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <h1>About</h1>
    <hr />
    <p>{{ About }}</p>
</body>
</html>

Contact.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <h1>Contact</h1>
    <hr />
    <p>{{ Contact }}</p>
</body>
</html>

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Navigating between pages using ngRoute in AngularJS

Company

Explore

Follow us

Contact Us