Question

我是棱角分明的新人。我试图使用这个插件：   http://ngmodules.org/modules/angular-datepicker我经营过凉亭和   grunt build，所以我认为我已正确安装它们。

当我使用grunt服务启动应用程序时，我得到了简单的未被捕获   对象＆＃39;

我的一个障碍是，我并不完全熟悉应用程序的方式   已经成立。

我正在处理的dash.html页面有一个dash-directive.js，如下所示：
angular.module('sysomos.ads').
  directive('sysReportViewQuery', [
    function() {
    }
  ]).
  //...etc.
  directive('sysReportViewQueryToggle', [
    function() {
    }
  ]);
我想也许我可以像这样添加dateRangePicker：
angular.module('sysomos.ads',['dateRangePicker']).//etc
但这不起作用。

还有一个名为app.js的非常短的文件，我尝试添加   该插件也是：＆＃39;使用严格的＆＃39 ;;
angular.module('sysomos.ads', [
  'LocalStorageModule',
  'ngCookies',
    'ui.router',
    'ngAnimate',
    'mgcrea.ngStrap',
    'sys.common.api',
    'sys.common.auth',
    'dateRangePicker'
]);
但没有快乐。

我意识到我在问自己的应用是如何构建的，但我希望这是一个   常见的，可识别的设置。

[UPDATE：] 为了在这个插件安装下获得适当的基础，我已经卸载它并手动删除文件，然后回去并使用bower从bower.io自动安装datepicker。它可能是也可能不是同一个模块，它并不重要，我只是想安装SOME。

当我咕噜咕噜地建立时，它给了我这样的信息：

angular-datepicker未在您的文件中注入。请查看＆＃34; app \ public \ lib \ angular-datepicker＆＃34;对于您需要的文件，然后手动将其包含在您的文件中。

什么＆＃34;文件＆＃34;我手动包括它吗？如何？ bower.json？

我猜这可能是一个路径问题 - angular-datepicker中有几个子文件夹 - 如果能找到合适的文件，我会感到惊讶：

-angular-datepicker
  -app
    -scripts
       -datePicker.js
       -dateRange.js

但我不知道如何在bower.json文件中修复它 - 那里没有路径。

我的root bower.json看起来像这样：

{
  "name": "sysomos-ads",
  "version": "0.0.0",
  "dependencies": {
    "angular": "1.2.16",
    "angular-ui-router": "0.2.10",
    "angular-strap": "2.0.2",
    "angular-animate": "1.2.16",
    "angular-motion": "0.3.2",
    "angular-cookies": "1.2.16",
    "angular-local-storage": "0.0.5",
    "jquery": "1.11.0",
    "bootstrap": "3.1.1",
    "components-font-awesome": "4.1.0",
    "angular-datepicker": "~1.0.3"
  },
  "devDependencies": {
    "angular-mocks": "1.2.16",
    "angular-scenario": "1.2.16"
  }
}

angular-datepicker / bower.json看起来像这样：

{
  "name": "angular-datepicker",
  "license": "MIT",
  "version": "1.0.0",
  "ignore": [
    ".gitignore","README.md"
  ],
  "dependencies": {},
  "devDependencies": {
    "angular": "1.2.0-rc.2",
    "jquery": "~2.0.2",
    "angular-mocks": "~1.0.5",
    "angular-scenario": "~1.0.5",
    "angular-bootstrap": "~0.3.0"
  },
  "resolutions": {
    "angular": "1.2.0-rc.2"
  }
}

Answer 1

您的依赖项看起来不错。

首先在bower install --save angular-datepicker之后你有一个目录：

-angular-datepicker
  -app
  -dist
  -test

因此，您只需要添加 dist 目录中的2个文件：

index.js
index.css

这一行：

angular.module('sysomos.ads',['dateRangePicker']).//etc

您必须更改：

angular.module('sysomos.ads',['datePicker']).//etc

现在您可以使用here

之类的datePicker

Answer 2

尝试更改

dateRangePicker

到

datePicker

并确保添加此脚本文件

datePicker.js
dataRange.js

Answer 3

好像您正在使用某种方法在HTML中自动包含bower安装的脚本。在您正在安装日期选择器的情况下，它无法自动连接此依赖项。

我建议您找到 index.html 文件或默认布局文件。找到此文件后，您应该对上述脚本的引用进行硬编码。

<script src="/public/lib/angular-datepicker/app/scripts/datePicker.js"></script>
<script src="/public/lib/angular-datepicker/app/scripts/dateRange.js"></script>

值得注意的是 Bower 只是一种依赖管理工具。这是安装第三方库的便捷方式。一旦您在 bower.json 文件中指定了依赖关系（类似于 package.json ），您只需要运行bower install以便＆＃34;取＆＃34;那些依赖。

Bower 只会通过其注册的存储库下载依赖项，并将它们放在应用程序的目录中。在大多数应用程序中，您需要自己包含依赖项，例如上面提到的方法（在Javascript依赖项的情况下）。

指定 Angular 依赖项的方法看起来是正确的，因此如果您将上面的标记添加到index.html或布局模板中，一切都应该正常工作。

我希望这会有所帮助。

集成角度插件

3 个答案: