Question

这是我第一次尝试创建示例角度应用程序。在app.js我定义了以下内容 -

var app = angular.module('myTestApp', ['ngCookies',
                                       'ngResource',
                                       'ngRoute',
                                       'ngSanitize',
                                       'ngTouch']);

app.config(function ($routeProvider) {
 routeProvider
 .when('sample', {
    templateUrl: 'views/sample.html',
    controller: 'sampleCtrl'
  })
});

我为控制器创建了相应的sample.js，为模板创建了sample.html，为模型创建了sampleModel.js。在grunt控制台中，它在控制器和模型文件中未定义抛出app 这是控制器文件 -

 'use strict';  
app.controller('SampleCtrl', function ($scope,
                                       $location,
                                       $routeParams,
                                       SampleModel) {

 console.log('this is a test controller');
});

所有文件都包含在index.html中，并且资源正确加载，我通过chrome开发人员工具检查过，但我找不到它说应用程序未定义的原因。有什么我想念的吗？

Answer 1

由于它们是单独的文件，因此grunt / jshint不会知道该变量在其他文件中可用。相反，以这种方式使用它是最好的做法：

而是使用它：

angular.module('myTestApp')
 .controller('SampleCtrl', function ($scope,
                                       $location,
                                       $routeParams,
                                       SampleModel) {

 console.log('this is a test controller');
});

您可能在大多数其他代码中注意到的另一种常规模式，将代码包装在IIFE中。

(function() {
"use strict";

 var app = angular.module('myTestApp')
     app.controller('SampleCtrl', function ($scope,
                                           $location,
                                           $routeParams,
                                           SampleModel) {

     console.log('this is a test controller');
    });

})();

在这个应用程序中不会污染全局命名空间，也不会污染该功能。

如果您已注意到，我在使用[]时未使用angular.module()，则表示我们只是获取该模块。

因此，仅在您的应用中，它就会出现在[]和其他没有[]的文件中

 (function() {
    "use strict";

     var app = angular.module('myTestApp', ['ngCookies',
                                       'ngResource',
                                       'ngRoute',
                                       'ngSanitize',
                                       'ngTouch']);

    app.config(function ($routeProvider) {
        $routeProvider
         .when('sample', {
            templateUrl: 'views/sample.html',
            controller: 'sampleCtrl'
          })
     });

  })();

Answer 2

如果其他一切都很好，这一行会导致代码中出现问题 -

app.config(function ($routeProvider) {
 routeProvider

你应该改用 -

app.config(function ($routeProvider) {
$routeProvider

是的，如果var app无效，请尝试使用

angular.module('myTestApp')
 .controller('SampleCtrl',...

Angular js app未定义警告

2 个答案: