路由不适用于index.html。它甚至给编译器错误。 Index.html是我的启动页面。通过标题详细信息链接,应打开Add 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();
});

最佳答案

确保在脚本标签中使用的文件路径正确。 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();
});

10-05 20:27
查看更多