我有这个项目结构:
-root
|-JS
|-app.js
|-COMPONENTS
|-HOME
|-homeController.js
|-homeView.html
|-ERROR
|-error.html
|-index.html
这是index.html:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- JS LOADING -->
<script src="./bower_components/angular/angular.js"></script>
<script src="./bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<!--APP JS -->
<script src="js/components/app.js"></script>
<script src="./js/shared/services/lb-service.js"></script>
<!--HOME JS-->
<script src="./js/components/home/homeController.js"></script>
</head>
<body ng-app='benirius'>
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="error">Error</a></li>
</ul>
<div ui-view></div>
</body>
</html>
和app.js:
'use strict';
angular.module('benirius', [
'lbServices',
'ui.router'
])
.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: '/components/home/homeView.html',
controller: 'homeController'
})
.state('error', {
url: '/error',
templateUrl: '/components/error/error.html'
});
$urlRouterProvider.otherwise('/');
}]);
编辑添加 homeController.js:
angular.module('benirius',[])
.controller('homeController', ['$scope', function($scope) {
$scope.test = "Inside home.";
}]);
Angular ui 路由器不会创建链接/加载页面。 所有 js 文件均已加载，并且控制台中未显示 JavaScript 错误。 有人知道为什么 ui-router 不工作吗？
Ps:我一直在尝试使用 templateUrl 路径，但没有成功。
最佳答案
如图here in angular doc ，当您分离文件并向模块添加 Controller 、服务或其他内容时，您必须不带参数加载它。 您首先在文件中定义您的应用程序:
angular.module('benirius', [
'lbServices',
'ui.router'
])
.config(
// CODE IN HERE
);
$urlRouterProvider.otherwise('/');
}]);
然后，如果您想将元素添加到另一个文件中的应用程序，则可以不带参数加载模块，如下所示:
// notice there is no second argument therefore it loads the previously defined module 'benirius'
angular.module('benirius')
.controller('homeController', ['$scope', function($scope) {
$scope.test = "Inside home.";
}]);
//=> NO ERROR
而不是:
// In this case, it is considered as a redefinition of 'benirius' module with no dependencies injected
angular.module('benirius',[])
.controller('homeController', ['$scope', function($scope) {
$scope.test = "Inside home.";
}]);
//=> ERROR
关于javascript - Angular 用户界面路由器不工作/路由，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32321931/