AngularJS路由问题
[英]AngularJS Routing Issues
问题描述
I can't seem to get anything displayed in my div which has the attribute "ng-view". 
我似乎无法在具有ng-view属性的div中显示任何内容。
Here is my controller; 这是我的控制器；
(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);
}());
Here is my app.js: 这是我的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" });
});
}());
My master template: 我的主模板：
<!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>
My angular SPA main page html body: 我的角度SPA主页html正文：
<h2>Header</h2>
<div ng-view>
</div>
My main.html 我的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>
My console.log within app.js "Test route prints but when I navigate to URL/#/main nothing is shown. app.js中的console.log“测试路由已打印，但是当我导航到URL /＃/ main时，未显示任何内容。
Just the word "Header" and the main.html view is not loaded atall. 仅单词“ Header”和main.html视图根本不会加载。
There is also no errors displayed in the console. 控制台中也没有显示任何错误。
Can anyone give me some advice? 谁能给我一些建议？
3 个解决方案
解决方案1
2 已采纳 2014-06-30 21:52:43
In your controller you are doing this 在您的控制器中，您正在执行此操作
var app = angular.module("userViewer", []);
When you put the [] in there you are creating a new module. 当您在其中放置[]时，您将创建一个新模块。 Try 尝试
var app = angular.module("userViewer");
to reference your existing one. 引用您现有的。
解决方案2
1 2014-06-30 21:52:54
(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" });
});
}());
try to define your controller as: 尝试将您的控制器定义为：
angular.module('userViewer').controller('MainController', ['$scope', '$location', function ($scope, $location) {
//your code here
}]);
解决方案3
1 2014-06-30 21:57:23
change app.js to 将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);
}());
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.