路由在AngularJS中不起作用

The routing is not working for the index.html. It is even giving a compiler error. Index.html is my startup page. Through Header details link the Add Header.html page should open. I have added the whole code in plunkr ["https://plnkr.co/edit/w9eWiHKvSDrf0viERgoX?p=preview"]

路由不适用于index.html。它甚至给出了编译器错误。 Index.html是我的启动页面。通过标题详细信息链接，应该打开Add Header.html页面。我在plunkr中添加了整个代码[“https://plnkr.co/edit/w9eWiHKvSDrf0viERgoX?p=​​preview”]

app.js

app.js

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

// configure our routes
MyApp.config(function ($routeProvider) {
    $routeProvider

        // route for the home page

        .when('/', {
            templateUrl: 'AddHeader.html',
            controller: 'headerCtrl'
        })


        .when('/AddHeader', {
            templateUrl: 'AddHeader.html',
            controller: 'headerCtrl'
        })

        // route for the about page
        .when('/ProjectIDCreation', {
            templateUrl: '/ProjectIDCreation.html',
            controller: 'headerCtrl'
        })


});

HeaderCtrl.js

HeaderCtrl.js

var app = angular.module('MyApp');
var baseAddress = 'http://localhost:49754/api/TimeSheet/';
var url = "";

//var app = angular.module('MyApp');
//app.controller('mainController', function ($scope) {
//    console.log('mainController');

//});

app.factory('userFactory', function ($http) {
    return {
        getHeadersList: function () {
            url = baseAddress + "FetchHeaderDetails";
            return $http.get(url);
        },
        addHeader: function (user) {
            url = baseAddress + "InsertHeaderDetails";
            return $http.post(url, user);
        },
        updateHeader: function (user) {
            url = baseAddress + "UpdateHeaderDetails";
            return $http.put(url, user);
        }
    };
});


//var app = angular.module('MyApp');
app.controller('headerCtrl', function PostController($scope, userFactory) {
    $scope.users = [];
    $scope.user = null;
    $scope.editMode = false;

    //Fetch all Headers
    $scope.getAll = function () {
        userFactory.getHeadersList().success(function (data) {
            $scope.users = data;
        }).error(function (data) {
            $scope.error = "An Error has occured while Loading users! " + data.ExceptionMessage;
        });
    };
    //Add Header
    $scope.add = function () {
        var currentUser = this.user;
            userFactory.addHeader(currentUser).success(function (data) {
                $scope.addMode = false;
                currentUser.HeaderID = data;
                $scope.users.push(currentUser);
                $scope.user = null;
                $('#userModel').modal('hide');
            }).error(function (data) {
                $scope.error = "An Error has occured while Adding user! " + data.ExceptionMessage;
            });
    };
    //Edit Header
    $scope.edit = function () {
        $scope.user = this.user;
        $scope.editMode = true;
        $('#userModel').modal('show');
    };

    //Update Header
    $scope.update = function () {
        var currentUser = this.user;
        userFactory.updateHeader(currentUser).success(function (data) {
            currentUser.editMode = false;

            $('#userModel').modal('hide');
        }).error(function (data) {
            $scope.error = "An Error has occured while Updating user! " + data.ExceptionMessage;
        });
    };
    //Model popup events
    $scope.showadd = function () {
        $scope.user = null;
        $scope.editMode = false;
        $('#userModel').modal('show');
    };
    $scope.showedit = function () {
        $('#userModel').modal('show');
    };
    $scope.cancel = function () {
        $scope.user = null;
        $('#userModel').modal('hide');
    }
    // initialize your users data
    $scope.getAll();
});

2 个解决方案

#1

Make sure the file path which you have used in script tags are correct. Which in the plnkr were not correct. Also i found you had two modules defined avoid doing that. Also you are importing angular, jquery, bootstrap more than once dont do that. Below is the corrected code

确保您在脚本标记中使用的文件路径是正确的。在plnkr中哪个不正确。此外，我发现你有两个模块定义避免这样做。你也不止一次导入angular，jquery，bootstrap。以下是更正后的代码

Edited plnkr

编辑过的plnkr

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

// configure our routes
app.config(function ($routeProvider) {
    $routeProvider
        // route for the home page
        .when('/', {
            templateUrl: 'AddHeader.html',
            controller: 'headerCtrl'
        })
        .when('/AddHeader', {
            templateUrl: 'AddHeader.html',
            controller: 'headerCtrl'
        })
        // route for the about page
        .when('/ProjectIDCreation', {
            templateUrl: 'ProjectIDCreation.html',
            controller: 'headerCtrl'
        })
});


var baseAddress = 'http://localhost:49754/api/TimeSheet/';
var url = "";

app.factory('userFactory', function ($http) {
    return {
        getHeadersList: function () {
            url = baseAddress + "FetchHeaderDetails";
            return $http.get(url);
        },
        addHeader: function (user) {
            url = baseAddress + "InsertHeaderDetails";
            return $http.post(url, user);
        },
        updateHeader: function (user) {
            url = baseAddress + "UpdateHeaderDetails";
            return $http.put(url, user);
        }
    };
});


//var app = angular.module('MyApp');
app.controller('headerCtrl', function PostController($scope, userFactory) {
    $scope.users = [];
    $scope.user = null;
    $scope.editMode = false;

    //Fetch all Headers
    $scope.getAll = function () {
        userFactory.getHeadersList().success(function (data) {
            $scope.users = data;
        }).error(function (data) {
            $scope.error = "An Error has occured while Loading users! " + data.ExceptionMessage;
        });
    };
    //Add Header
    $scope.add = function () {
        var currentUser = this.user;
            userFactory.addHeader(currentUser).success(function (data) {
                $scope.addMode = false;
                currentUser.HeaderID = data;
                $scope.users.push(currentUser);
                $scope.user = null;
                $('#userModel').modal('hide');
            }).error(function (data) {
                $scope.error = "An Error has occured while Adding user! " + data.ExceptionMessage;
            });
    };
    //Edit Header
    $scope.edit = function () {
        $scope.user = this.user;
        $scope.editMode = true;
        $('#userModel').modal('show');
    };

    //Update Header
    $scope.update = function () {
        var currentUser = this.user;
        userFactory.updateHeader(currentUser).success(function (data) {
            currentUser.editMode = false;

            $('#userModel').modal('hide');
        }).error(function (data) {
            $scope.error = "An Error has occured while Updating user! " + data.ExceptionMessage;
        });
    };
    //Model popup events
    $scope.showadd = function () {
        $scope.user = null;
        $scope.editMode = false;
        $('#userModel').modal('show');
    };
    $scope.showedit = function () {
        $('#userModel').modal('show');
    };
    $scope.cancel = function () {
        $scope.user = null;
        $('#userModel').modal('hide');
    }
    // initialize your users data
    $scope.getAll();
});

#2

<li><a href="#!/AddHeader"></i>AddHeader</a></li>
<li><a href="#!/ProjectIDCreation"></i>ProjectIDCreation</a></li>

(in .html don't forget / )

（在.html中不要忘记/）

    .config(
            [ '$locationProvider', '$routeProvider',
                function config($locationProvider, $routeProvider) {
                    $locationProvider.hashPrefix('!');
                           .when('/AddHeader', {
                                templateUrl: 'AddHeader.html',
                                controller: 'headerCtrl'
                            })
                            .when('/ProjectIDCreation', {
                                templateUrl: '/ProjectIDCreation.html',
                                controller: 'headerCtrl'
                            })
                            .otherwise('/', {
                                templateUrl: 'AddHeader.html',
                                controller: 'headerCtrl'
                            })
    } 
]);