Javascript 角度UI路由器不呈现嵌套视图和链接_Javascript_Angularjs_Angular Ui Router

Javascript 角度UI路由器不呈现嵌套视图和链接

javascript angularjs

Javascript 角度UI路由器不呈现嵌套视图和链接,javascript,angularjs,angular-ui-router,Javascript,Angularjs,Angular Ui Router,我一直在学习Angular，现在我有一段时间在学习Angular，我决定制作一个小应用来测试我的知识，但我的应用上的链接和嵌套视图似乎不起作用，原因我还不明白，我一直在使用Angular ui路由器，因为它处理路由之类的事情非常棒问题：我正在尝试将路由模板加载到包含ui视图的div中，但它不起作用我有三个js文件：首先config.route.js 'use strict'; angular.module('weekobApp', ['ui.router']) .config(funct

我一直在学习Angular，现在我有一段时间在学习Angular，我决定制作一个小应用来测试我的知识，但我的应用上的链接和嵌套视图似乎不起作用，原因我还不明白，我一直在使用Angular ui路由器，因为它处理路由之类的事情非常棒

问题：我正在尝试将路由模板加载到包含ui视图的div中，但它不起作用

我有三个js文件：

首先config.route.js

'use strict';

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

    $urlRouterProvider.otherwise('/');

    $stateProvider

        // route for the home page
        .state('app', {
            url:'/',
            views: {
                'header': {
                    templateUrl : 'app/layout/header.html',
                },
                'content': {
                    templateUrl : 'app/layout/dashboard.html',
                    controller  : 'DashboardController'
                },
                'footer': {
                    templateUrl : 'app/layout/footer.html',
                }
            }

        });
});

'use strict';

angular.module('weekobApp', [])
    .controller('DashboardController', ['$scope', function ($scope) {
    $scope.myname = "Dashboard";
}]);

dashboard.js

'use strict';

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

    $urlRouterProvider.otherwise('/');

    $stateProvider

        // route for the home page
        .state('app', {
            url:'/',
            views: {
                'header': {
                    templateUrl : 'app/layout/header.html',
                },
                'content': {
                    templateUrl : 'app/layout/dashboard.html',
                    controller  : 'DashboardController'
                },
                'footer': {
                    templateUrl : 'app/layout/footer.html',
                }
            }

        });
});

'use strict';

angular.module('weekobApp', [])
    .controller('DashboardController', ['$scope', function ($scope) {
    $scope.myname = "Dashboard";
}]);

最后是html文件：

<!DOCTYPE html>
<html ng-app="weekobApp">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <!-- build:css content/styles/style.css -->
    <link href="content/styles/style.css" rel="stylesheet" />
    <!-- endbuild -->
</head>
<body>

    <div ui-view="header"></div>
    <div ui-view="content"></div>
    <div ui-view="footer"></div>

    <!-- build:js app/main.js -->
    <script src="../../bower_components/angular/angular.min.js"></script>
    <script src="../../bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
    <script src="../../bower_components/angular-resource/angular-resource.min.js"></script>
    <!-- Dashboard modules -->
    <script src="app/dashboard/config.route.js"></script>
    <script src="app/dashboard/dashboard.js"></script>
    <!-- endbuild -->
</body>
</html>


标题

您应该只声明一次模块依赖项列表：

angular.module('weekobApp', ['ui.router']);

angular.module('weekobApp')
     .config(function($stateProvider, $urlRouterProvider) {

angular.module('weekobApp')
     .controller('DashboardController', ['$scope', function ($scope) {

第一行创建模块。另外两个将组件添加到模块中。您的代码正在覆盖以前的组件。

您应该只声明一次模块依赖项列表：

angular.module('weekobApp', ['ui.router']);

angular.module('weekobApp')
     .config(function($stateProvider, $urlRouterProvider) {

angular.module('weekobApp')
     .controller('DashboardController', ['$scope', function ($scope) {

第一行创建模块。另外两个将组件添加到模块中。您的代码正在覆盖以前的组件。

您应该只声明一次模块依赖项列表。您应该只声明一次模块依赖项列表。我这样做了，但现在我遇到了一个问题“[$injector:modulerr]未能实例化模块weekobApp，原因是：错误：[$injector:unpr]”顺便说一下，它仍然没有显示任何模板！显示更多错误消息。错误消息中提供程序的名称是什么？这是我得到的错误，当我将参数[]添加到dashboard.js内的angular.module时，这个错误消失了，我知道这是因为它覆盖了依赖项，但我只是说。在中工作正常。错误与此和缩小的文件有关，我这么做了，但现在我遇到了这个问题“[$injector:modulerr]未能实例化模块weekobApp，原因是：错误：[$injector:unpr]”，而且它仍然没有显示任何模板！显示更多错误消息。错误消息中提供程序的名称是什么？这是我得到的错误，当我将参数[]添加到dashboard.js内的angular.module时，这个错误消失了，我知道这是因为它覆盖了依赖项，但我只是说。在中工作正常。错误与此和缩小的文件有关，它是如何引起问题的。