Angular route is not showing the view

Question

I want to use routeProvider in ngRoute in angularjs to view my home.html or delete.html or add.html

app.js

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

MyApp.config([
    '$routeProvider',
    function($routeProvider) {
        $routeProvider
            .when('/Add', {
                templateUrl: 'html/add.html',
                controller: 'AddController'
            })
            .when('/Edit', {
                templateUrl: 'html/edit.html',
                controller: 'EditController'
            })
            .when('/Delete', {
                templateUrl: 'html/delete.html',
                controller: 'DeleteController'
            })
            .when('/Home', {
                templateUrl: 'html/home.html',
                controller: 'HomeController'
            })
            .otherwise({
                redirectTo: '/Home'
            });
    }
]);

MyApp.controller('AddController', function($scope) {
    $scope.message = "In add view"
});

MyApp.controller('DeleteController', function ($scope) {
    $scope.message = "In delete view"
});

MyApp.controller('EditController', function ($scope) {
    $scope.message = "In edit view"
});

MyApp.controller('HomeController', function ($scope) {
    $scope.message = "In home view"
});

index.html

<!DOCTYPE html>
<html ng-app="MyApp" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <!-- bootstrap css -->
    <link href="Content/bootstrap.min.css" rel="stylesheet"/>
    <!-- Jquery js -->
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/angular-route.min.js"></script>
    <script src="Scripts/internal/app.js"></script>

</head>
<body>

<div class="container">
    <nav role="navigation" class="navbar navbar-inverse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="html#!Home">Home</a></li>
            <li class=""><a href="html#!Add">Add</a></li>
            <li class=""><a href="html#!Edit">Edit</a></li>
            <li class=""><a href="html#!Delete">Delete</a></li>
        </ul>
    </nav>

    <div ng-view>

    </div>

    <!-- Footer -->
    <h3 style="margin-top: 40px;" class="text-center text-info">Single Page App</h3>
</div>

</body>
</html>

When I run my application, and click on any of the links, it gives me this url: http://localhost:51285/html/#!Edit

And in the body is this...

HTTP Error 403.14 - Forbidden
The Web server is configured to not list the contents of this directory.

In the sample that I am following, it doesn't have that error it just changes to the message.

score 1 · Accepted Answer · answered Dec 10 '17 at 11:35

you have some mistake in your code :

in your html:using Add

2.in your app.js:instead of MyApp.config or MyApp.controller use app.config and app.controller.MyApp is name of your app but you must use variable that your app stored on it.

follwing will working: your html:

   <!DOCTYPE html>
    <html ng-app="MyApp" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>

        <!-- bootstrap css -->
        <link href="Content/bootstrap.min.css" rel="stylesheet" />
        <!-- Jquery js -->
        <script src="Scripts/jquery-1.9.1.min.js"></script>
        <script src="Scripts/bootstrap.min.js"></script>
        <script src="Scripts/angular.min.js"></script>
        <script src="Scripts/angular-route.min.js"></script>
        <script src="internal/app.js"></script>

    </head>
    <body>

        <div class="container">
            <nav role="navigation" class="navbar navbar-inverse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#!Home">Home</a></li>
                    <li class=""><a href="#!Add">Add</a></li>
                    <li class=""><a href="#!Edit">Edit</a></li>
                    <li class=""><a href="#!Delete">Delete</a></li>
                </ul>
            </nav>

            <div ng-view></div>

            <!-- Footer -->
            <h3 style="margin-top: 40px;" class="text-center text-info">Single Page App</h3>
        </div>

      </body>
      </html>

your app:

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

    app.config([
        '$routeProvider',
        function ($routeProvider) {
            $routeProvider
                .when('/Add', {
                    templateUrl: 'html/add.html',
                    controller: 'AddController'
                })
                .when('/Edit', {
                    templateUrl: 'html/edit.html',
                    controller: 'EditController'
                })
                .when('/Delete', {
                    templateUrl: 'html/delete.html',
                    controller: 'DeleteController'
                })
                .when('/Home', {
                    templateUrl: 'html/home.html',
                    controller: 'HomeController'
                })
                .otherwise({
                    redirectTo: '/Home'
                });
        }
    ]);

    app.controller('AddController', function ($scope) {
        $scope.message = "In add view";
    });

    app.controller('DeleteController', function ($scope) {
        $scope.message = "In delete view";
    });

    app.controller('EditController', function ($scope) {
        $scope.message = "In edit view";
    });

app.controller('HomeController', function ($scope) {
    $scope.message = "In home view";
});

score 0 · Answer 2 · answered Dec 10 '17 at 11:38

0

I hope it could be ralted with configuration. Please check the link below! Angular force an undesired exclamation mark in url

answered Dec 10 '17 at 11:38

ilyabyar

5
4

Angular route is not showing the view

2 Answers2