角度 ui 路由器不工作/路由答案

【问题标题】：angular ui router not working / routing角度 ui 路由器不工作/路由
【发布时间】：2015-09-01 16:47:23
【问题描述】：

我有这个项目结构：

-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 路径，但没有成功。

【问题讨论】：

显示的模板路径与显示的目录结构不匹配
如前所述，我尝试过：“js/components/home/homeView.html”、“components/home/homeView.html”，但没有任何改变。你建议什么路径？
请贴出homeController.js的内容
添加了 homeController。

标签： javascript angularjs angular-ui-router

【解决方案1】：

如here in angular doc 所示，当您分离文件并将控制器、服务或其他模块添加到模块时，您必须在不带参数的情况下加载它。您首先在文件中定义您的应用：

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

【讨论】：