Question

我一直在尝试为项目设置基本的AngularJS功能，但在包括angular-route时一直在打砖墙。两者都是版本1.4.8。我目前正在使用gulp-require连接我的JS，这是我的主要javascript文件

//  =require ../components/jquery/dist/jquery.min.js

//  =require ../components/angular/angular.js
//  =require ../components/angular-route/angular-route.js

$(document).ready(function() {

  // =require app/app.js

}); //  Doc ready is done!

我的app.js文件

var app = angular.module('myApp', ['ngRoute']);

app.controller("ctrl", ["$scope", 'ngRoute', function($scope) {

    $scope.test = "It works!";

}]);

我已经检查过并且所有文件都正确连接。 ng-app和ng-controller属性位于我的HTML文件中。我已经尝试添加和删除ngRoute注入并切换文件的顺序，但无济于事。令人沮丧的是因为我几乎以完全相同的方式使用Angular 1.4.5而没有出现这些问题，但即使回去我也无法在这里复制相同的内容。但我的HTML中的{{test}}变量仍未呈现，而{{2 + 3}}等基本操作也不会。

编辑：这是我目前正在接收的原始错误消息的链接：http://tinyurl.com/zx3k85f

编辑2：我的HTML代码中调用应用程序和控制器的部分：

<html lang="en" ng-app="myApp">
    <body ng-controller="ctrl">

    </body>
</html>

我使用nunjucks进行HTML动态生成，虽然我已经改变了它的语法，因此它与Angular的双花括号没有冲突。

Answer 1

您不能将模块作为依赖项注入控制器，您应该从控制器DI内联阵列中删除'ngRoute'。

app.controller("ctrl", ["$scope", , function($scope) {

<强>更新

基本上真正的问题是你使用requirejs（懒惰）加载你的角度组件脚本，所以当你有ng-app="myApp"模块名称开始寻找myApp模块，并且模块没有加载因此它会引发错误。

所以我建议你不要使用ng-app指令在页面加载时启动角度。相反，你应该等到所有与角度加载相关的脚本，＆amp;然后使用angular.bootstrap方法懒洋洋地引导角度应用程序。

代码

$(document).ready(function() {
   requirejs(["app/app.js"], function(util) {
      angular.bootstrap(document, ['myApp']);
   });
});

Answer 2

ngRoute是一个需要在使用之前在模块配置部分配置的提供程序。在控制器中使用它没有任何意义。这里的版本将起作用：

angular.module('myApp', ['ngRoute']);

angular.module('myApp').controller("ctrl", ["$scope",function($scope) {

$scope.test = "It works!";

}]);

此外，您需要在计划呈现应用的html元素中使用指令ng-app=myapp来调用您的模块。

Angular：[$ injector：modulerr]无法实例化模块

2 个答案: