Yeoman Angular 生成器未正确配置 brackets.io

Question

我正在寻求帮助，以便使用 Yeoman 生成的 Angular 种子应用程序在 brackets.io 中运行实时预览。

Angular 项目的目录结构有一个包含程序代码的 app 子目录，它具有所需的入口点 index.html。

这个index.html指的是bower_components文件夹作为相对地址，也有app文件夹下js子目录的相对链接

我正在使用 brackets.io 的实时预览功能，但无法使用默认相对路径找到 Angular 和 Bootstrap。

我已经使用了内部网络浏览器，以及我设置的 IIS 应用程序（它本身运行良好），当实时预览启动时，这两个应用程序都出现了同样的问题。

作为解决方法，我已将这些更改为绝对路径，但我正在寻找未找到相对路径的可能原因。

这似乎特定于 brackets.io 的实时预览，而不是在生成的代码中。

原始生成代码：

<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-messages/angular-messages.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<!-- endbower -->
<!-- endbuild -->

    <!-- build:js({.tmp,app}) scripts/scripts.js -->
    <script src="scripts/app.js"></script>
    <script src="scripts/controllers/main.js"></script>
    <script src="/.bowerrc"></script>
    <!-- endbuild -->

我的解决方法：

<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="/bower_components/angular-animate/angular-animate.js"></script>
<script src="/bower_components/angular-cookies/angular-cookies.js"></script>
<script src="/bower_components/angular-messages/angular-messages.js"></script>
<script src="/bower_components/angular-resource/angular-resource.js"></script>
<script src="/bower_components/angular-route/angular-route.js"></script>
<script src="/bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="/bower_components/angular-touch/angular-touch.js"></script>
<!-- endbower -->
<!-- endbuild -->

    <!-- build:js({.tmp,app}) scripts/scripts.js -->
    <script src="/app/scripts/app.js"></script>
    <script src="/app/scripts/controllers/main.js"></script>
    <script src="/.bowerrc"></script>
    <!-- endbuild -->

Answer 1

首先，如果您使用的是 yeoman angular 生成器，那么您将是运行 grunt "serve" 任务，它将处理 [=29= 下定义的所有任务（包括 livereload） ] 你的 gruntfile 部分。到目前为止，您的 Brackets 没有任何作用。

如果你没有使用grunt，而你使用的是bracket的livereload，那么你必须做2个任务。

1.) 更新 .bowerrc 如下

 {
   "directory": "app/bower_components"
 }

现在你所有的 bower 依赖项都将转到指定的目录，这里是你想要的进入 "app" 文件夹。

2.) 现在您只需托管您的应用程序文件夹，您的浏览器就会找到所有依赖项。无需更改index.html

注意：同样，Yeoman 是独立的，由 "angular-generator" 生成的 grunt 文件处理不同的任务。 Brackets 在这里没有任何作用或依赖性。 当你用括号 "Live Preview" 时，它只有运行 yr index.html 文件，这样就无法访问应用程序文件夹外的 yr 内容

Yeoman Angular 生成器未正确配置 brackets.io

Yeoman Angular Generator not configured properly for brackets.io

twitter-bootstrap

angularjs

yeoman

adobe-brackets