Question

我一直在学习Angular，现在我有一段时间学习它我决定制作一个小应用程序来测试我的知识，但我的应用程序和嵌套视图上的链接似乎不起作用由于我无法理解的原因，我使用了angular-ui-router，因为处理路由和其他类似的东西非常棒。

问题：我试图将路线模板加载到包含ui-view的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',
                }
            }

        });
});

dashboard.js

'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>

Answer 1

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

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

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

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

第一行创建模块。另外两个为模块添加组件。您的代码覆盖了以前的组件。

Angular UI Router不呈现嵌套视图和链接

1 个答案: