如何在我的 Angular js 应用程序中正确设置 checklist-model 指令？答案

【问题标题】：how correctly set up checklist-model directive in my angular js app?如何在我的 Angular js 应用程序中正确设置 checklist-model 指令？
【发布时间】：2017-07-08 09:57:12
【问题描述】：

我是 node.js/grunt 世界的菜鸟，所以如果问题很愚蠢，我很抱歉......

我有一个与 yeoman/grunt 配合使用的 angular.js 项目，现在我想做的是包含一个指令，特别是this one，

但我不知道如何安装它！

我有：

-在我的命令提示符下使用命令 npm install checklist-model

-将脚本链接到 index.html 文件中

<script src='node_modules/checklist-model/checklist-model.js'></script>

-并在我的应用程序中添加依赖项

var app = angular.module('generaPreventivoApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'checklist-model'
]);

控制台给我以下错误：

  Error: [$injector:modulerr] Failed to instantiate module app due to:
[$injector:modulerr] Failed to instantiate module checklist-model due to:
[$injector:nomod] Module 'checklist-model' is not available

如何正确设置？

【问题讨论】：

脚本路径引用似乎不正确，因为它将尝试解析相对于 index.html 的 node_modules 路径，并且可能 node_modules 将是一个目录。 node_modules 文件夹中的 Angular 库的其余部分是什么？您可以使用 bower 或简单地将 js 文件复制到脚本文件夹中并相应地修改 index.html 中的路径。
路径是正确的。其他脚本链接到所以同根目录。

标签： angularjs node.js gruntjs yeoman checklist-model

【解决方案1】：

我尝试使用 bower 安装，所以：

bower install checklist-model --save

我的凉亭更新了：

{
"name": "genera-preventivo",
"version": "0.0.0",
"dependencies": {
"angular": "^1.4.0",
"bootstrap-sass-official": "^3.2.0",
"angular-animate": "^1.4.0",
"angular-cookies": "^1.4.0",
"angular-resource": "^1.4.0",
"angular-route": "^1.4.0",
"angular-sanitize": "^1.4.0",
"checklist-model": "^0.11.0"
},
"devDependencies": {
 "angular-mocks": "^1.4.0"
},
"appPath": "app",
"moduleName": "generaPreventivoApp",
"overrides": {
  "bootstrap": {
  "main": [
    "less/bootstrap.less",
    "dist/css/bootstrap.css",
    "dist/js/bootstrap.js"
  ]
}
}
}

index.html

    <script src="bower_components/checklist-model/checklist-model.js"></script>

APP.js

var app = angular.module('generaPreventivoApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'checklist-model'

])

【讨论】：