Question

我有一个像http://i.imgur.com/X8p6Qhi.png

这样的文件夹结构

这是我的index.html

<!DOCTYPE html>
<html lang="en" ng-app="cartApp">
<head>
    <meta charset="UTF-8">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>

    <script src="./dashboard/dashboardCtrl.js"></script>

</head>
<body>


    <ui-view></ui-view>
</body>
</html>

route.js

var app = angular.module('cartApp', ['ui.router']);

app.config(['$locationProvider',function($stateProvider, $urlRouterProvider, $locationProvider) {


    $locationProvider.html5Mode(true);

    $urlRouterProvider.otherwise('/');

    $stateProvider


        .state('home', {
            url: '/',
            templateUrl: './dashboard/index.html',
            controller: 'dashboardCtrl'
        });

}]);

公共/ dashboardCtrl.html

<div ng-controller="dashboardCtrl as dash">
    <h1>Dashboard</h1>
    <p>{{dash.something}}</p>
</div>

公共/ dashboardCtrl.js

var app = angular.module('cartApp', ['ui.router']);
app.controller('dashboardCtrl', [function() {

    var dash = this;

    dash.something = "something";
}]);

就是这样。我不知道错误在哪里，对我来说一切似乎都很好。当我加载http://localhost:4000/时，我看不到任何内容。它一片空白。

Answer 1

将您的route.js文件更改为

var app = angular.module('cartApp', ['ui.router']);

app.config(['$locationProvider','$stateProvider','$urlRouterProvider',function($stateProvider, $urlRouterProvider, $locationProvider) {


    $locationProvider.html5Mode(true);

    $urlRouterProvider.otherwise('/');

    $stateProvider


        .state('home', {
            url: '/',
            templateUrl: 'dashboard/index.html',
            controller: 'dashboardCtrl'
        });

}]);

Answer 2

在route.js中你判断了模块cartApp，再次在仪表板控制器中声明了相同的模块cartApp。

因此，我认为您的模块存在问题，因为您多次声明了相同的模块。并检查配置依赖关系顺序。试试这样：

route.js

var app = angular.module('cartApp', ['ui.router']);

app.config(['$locationProvider','$urlRouterProvider''$stateProvider',function($locationProvider,$urlRouterProvider, $stateProvider) {


    $locationProvider.html5Mode(true);

    $urlRouterProvider.otherwise('/');

    $stateProvider


        .state('home', {
            url: '/',
            templateUrl: './dashboard/index.html',
            controller: 'dashboardCtrl'
        });

}]);

dashboard.js：

app.controller('dashboardCtrl', [function() {

    var dash = this;

    dash.something = "something";
}]);

angularjs ui-view不能与templateUrl一起使用

2 个答案: