如何在Sails V1项目中集成Angular.js？技术实现方案咨询

我来帮你理清这个问题——Sails V1的生态已经和之前版本有不少变化，直接给你最实用的步骤：

1. 完全不需要用Bower了 #

Sails V1已经彻底弃用了Bower作为前端包管理工具，官方明确推荐只用npm来管理所有依赖，所以直接把Bower的选项排除就好。

2. npm安装是基础，但还不够 #

仅执行npm install angular --save只是把Angular.js包下载到了项目的node_modules目录里，Sails默认不会自动把第三方库文件加载到前端页面，所以还需要配置资源管道才能让前端访问到Angular。

3. 必须修改pipeline.js #

Sails V1默认用Grunt做资源管理，config/pipeline.js是控制静态资源注入逻辑的核心配置文件。你需要做这两步：

• 找到jsFilesToInject数组，把Angular的JS文件路径加在最前面（确保它在你的业务代码之前加载）：

  var jsFilesToInject = [
    // 先引入Angular核心库
    'node_modules/angular/angular.min.js',
    // 下面是项目默认的JS文件
    'js/dependencies/**/*.js',
    'js/**/*.js'
  ];
  

• 如果需要调试Angular源码，可以把node_modules/angular/angular.min.js.map也加到数组里（可选）。

4. 验证集成是否成功 #

修改完pipeline.js后，重启Sails服务，然后在任意视图文件（比如views/layout.ejs或页面视图）里加一段简单的测试代码：

<div ng-app>
  <p>1 + 2 = {{1+2}}</p>
</div>

如果页面正常显示1 + 2 = 3，说明集成成功了。

额外提示 #

• 如果你的Sails项目自定义了Grunt任务或者切换到了Webpack这类构建工具，配置方式会有所不同，但默认的Grunt+pipeline.js方案就是上面这样。
• 想要锁定Angular版本的话，可以在安装时指定版本号，比如npm install angular@1.8.2 --save，避免自动升级到不兼容的版本。

内容的提问来源于stack exchange，提问作者pech ronan