标签: angularjs-module

我想将这个https://gist.github.com/nblumoe/305205​​2包装在一个模块中.我刚刚将代码从TokenHandler更改为UserHandler,因为在每个api请求中我都想发送用户ID.

但是我在firebug控制台中找不到模块UserHandler.这是我的完整代码:http://dpaste.com/1076408/

相关部分:

angular.module('UserHandler').factory('UserHandler', function() {
    var userHandler = {};
    var user = 0;

    /...

    return userHandler;
});

angular.module('TicketService', ['ngResource', 'UserHandler'])
       .factory('Ticket', ['$resource', 'UserHandler',
                function($resource, userHandler){

    var Ticket = $resource('/api/tickets/:id1/:action/:id2',
    {
        id1:'@id'
    }, 

    { 
        list: {
            method: 'GET'
        }
    }); 

    Ticket = userHandler.wrapActions( Ticket, ["open", "close"] );

    return Ticket;
}]); 

知道为什么会这样吗？怎么解决？

在AngularJS中处理大型项目时,我发现我喜欢按功能组织代码.
这意味着当我有一些可识别的功能X(特别是如果它是可重用的)时,我创建目录X并将所有控制器,服务和属于该功能的其他部分放入其中.我还声明了一个名为X的新模块,并将目录X中的所有内容分配给该模块.

目录结构看起来像这样:

scripts/
  app.js
  controllers/
  services/
  directives/
  filters/
  X/
    controllers/
    services/
    directives/
    filters/

在app.js中有一个主模块声明:

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

X /中的所有控制器等都属于模块'X',这意味着我在这些文件中获取模块'X':

var X = angular.module('X');

我不知道怎么做是在哪里声明模块'X'？

我有一些想法:

• 我可以在其中一个控制器/服务/ ...中声明它并在其他控制器等中获取它但这听起来不对,因为我没有看到任何逻辑如何选择该控制器/服务/ ......等等,然后我必须注意将它包含在index.html之前.我发现这个想法很糟糕.
• 我可以把申报app.js,所以现在app.js看起来就像
  angular.module('myApp', ['X']); angular.module('X', [/*some dependencies could go here*/]);
  我觉得这主意更好比前一个,但是我不喜欢那个模块声明是目录X的外
• 在目录X/I中创建文件main.js并将模块X的声明放入其中.我必须小心在index.html中将此文件包含在目录X /中的其他文件之前.
  我最喜欢这个解决方案.

有没有更好的方法来做到这一点？

我一直在修改AngularJS,我已经建立了一小部分指令和服务,我想把它打包成一个JS文件,以便我可以在任何地方使用它们.

我有一些网站特定的设置,我的模块将需要API调用等等.我只是想知道Angular制作可配置模块的方法是什么.显然,我不想为每个网站修改我的可重用JS文件,因为这样做会破坏它的目的.看到每个网站的值保持不变,将每个函数调用作为参数传递它们似乎是一件非常麻烦的事情,而且我宁愿尽可能远离全局变量.

我已经搜索了很多问题以寻找我所寻求的答案,而我到目前为止找到的最接近的模式是让我的可重用模块依赖于一个名为"settings"之类的未包含的模块,然后定义该模块.页面的JS文件,允许可重用​​模块从中提取值.这是一个展示我的意思的例子.

这似乎是我的倒退.这有点像从全局值中获取函数pull值而不是将值作为参数传递.

这真的是最好的方法吗,还是有替代方案？

我不明白工作模块的依赖性.

我有3个模块,它们相互依赖,如图所示.

"App"模块包括"module1"和"module2"."module2"包括"核心"模块.关于plunker有来源.

angular.module("core", []).factory("HelloWorld", function() {
  return function () {
    alert('Hello World!')
  }
});

angular.module("module1", []).controller("main", function(HelloWorld){
  HelloWorld();
});

angular.module("module2", ["core"]);

angular.module("app", ["module1", "module2"]);

如果我将模块核心的服务注入模块"module1",它可以正常工作.但"核心"模块不依赖于模块"module1".为什么会这样？

我最近开始使用AngularJS,现在我正在构建我的应用程序的方式是这样的:

MainController.js

var app = angular.module('app', ['SomeController', 'MainController']);

app.controller('MainController', function ($scope) {
    // do some stuff
}

SomeController.js

var SomeController= angular.module('SomeController', []);

SomeController.controller('SomeController', function ($scope) {
    $scope.variable = "test";
    // do some otherstuff
}

我遇到的问题是模块之间没有共享范围.从MainController我不能得到变量"test"例如.

• 这是什么最好的做法？我是否将1个模块中的所有控制器存储在1个文件中？
• 我怎么能有1个页面有2个控制器并$scope在它们之间共享,或者可以将所有内容放在一个控制器中？

在我之前的问题中,我理解代码var app = angular.module('myApp', []);将模块连接app到视图myApp.

我想知道为什么我们[]在模块声明中有空数组.

什么是空数组？

在AngularJS中,是否可以创建私有控制器或服务,这些控制器或服务可以在它们所定义的模块中使用,但不能由它们注入的另一个模块使用.

例如,可以将PrivateController设为私有的Child模块:

angular.module('Child', [])

  .controller('PublicController', function ($scope){
    $scope.children = ['Bob', 'Sue'];

  })

  .controller('PrivateController',function ($scope){
    $scope.redHeadedStepChildren = ['Billy', 'Mildred'];

  })

angular.module('Parent', ['Child'])

<div ng-app="Parent">
    <div ng-controller='PublicController'>
        <div ng-repeat='child in children'>
                 {{child}}
        </div>
    </div>

    <div ng-controller='PrivateController'>
        <div ng-repeat='child in redHeadedStepChildren'>
                 {{child}}
        </div>
    </div>
</div>

这是一个工作示例,说明我如何设置一个拦截器,为每个请求附加一个身份验证令牌(这或多或少来自https://docs.angularjs.org/api/ng/service/ $ http)

angular.module("app", [])
.config(function ($httpProvider) {
  $httpProvider.interceptors.push("authInterceptor");
})
.factory("authInterceptor", function ($q) {
  return {
  // interceptor configuration here
  }
})

我config和我的run块中有很多其他的东西,它们调用和启动来自不同角度模块的服务,所以我想稍微整理一下.但是我知道在config块中依赖注入有一些非常具体的规则,我不太明白,这些都阻止我authInterceptor在一个单独的模块中定义我的工厂.由于config和run块中的其他逻辑调用应用程序中的其他模块,因此声明拦截器在那里看起来不合适.

这就是我想要做的:

angular.module("services.authInterceptor", [])
.factory("authInterceptor", function ($q) {
  return {
  // interceptor configuration here
  }
});

angular.module("app", [
 "services.authInterceptor"
]).config(function ($httpProvider, authInterceptor) {
  $httpProvider.interceptors.push("authInterceptor");
});

// Error: Unknown provider authInterceptor.

我尝试将它注入到run块中,但我想你不允许注入$httpProvider它:

angular.module("app", [
  "services.authInterceptor"
]).run(function ($httpProvider, authInterceptor) {
  $httpProvider.interceptors.push("authInterceptor");
});

// …

当我尝试运行业力测试运行器时,我从我的一个文件中得到以下错误,说我的库谷歌是未定义的???

   Chrome 36.0.1985 (Mac OS X 10.9.4) ERROR
   Uncaught ReferenceError: google is not defined
   at /Users/giowong/rails_project/doctible_pre_treatment/app/assets/javascripts/angular-google-maps.min.js:7

我的karma.conf.js文件

       // Karma configuration
module.exports = function(config) {
config.set({
// base path, that will be used to resolve files and exclude
basePath: '/Users/giowong/rails_project/doctible_pre_treatment/',

// testing framework to use (jasmine/mocha/qunit/...)
frameworks: ['jasmine'],

// list of files / patterns to load in the browser
files: [
  'app/assets/components/angular/angular.js',
  'app/assets/components/angular-mocks/angular-mocks.js',
  'app/assets/components/angular-resource/angular-resource.js',
  'app/assets/components/angular-payments/lib/angular-payments.js',
  'app/assets/components/ng-file-upload/angular-file-upload.js',
  'app/assets/components/ngDialog/js/ngDialog.js',
  'app/assets/components/angular-route/angular-route.js',
  'app/assets/components/angular-loading-bar/src/loading-bar.js',
  'app/assets/javascripts/angular/filters/widget-filters.js',
  'app/assets/components/angular-animate/angular-animate.js',
  'app/assets/javascripts/angular/directives/loader.js',
  'app/assets/javascripts/angular/directives/focus.js',
  'app/assets/javascripts/angular/directives/checkout-form.js',
  'app/assets/javascripts/angular/directives/provider-form.js',
  'app/assets/components/angular-ui-utils/ui-utils.js',
  'app/assets/components/angular-sanitize/angular-sanitize.js',
  'app/assets/components/angular-bootstrap/ui-bootstrap.js',
  'app/assets/components/angular-ui-map/ui-map.js',
  'app/assets/components/underscore/underscore.js',
  'app/assets/components/jquery-1.11.1.min.js', …

有没有办法知道哪些依赖项被注入我的Angular模块？

angular.module('myModule', [
  'ui.bootstrap'
])
.controller('myController', [function () {
  // var dependencies = Magic.dependencies;
  // console.log(dependencies);
}]);