Javascript Angular ui-router 未加载控制器或模板
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27744539/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular ui-router not loading controller or template
提问by Nolski
I seem to have an issue getting ui-router to actually route things. I am sure that all of my javascript files are being loaded and angular isn't throwing any errors. I have an HTML file that declares the app and base controller and then I load the js file that has the router. You can see a sample of my code below.
我似乎在让 ui-router 实际路由事物时遇到问题。我确信我的所有 javascript 文件都被加载并且 angular 没有抛出任何错误。我有一个声明应用程序和基本控制器的 HTML 文件，然后我加载了包含路由器的 js 文件。您可以在下面看到我的代码示例。
index.html
索引.html
<!DOCTYPE html>
<html ng-app="Yellr" ng-controller="yellrBaseCtrl">
<head>
<title>Yellr Moderator</title>
<link rel="stylesheet" type="text/css" href="assets/css/site.css"/>
</head>
<body>
<div class="side-nav">
...
</div>
<div class='main' ui-view>
</div>
<script src="assets/js/scripts.min.js"></script>
</body>
</html>
yellr.routes.js (compiled into scripts.min.js)
yellr.routes.js（编译成scripts.min.js）
'use strict';
angular
.module('Yellr', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/notfound');
$stateProvider
.state('feed', {
url: '/feed',
templateUrl: '/templates/feed.html',
controller: 'rawFeedCtrl'
});
}]);
console.log('Yellr routes');
Am I missing something obvious here? You can find the whole code base here
我在这里遗漏了一些明显的东西吗？你可以在这里找到整个代码库
回答by Karthik
The problem was with template url. I see you are serving the files directly from your root folder, not from the app. You will have to change the template url to this:
问题出在模板网址上。我看到您直接从根文件夹而不是从应用程序中提供文件。您必须将模板 url 更改为：
$stateProvider
.state('feed', {
url: '/feed',
templateUrl: 'app/templates/feed.html',
controller: 'rawFeedCtrl'
});
Also I would suggest to build all the html and scripts into a dist folder and serve from there.
此外，我建议将所有 html 和脚本构建到一个 dist 文件夹中并从那里提供服务。
回答by Radim K?hler
I created working plunkerhere.
我在这里创建了工作 plunker。
I added the reference to angular and ui-router
我添加了对 angular 和 ui-router 的引用
<!DOCTYPE html>
<html ng-app="Yellr" ng-controller="yellrBaseCtrl">
<head>
<title>Yellr Moderator</title>
<link rel="stylesheet" type="text/css" href="assets/css/site.css" />
</head>
<body>
<div class="side-nav">
...
</div>
<div class="main" ui-view=""></div>
<script data-require="angular.js@*" data-semver="1.3.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
<script data-require="ui-router@*" data-semver="0.2.13" src="//rawgit.com/angular-ui/ui-router/0.2.13/release/angular-ui-router.js"></script>
<script src="yellr.routes.js"></script>
<script src="yellrBaseCtrl.js"></script>
<script src="rawFeedCtrl.js"></script>
</body>
</html>
and changed the otherwise:
并改变了否则：
$urlRouterProvider.otherwise('/feed');
so this state is loaded on app start:
所以这个状态在应用程序启动时加载：
$stateProvider
.state('feed', {
url: '/feed',
templateUrl: 'feed.html',
controller: 'rawFeedCtrl'
});
The rest is as in your case... working. Check it here
其余的和你的情况一样......工作。在这里检查
回答by user3467104
The first thing I would suggest is that, given ui-router is handling the routes and assigning controllers, there may be a conflict with you assigning a controller on the html element
我建议的第一件事是，鉴于 ui-router 正在处理路由并分配控制器，可能会与您在 html 元素上分配控制器发生冲突
<html ng-app="Yellr" ng-controller="yellrBaseCtrl">
Using some sample code from a project i'm working on:
使用我正在处理的项目中的一些示例代码：
In index.html:
在 index.html 中：
<html ng-app="ddsWeb">
....
<!--header-->
<div ui-view="header"></div>
<!--content area-->
<div ui-view="content" class="container-fluid slide"></div>
<!--footer-->
<div ui-view="footer"></div>
...
In app.js:
在 app.js 中：
var ddsWeb = angular.module('ddsWeb',
[
'ui.router',
...
]);
// configure states
ddsWeb.config(function ($stateProvider, $urlRouterProvider) {
// For any unmatched url, redirect to /state1
$urlRouterProvider.otherwise("/customers");
// Now set up the states
$stateProvider
.state('customers', {
abstract: true,
url: "/customers",
views: {
header: {
templateUrl: "/project/partials/header.html"
},
content: {
templateUrl: "/project/partials/customers/customers.html"
},
footer: {
templateUrl: "/project/partials/footer.html"
}
}
})
.state('customers.list', {
url: '',
views: {
'list@customers': {
templateUrl: "/project/partials/customers/customers.list.html",
controller: "customerListController"
},
'searchbar@customers': {
templateUrl: "/project/search/searchbar.html",
controller: "searchController"
},
'pagination@customers': {
templateUrl: "/project/pagelink/pagination.html",
controller: "pageLinkController"
}
}
})
.state('customers.detail', {
url: '/detail/{customerId}',
views: {
'detail_modal@customers': {
controller: 'customerDetailController'
}
}
})
});
Then, for example, in CustomerListController:
然后，例如，在 CustomerListController 中：
ddsWeb.controller('customerListController', function ($scope,
pageLinkService,
searchService) {
searchService.setType('customerSearch');
pageLinkService.setType('customerPageChange');
$scope.getCustomers = function () {
$scope.CustomerModel.getAll(pageLinkService.current_page, pageLinkService.per_page, searchService.searchText)
.then(function (result) {
pageLinkService.current_page = Number(result.data.current_page);
pageLinkService.last_page = Number(result.data.last_page);
pageLinkService.calculatePages();
});
};
$scope.$on('customerSearch', function () {
pageLinkService.resetPages();
$scope.getCustomers();
});
$scope.$on('customerPageChange', function () {
$scope.getCustomers();
});
$scope.getCustomers();
});
Please note that my code is not "properly" modularized; there's too much in one module (ddsWeb), and i'm planning on fixing that.
请注意，我的代码没有“正确”模块化；一个模块 (ddsWeb) 中的内容太多了，我正计划解决这个问题。
Hope this helps.
希望这可以帮助。
