如何设置 bower 包依赖项？

Question

我正在创建一个名为 X 的 bower 包，它依赖于 angular-local-storage。我在 bower.json 中保存了 angular-local-storage。

我的模块声明为： angular.module('X', ['LocalStorageModule']);

服务为：

angular
  .module('X')
  .service('XService', XService);

function XService($resource, $q, $window, LocalStorageService) {...}

当我在另一个项目中使用 bower 安装包 X 时，LocalStorageModule 找不到。

如何管理此依赖项？

编辑：错误是：

Unknown provider: LocalStorageServiceProvider <- LocalStorageService <- XService

Answer 1

将 'LocalStorageModule' 添加到主模块的依赖项列表中。
从 dist 目录中包含 angular-local-storage.js（或 angular-local-storage.min.js）你的 index.html，包括 Angular 本身。

更多

我建议您这样布置您的工厂或服务：

.service('ServiceName', ['$log','OtherService', function($log, OtherService){
   var serviceInstance = {};
   //stuff
   return serviceInstance;
}]);

这有比您绝对需要的更多的样板，但它是缩小安全的并且保持您的命名空间干净。

Answer 2

为了构建 bower 包，您需要确保遵循以下步骤：

凉亭包：X

使用以下（最小）配置准备 bower.json：

{
  "name": "your-package-x",
  "version": "1.0.0",
  "main": "dist/your-package-x.min.js",
  "dependencies": {
    "angular": "1.5.0",
    "angular-local-storage": "2.0.7"
    ...
  }
}

将所有包的文件构建到 dist/your-package-x.min.js（使用您最喜欢的构建工具）
如果包有 HTML 个模板，您应该构建一个 templateCache 文件并将其附加到构建的文件中（使用您的构建工具）：

一个。以 grunt 为例：https://www.npmjs.com/package/grunt-angular-templates

b。以 gulp 为例：https://www.npmjs.com/package/gulp-angular-templatecache
发布到 bower

外部项目

将 your-package-x 依赖添加到 bower.json:

{
  "name": "main-project",
  "version": "1.0.0",
  "dependencies": {
    "your-package-x": "path to repo or version"
    ...
  }
}

安装 bower deps

注入 package-x 及其依赖项：

<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-local-storage/dist/angular-local-storage.min.js"></script>
<script src="bower_components/dist/your-package-x/dist/your-package-x.min.js"></script>

==> 或使用构建工具为您完成（查找 wiredep）

希望这份快速指南对您有所帮助。

如何设置 bower 包依赖项？

How to set a bower package dependencies?

package

angularjs

bower

凉亭包：X

外部项目