Маршрутизация не работает в AngularJS

Маршрутизация не работает для index.html. Это даже дает ошибку компилятора. Index.html - моя стартовая страница. Через ссылку "Подробности заголовка" должна открыться страница "Добавить заголовок.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();
});
Источник

2 ответа

Решение

Убедитесь, что путь к файлу, который вы использовали в тегах скрипта, правильный. Которые в плнкр были не правильными. Также я обнаружил, что у вас есть два определенных модуля, чтобы избежать этого. Также вы импортируете angular, jquery, bootstrap несколько раз, не делайте этого. Ниже приведен исправленный код

Отредактировано плнкр

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();
});
Источник 
<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'
                            })
    } 
]);
Источник
Другие вопросы по тегам