Ng-View is not displaying data in AngularJS Routing

drew.nancy23 · July 2021

I am learning Angular JS. I am trying to learn single page application but ng-view is not showing any data. There is no error in the console.

Main Home Page: 

<!DOCTYPE html>
<html ng-app="RouteApp">
<head>
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script&gt;
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js"></script&gt;
    <script src="JavaScript.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css&quot; integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title></title>
</head>
<body>

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">

                <a class="navbar-brand" href="#!">AnjularJS</a>

            <div class="nav navbar-nav navbar-right">
                <a class="nav-link" href="#/First">First Page</a>
                <a class="nav-link" href="#/Second">Second Page</a>
            </div>
        </div>
    </nav>


    <div class="container">
        <div ng-view>

        </div>
    </div>
</body>
</html>

First.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <h1>This is first!</h1>
</body>
</html>

Second.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <h1>This is second!</h1>
</body>
</html>

Controller:

var RouteApp = angular.module('RouteApp', ['ngRoute']);

RouteApp.config(function ($routeProvider) {
    $routeProvider.when('First', {
        templateUrl: 'First.html',
        controller : 'CtrFive'
    })
        .when('Second', {
            templateUrl: 'Second.html',
            controller: 'CtrSix'
        })
});

RouteApp.controller('CtrFive', ['$scope', function ($scope) {

}]);

RouteApp.controller('CtrSix', ['$scope', function ($scope) {

}]);

Jirapongse · July 2021

@drew.nancy23

This forum is dedicated to software developers utilizing Refinitiv APIs. Your question is about general programming in Python. It is off-topic on this forum. In the future, I suggest you post your question on appropriate thematic forums. E.g. this specific question would be better destined for Stackoverflow.

Ng-View is not displaying data in AngularJS Routing

Answers

Welcome!

Welcome!

Quick Links

Categories