Question

短篇小说：当我使用gulp watch打开索引页面时，我什么也看不见。

我收到错误：

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.12/$injector/modulerr?p0=confusionApp&p1=Er…0(http%3A%2F%2Flocalhost%3A3000%2Fscripts%2Fmain-94e7868a45.js%3A1%3A18165)

当我点击链接以查看错误是什么时，它会说：

Failed to instantiate module {0} due to:
{1}

然后进入ngRoute问题，我现在没有使用，因为我使用的是angular-ui-router。

如果不解决这个问题，我不能再进一步了，所以我把它扔给你们。

代码如下，但请记住，我只包括我在作业中更改的区域，因为这篇文章太长了。因此，如果您还想查看其他任何代码，请将它们放入内容中。

感谢。

了header.html

...
<ul class="nav navbar-nav">
    <li class="active">
        <a ui-sref="app">
            <span class="glyphicon glyphicon-home"
                     aria-hidden="true"></span> Home</a></li>
    <li><a ui-sref="app.aboutus">
        <span class="glyphicon glyphicon-info-sign"
                     aria-hidden="true"></span> About</a></li>
    <li><a ui-sref="app.menu">
         <span class="glyphicon glyphicon-list-alt"
                     aria-hidden="true"></span>
                     Menu</a></li>
     <li><a ui-sref="app.contactus">
         <i class="fa fa-envelope-o"></i> Contact</a></li>
</ul>
...

footer.html

...
<ul class="list-unstyled">
    <li><a ui-sref="app">Home</a></li>
    <li><a ui-sref="app.aboutus">About</a></li>
    <li><a ui-sref="app.menu">Menu</a></li>
    <li><a ui-sref="app.contactus">Contact</a></li>
</ul>
...

app.js

'use strict';

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

            //route for the home page
            .state('app', {
                url:'/',
                views: {
                    'header': {
                        templateUrl: 'views/header.html',
                    },
                    'content': {
                        template: '<h1>To be completed</h1>',
                        controller: 'IndexController'
                    },
                    'footer': {
                        templateUrl: 'views/footer.html',
                    }
                }
            })

            //route to aboutus page
            .state('app.aboutus', {
                url:'aboutus',
                views: {
                    'content@': {
                        template: '<h1>To be completed</h1>',
                        controller: 'AboutController'
                    }
                }
            })

            //route to contactus page
            .state('app.contactus', {
                url:'contactus',
                views: {
                    'content@': {
                        templateUrl: 'views/contactus.html',
                        controller: 'ContactController'
                    }
                }
            })

            //route to menu page
            .state('app.menu', {
                url:'menu',
                views: {
                    'content@': {
                        templateUrl: 'views/menu.html',
                        controller: 'MenuController'
                    }
                }
            })

            //route to dishdetail page
            .state('app.dishdetail', {
                url:'menu/:id',
                views: {
                    'content@': {
                        templateUrl: 'views/dishdetail.html',
                        controller: 'DishDetailController'
                    }
                }
            });

            $urlRouteProvider.otherwise('/');
    })

;

menu.html

...
<div class="media-left media-middle">
    <a ui-sref="app.dishdetail({id: dish._id})">
       <img class="media-object img-thumbnail" ng-src={{dish.image}} alt={{dish.name}} />
    </a>
</div>
...

的index.html

<body>

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


<!-- build:js scripts/main.js -->
    <script src="../bower_components/angular/angular.min.js"></script>
    <!-- <script src="../bower_components/angular-route/angular-route.min.js"></script> -->
    <script src="../bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
    <script src="scripts/app.js"></script>
    <script src="scripts/controllers.js"></script>
    <script src="scripts/services.js"></script>
<!-- endbuild -->

</body>

Answer 1

当我下载新的app.js文件时，它修复了所有内容，但两个文件之间的差异并不大。（非常沮丧。）

模板被替换为templateUrls，我实际上已经完成了，而且一切都是一样的，但当我只是将代码复制并粘贴到我的代码上时，就可以了。

以下是新的工作代码：

'use strict';

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

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

            })

            // route for the aboutus page
            .state('app.aboutus', {
                url:'aboutus',
                views: {
                    'content@': {
                        templateUrl : 'views/aboutus.html',
                        controller  : 'AboutController'
                    }
                }
            })

            // route for the contactus page
            .state('app.contactus', {
                url:'contactus',
                views: {
                    'content@': {
                        templateUrl : 'views/contactus.html',
                        controller  : 'ContactController'
                    }
                }
            })

            // route for the menu page
            .state('app.menu', {
                url: 'menu',
                views: {
                    'content@': {
                        templateUrl : 'views/menu.html',
                        controller  : 'MenuController'
                    }
                }
            })

            // route for the dishdetail page
            .state('app.dishdetails', {
                url: 'menu/:id',
                views: {
                    'content@': {
                        templateUrl : 'views/dishdetail.html',
                        controller  : 'DishDetailController'
                   }
                }
            });

        $urlRouterProvider.otherwise('/');
    })
;

如果您在同一课程中遇到同样的问题，请复制并粘贴app.js代码，即使您已正确填写所有内容。

Coursera学习AngularJS第3周练习4期

1 个答案: