Question

我从我的快速服务器index.html

呈现了以下视图

<section ng-view></section>
<!-- Load local libraries -->
<script type="text/javascript" src="/lib/angular/angular.js"></script>
<script type="text/javascript" src="/lib/angular-route/angular-route.js"></script>
<script type="text/javascript" src="/lib/angular-resource/angular-resource.js"></script>

<script type="text/javascript" src="/dummy/dummy.client.module"></script>
<script type="text/javascript" src="/dummy/dummy.client.controller"></script>
<script type="text/javascript" src="/dummy/dummy.client.route"></script>

<!-- Bootstrap AngularJS application -->
<script type="text/javascript" src="/application.js"></script>

我用application.js文件手动引导它：

var mainApplicationModule = angular.module('app', ['ngResource', 'ngRoute', 'dummy'])

mainApplicationModule.config(['$locationProvider',
    function($locationProvider) {
        $locationProvider.hashPrefix('!');
    }
]);

if (window.location.hash === '#_=_') window.location.hash = '#!';

// Manually bootstrap the AngularJS application
angular.element(document).ready(function() {
    angular.bootstrap(document, ['app']);
});

然后在dummy.client.module.js：

angular.module('dummy', [])

在dummy.client.controller.js中：

angular.module('dummy').controller('DummyController', ['$scope', function($scope) {
    $scope.text = 'hi what '
}])

dummy.client.route.js：

angular.module('dummy').config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/', {
        templateUrl: 'dummy/dummy.client.view.html'
    })
}])

dummy.client.view.html：

<section ng-controller="DummyController">
    <textarea ng-bind="text"></textarea>
</section>

我得到一个空白页面。控制器没有被调用（我使用alert（'hi'）来测试）如果我不使用ngRoute，即在index.html页面中附加所有js文件，它正在工作而不是使用ngRoute和ng-view，它可以工作

错误消息：

Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module dummy due to:
Error: [$injector:nomod] Module 'dummy' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.3.0-build.3042+sha.76e57a7/$injector/nomod?p0=dummy
    at chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:120:12
    at chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:215:17
    at ensure (chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:139:38)
    at module (chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:213:14)
    at angular.module (chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:686:31)
    at angular.module (chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:1019:38)
    at http://localhost:3000/lib/angular/angular.js:3877:22
    at forEach (http://localhost:3000/lib/angular/angular.js:325:18)
    at loadModules (http://localhost:3000/lib/angular/angular.js:3871:5)
    at http://localhost:3000/lib/angular/angular.js:3878:40
http://errors.angularjs.org/1.2.28/$injector/modulerr?p0=dummy&p1=Error%3A%…t%20http%3A%2F%2Flocalhost%3A3000%2Flib%2Fangular%2Fangular.js%3A3878%3A40
    at http://localhost:3000/lib/angular/angular.js:78:12
    at http://localhost:3000/lib/angular/angular.js:3905:15
    at forEach (http://localhost:3000/lib/angular/angular.js:325:18)
    at loadModules (http://localhost:3000/lib/angular/angular.js:3871:5)
    at http://localhost:3000/lib/angular/angular.js:3878:40
    at forEach (http://localhost:3000/lib/angular/angular.js:325:18)
    at loadModules (http://localhost:3000/lib/angular/angular.js:3871:5)
    at createInjector (http://localhost:3000/lib/angular/angular.js:3811:11)
    at doBootstrap (http://localhost:3000/lib/angular/angular.js:1444:20)
    at Object.angular.resumeBootstrap (http://localhost:3000/lib/angular/angular.js:1467:5)
http://errors.angularjs.org/1.2.28/$injector/modulerr?p0=app&p1=Error%3A%20…p%20(http%3A%2F%2Flocalhost%3A3000%2Flib%2Fangular%2Fangular.js%3A1467%3A5)angular.js:78 (anonymous function)angular.js:3905 (anonymous function)angular.js:325 forEachangular.js:3871 loadModulesangular.js:3811 createInjectorangular.js:1444 doBootstrapangular.js:1467 angular.resumeBootstraphint.js:535 maybeBootstrap

[编辑]：

我尝试了另一个模块但仍然无法正常工作： article.client.module.js：

angular.module('article', [])

article.client.route.js：

angular.module('article').config(['$routeProvider', function($routeProvider) {
        $routeProvider.when('/', {templateUrl:'article/list-article.client.view.html'})
    }
]);

article.client.controller：

angular.module('article').controller('ArticleController', ['$scope', function($scope) {
        $scope.text = 'hi'
    }
])

列表article.client.view.html：

<section ng-controller="ArticleController">
    <textarea ng-bind="text"></textarea>
</section>

application.js：

//var mainApplicationModule = angular.module('app', ['ngResource', 'ngRoute', 'dummy']);
var mainApplicationModule = angular.module('app', ['ngResource', 'ngRoute', 'article']);
//var mainApplicationModule = angular.module('app', ['ngResource', 'ngRoute', 'article', 'user', 'index']);

mainApplicationModule.config(['$locationProvider',
    function($locationProvider) {
        $locationProvider.hashPrefix('!');
    }
]);

if (window.location.hash === '#_=_') window.location.hash = '#!';

// Manually bootstrap the AngularJS application
angular.element(document).ready(function() {
    angular.bootstrap(document, ['app']);
});

<section ng-view></section>
<!-- Load local libraries -->
<script type="text/javascript" src="/lib/angular/angular.js"></script>
<script type="text/javascript" src="/lib/angular-route/angular-route.js"></script>
<script type="text/javascript" src="/lib/angular-resource/angular-resource.js"></script>
<!--<script type="text/javascript" src="/dummy/dummy.client.module.js"></script>-->
<!--<script type="text/javascript" src="/dummy/dummy.client.controller.js"></script>-->
<!--<script type="text/javascript" src="/dummy/dummy.client.route.js"></script>-->


<!-- Load the articles module -->
<script type="text/javascript" src="/article/article.client.module.js"></script>
<script type="text/javascript" src="/article/article.client.controller.js"></script>
<script type="text/javascript" src="/article/article.client.route.js"></script>
<!--<script type="text/javascript" src="/article/article.client.resource.js"></script>-->

<!-- Bootstrap AngularJS application -->
<script type="text/javascript" src="/application.js"></script>

我注释掉了虚拟模块。与以前相同的错误

[编辑2]：

如果我将文件夹名称更改为article2或“article”以外的任何内容，那么它可以正常工作。

Answer 1

我认为你在脚本中缺少.js。因为dummy模块无法初始化，因此您得到了上述错误。

 <script type="text/javascript" src="/dummy/dummy.client.module.js"></script>
 <script type="text/javascript" src="/dummy/dummy.client.controller.js"></script>
 <script type="text/javascript" src="/dummy/dummy.client.route.js"></script>

扩展问题的扩展答案...... 现在，这里还有两个问题

article模块正在初始化，因为您在ngRouteProvider模块中使用article而未添加ngRoute依赖项。

//您需要添加ngRoute依赖项才能使用$ ngRouteProvider angular.module（'article'，['ngRoute']）;

为此您还需要包含angular-route.js 参考：https://docs.angularjs.org/api/ngRoute

您在ngResource中使用的是application.js，但我认为您没有angular-resource.js

参考：https://docs.angularjs.org/api/ngResource

带有ngRoute的angularJS应用程序显示白页

1 个答案: