1

我一直在尝试为一个项目设置基本的 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 的双花括号冲突。

4

2 回答 2

2

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

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

更新

基本上，真正的问题是您正在使用 requirejs(lazily) 加载您的角度组件脚本，因此当您ng-app="myApp"使用模块名称开始寻找myApp模块时，该模块尚未加载，因此会引发错误。

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

代码 

$(document).ready(function() {
   requirejs(["app/app.js"], function(util) {
      angular.bootstrap(document, ['myApp']);
   });
});
于 2016-01-08T21:50:51.747 回答
0

ngRoute 是一个提供者，在使用前需要在模块配置部分进行配置。在控制器中使用它没有任何意义。这里可以使用的版本：

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

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

$scope.test = "It works!";

}]);

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

于 2016-01-08T21:58:08.273 回答