路由在 AngularJS 中不起作用

Question

路由不适用于 index.html。它甚至给出了编译器错误。 Index.html 是我的启动页。通过 Header details link 添加 Header.html 页面应该打开。我已经在 plunkr ["https://plnkr.co/edit/w9eWiHKvSDrf0viERgoX?p=preview"]

中添加了整个代码

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

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();
});

Answer 1

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

(在.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'
                            })
    } 
]);

Answer 2

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

Edited 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();
});

路由在 AngularJS 中不起作用

Routing is not working in AngularJS

html

css

angularjs

angular-routing