角UI路由器不起作用/路由

Question

我有這個項目結構：

-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無法正常工作嗎？

附言：我一直在嘗試templateUrl路徑，但沒有成功。

Answer 1

如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

角UI路由器不起作用/路由

問題描述

1 個解決方案

解決方案1
0 已采納 2015-09-01 08:47:23

角UI路由器不起作用/路由

問題描述

1 個解決方案

解決方案1 0 已采納 2015-09-01 08:47:23

解決方案1
0 已采納 2015-09-01 08:47:23