Проблемы маршрутизации AngularJS

Кажется, я не могу отобразить что-либо в моем div с атрибутом «ng-view».

Вот мой контроллер;

(function () {
var app = angular.module("userViewer", []);

var MainController = function ($scope, $location) {
    console.log("Main controller");
    $scope.search = function () {

        console.log("User ID: " + $scope.userid);
        //Right Route Here
    };
};

app.controller("MainController", MainController);
}());

Вот мой app.js:

(function() {
var app = angular.module("userViewer", ['ngRoute']);
console.log("Test route");
app.config(function($routeProvider) {
    $routeProvider.when("/main", {
            templateUrl: "html/main.html",
            controller: "MainController"

        })
        .otherwise({ redirectTo: "/main" });
});
}());

Мой основной шаблон:

<!DOCTYPE html>
<html ng-app="userViewer" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    @Scripts.Render("~/bundles/angular")
</head>
<body>
    @RenderBody()
</body>
</html>

HTML-код главной страницы моего углового SPA:

<h2>Header</h2>

<div ng-view>

</div>

Мой main.html

<div>
    <form name="searchUser" ng-submit="search()">
        <input type="search" required ng-model="userid" placeholder="User ID to find" />
        <input type="submit" value="Search" />
    </form>
</div>

Мой console.log в app.js «Тестовый маршрут печатается, но когда я перехожу к URL/#/main, ничего не отображается.

Просто слово "Заголовок" и вид main.html вообще не загружается.

В консоли также не отображаются ошибки.

Кто-нибудь может дать мне совет?


javascript html c# angularjs angular-routing
person Lemex    schedule 30.06.2014    source источник
comment
Похоже, вы дважды определяете модуль userViewer   -  person Thomas Roch    schedule 01.07.2014

Ответы (3)


arrow_upward
2
arrow_downward

В вашем контроллере вы делаете это

var app = angular.module("userViewer", []);

Когда вы помещаете [] туда, вы создаете новый модуль. Пытаться

var app = angular.module("userViewer");

чтобы сослаться на существующий.

person Delta    schedule 30.06.2014

arrow_upward
1
arrow_downward 

(function() {
var app = angular.module("userViewer", ['ngRoute']);
console.log("Test route");
app.config(function($routeProvider) {
    $routeProvider.when("/main", {
            templateUrl: "/html/main.html", <-- try to locate the view starting from the root path of the app
            controller: "MainController"

        })
        .otherwise({ redirectTo: "/main" });
});
}());

попробуйте определить свой контроллер как:

angular.module('userViewer').controller('MainController', ['$scope', '$location', function ($scope, $location) {
    //your code here
}]);
person pedrommuller    schedule 30.06.2014

arrow_upward
1
arrow_downward

изменить app.js на

(function () {


    var MainController = function ($scope, $location) {
        console.log("Main controller");
        $scope.search = function () {

            console.log("User ID: " + $scope.userid);
            //Right Route Here
        };
    };

app.controller("MainController", MainController);
}());
person sylwester    schedule 30.06.2014