Question

在angularjs和ui-routes上完全是新手！试图让一个基本的ui-router与express一起工作，但直到现在都没有成功。

尝试制作两条路线。

/admin
/admin/dashboard

创建了以下文件：

的index.html

<!DOCTYPE html>
<html lang="pt-br" data-ng-app="testApp">
<head>
    <base href="/admin">
</head>
<body ng-controller="AdminCtrl">
    <div class="app" id="app" ui-view></div>

    <script src="../bower_components/angular/angular.js"></script>
    <script src="../bower_components/angular-ui-router/release/angular-ui-router.js"></script>
    <script src="../admin/app.js"></script>
    <script src="../admin/admin.controller.js"></script>
    <script src="../admin/dashboard.controller.js"></script>
</body>
</html>

app.js

'use strict';

angular.module('testApp', ['ui.router'])
.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
        $stateProvider

            .state('admin', {
                url: '/admin',
                templateUrl: 'admin/admin.html',
                controller: 'AdminCtrl'
            })

            .state('admin.dashboard', {
                url: '/admin/dashboard/',
                templateUrl: 'admin/dashboard.html',
                controller: 'DashboardCtrl'
            });

        $locationProvider.html5Mode(true);
    });

admin.controller.js

angular.module('testApp')
    .controller('AdminCtrl', function() {
        console.log("I'm AdminCtrl");
    });

dashboard.controller.js

angular.module('testApp')
    .controller('DashboardCtrl', function($scope) {
        console.log("I'm DashboardCtrl");
    });

dashboard.html

I'm the dashboard.html

admin.html

I'm the admin.html

尝试在浏览器上加载以下网址：

http://localhost:9000/admin/

http://localhost:9000/admin/dashboard

这两个网址的结果相同：

控制台没有错误。
加载了所有文件（没有404）
index.html正确显示
在控制台上，“我是AdminCtrl”显示（因此，加载了AdminCtrl）
浏览器只显示空白页面（admin.html和dashboard.html尚未加载？）
消息“我是DashboardCtrl”从未显示，然后我认为DashboardCtrl从未被调用过。

PS： routes.js（来自快递）

app.route('/admin/*')
        .get(function(req, res) {
            res.sendfile(app.get('appPath') + '/admin/index.html');
        });

Answer 1

请在您的html模板中提及您的子控制器，如下所示

 <div ng-controller="DashboardCtr">

可能是此链接可以解决您的问题https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views和https://github.com/angular-ui/ui-router

Answer 2

我注意到您的信息中心url上有一个结尾的斜杠。我尝试更正这一点，正如Sunil D.所说，当您在路线中定义管理控制器时，您不需要指定管理控制器。

其次，您可以尝试将仪表板的状态重命名为dashboard，以防止管理员和仪表板之间的父/子关系。除非，那就是你想要的。在这种情况下，您的admin.html页面也必须有ui-view。

Answer 3

首先确保'admin / admin.html'和'admin / dashboard.html'是可访问的（只需在你的borwser网址框中复制yourhost.com/admin/admin.html的网址并进行检查）。

以及“i'am DashboardCtrl”永远不显示的原因是'admin.dashboard'状态上的网址仅为url: '/dashboard'

AngularJS ui-route无法正常工作

3 个答案: