Question

我刚开始学习AngularJS，并有机会看到不同的角度例子。我有一个关于angular.module依赖关系的问题。我们如何才能知道要使用的依赖项的名称以及角度注入这些依赖项的位置（或哪个目录）？

例如

var clientApp = angular.module('clientApp', ['ui.bootstrap', 'hljs', 'common', 'smart-table',
    'bootstrap.fileField', 'toaster', 'ngAnimate', 'angulartics', 'angulartics.google.analytics']);

在上面的clientApp中他们使用了9个依赖项。我对用于注入像ui.bootstrap，hljs等依赖项的名称感到困惑。这些名称是否有任何标准约定？角度如何从lib文件夹中获取所需的模块？这是我的目录结构

+---js
¦       appctrl.js
+---lib
    +---components
        +---angular
        ¦       angular.js
        ¦       angular.min.js
        +---angular-animate
        ¦       angular-animate.js
        ¦       angular-animate.min.js
        +---angular-bootstrap
        ¦       ui-bootstrap-tpls.js
        ¦       ui-bootstrap-tpls.min.js
        ¦       ui-bootstrap.js
        ¦       ui-bootstrap.min.js

clientApp将确保获得所有模块。我想知道如何在不指定的情况下访问这些目录。

Answer 1

注入模块依赖项取决于您的代码。根据代码的需要注入一个或多个依赖项。如果您使用angular＆＃39; ngRoute＆＃39;重定向页面。将被注入。如果您正在注射＆＃39; ngRoute＆＃39;，您必须指定＆＃34; angular-route.js＆＃34;在脚本标题中。另一个例子是ngAnimate。需要动画时使用。当菜单出现或消失时，应使用此选项以使转换顺利进行。应该添加angular-animate.js。

ui-bootstrap是以角度形式开发的bootstrap组件列表。如果您打算使用以下URL中的任何指令，则将注入ui-bootstrap。 https://angular-ui.github.io/bootstrap/

Toaster是第三方库。另一个常见的是gridster。

有数百个模块可以注入角度模块。如上所述，仅注入代码中使用的模块。您必须将相关的js文件添加到HTML脚本部分。如果不添加js脚本，则角度代码将无法理解注入。

如果您希望了解更多详情，请告诉我

Answer 2

您注入模块的依赖项的命名方式与clientApp角度模块的命名方式相同，因为它们也是角度模块。

因此，在您的情况下，我可以通过传递＆＃39; clientApp＆＃39;进入我的模块的依赖数组。

至于clientApp需要的文件片段，这取决于您构建应用程序的方式。您可以在Immediately Invoked Function Expressions AKA IIFEs中包装所有JS，例如：

(angular.module(function () {}))()

然后你只需要像在任何javascript文件中那样在index.html中单独包含每个脚本。它们的名称大致与模块的声明方式相同。例如：

.service('sampleSvc', ['$window', 'modalSvc', function($window, modalSvc){})])

执行IIFE时，这些功能会在您的应用模块上注册，然后可以通过名称进行调用。在这种情况下，sampleSvc。

或者你可以深入了解构建工具的世界......就个人而言，我喜欢NPM来做所有事情，并为构建周期的每个部分编写了我自己的shell命令。我更喜欢与浏览器结合使用。但是，对于刚入门的人，您可能需要查看grunt和gulp。（有争议的意见时间：Gulp更快）

另外：+1来研究John Papa's Angular Styleguide的建议。如果我没有弄错的话，它会得到角度团队的认可。另请查看他的ng-demos以获取更有力的示例。

角度模块依赖关系的命名约定

2 个答案: