AngularJS ui路由不工作_Angularjs_Express_Angular Ui Router

AngularJS ui路由不工作

angularjs express

AngularJS ui路由不工作,angularjs,express,angular-ui-router,Angularjs,Express,Angular Ui Router,在angularjs和ui路线上完全是新手！试图获得一个基本的ui路由器与express一起使用，但到目前为止没有成功试着走两条路 /admin /admin/dashboard 创建了以下文件： index.html <!DOCTYPE html> <html lang="pt-br" data-ng-app="testApp"> <head> <base href="/admin"> </head> <body

在angularjs和ui路线上完全是新手！试图获得一个基本的ui路由器与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>

I'm the dashboard.html

I'm the admin.html

admin.controller.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);
    });

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

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

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

dashboard.controller.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);
    });

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

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

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

dashboard.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>

I'm the dashboard.html

I'm the admin.html

admin.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>

I'm the dashboard.html

I'm the admin.html

已尝试在浏览器上加载以下URL：

这两个URL具有相同的结果：

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

附言： routes.js（来自express）

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

 <div ng-controller="DashboardCtr">

也许这个链接可以解决您的问题，我注意到您的仪表板

url

上有一个结束斜杠。我会尝试纠正这一点，正如Sunil d.所说，在路由中定义管理员控制器时，不需要指定管理员控制器

其次，您可以尝试将dashboard的状态重命名为

dashboard

，以防止管理员和dashboard之间的父/子关系。除非，那是你想要的。在这种情况下，你的admin.html页面也必须有一个

ui视图。
首先确保“admin/admin.html”和“admin/dashboard.html”是可访问的（只需在你的borwser url框中复制yourhost.com/admin/admin.html的url并选中即可）
“i'am dashboard Ctrl”从不显示的原因是'admin.dashboard'
上的url应仅为url:'/dashboard'
一些建议/指针：1）在路由定义中指定同一控制器时，不要在HTML模板中使用dong controller=“AdminCtrl”
（当一切正常工作时，这将导致实例化2AdminCtrl
）。2）在路由定义中将admin.dashboard
定义为admin
的子状态。这意味着管理状态的HTML模板也需要一个
。这是子州模板的占位符。3）是否确实正在加载HTML模板（模板的快速路由在哪里？您应该在浏览器控制台中看到HTML模板正在加载或未加载的证据。4）UI路由器捕获异常，而您不会在控制台上看到它们。为$stateChangeError
添加事件处理程序以查看路由不工作的原因。删除index.html上的ng控制器，在admin.html上放置一个，最后，我确定admin.html和dashboard.html未加载（查看chrome选项卡上的网络选项卡）。尝试使用$stateChangeError查看任何错误，但我不确定是否正确，因为任何地方都不会显示错误。添加$stateChangeError处理程序的一种方法（将此添加到app.js
）是：angular.module（'testApp'）。运行（$rootScope）{$rootScope.$on（'$stateChangeError'，function（event，toState，toParams，fromState，fromParams，error）{console.log（'statechangererror'，error）；}）
听起来路由与URL不匹配（因此它不会进入任何状态）。对于调试（以及一般的应用程序），可以指定URL与任何状态不匹配时要进入的默认状态。将此添加到“运行”中app.js中的块
：$urlRouterProvider。否则（“/admin”）
如果这样做有效，那么至少你知道问题出在哪里。然后尝试播放w/URL，尝试：
或播放w/URL在你的州。仪表板必须是admin的子级。尝试在admin.html上放置ui视图，但没有成功是的，两个文件都可以通过浏览器访问。如果你可以与共享这些文件，则可以更简单地使用忍受这个问题。