Question

在index.html文件中，有像

这样的行

<script type="text/javascript" src="/static/angular.js"></script>

但是，经过仔细检查，项目中没有名为static的文件夹。

这是如何工作的？角度如何定位这些参考？

Answer 1

Angular与此无关。它是express服务器来处理路径。看看server/config.js。你会看到那里提到的staticUrl: '/static'。

现在打开server/server.js （server.js是在应用程序中运行任何其他内容之前运行的脚本，因此所有配置都在此文件中完成）和第21行您会看到require('./lib/routes/static').addRoutes(app, config);。这需要static.js文件，该文件指示应用程序使用/static （在config.js文件中提到）作为静态文件（如CSS和javascript文件）的路径。 / p>

Answer 2

当浏览器处理该HTML文件时，布局引擎正在向服务器发出单独的HTTP请求以下载相关资源：

/static/angular.js

由于所有这些都是由服务器路由机制处理的，因此不必是客户端代码中名为static的文件夹。您的示例是使用Node.js Express路由，将静态路由映射到实际物理路径。

这是一段配置静态路由的代码：

https://github.com/angular-app/angular-app/blob/master/server/config.js

重要的部分是：

staticUrl: '/static', // The base url from which we serve static files (such as js, css and images)

/ static映射到的目标文件夹：

distFolder: path.resolve(__dirname, '../client/dist'), // The folder that contains the application files (note that the files are in a different repository) - relative to this file

根据文档，dist文件夹包含Grunt构建结果，如果您查看gruntfile，您将找到使这成为可能的所有grunt配置。

https://github.com/angular-app/angular-app/blob/master/client/gruntFile.js

Answer 3

这是服务器端现象。此文件server/lib/routes/static.js中有一个中间件：

行：9 app.use(config.server.staticUrl, express.static(config.server.distFolder));

这样做是：如果从config.server.staticUrl启动任何http请求（此应用程序为/static），服务器会尝试使用config.server.distFolder中保存的资源进行响应文件夹（这个应用程序的客户端/ dist）。

例如：当您请求此网址/static/angular.js时，中间件会尝试在angular.js中找到client/dist/文件。因为client/dist目录被映射到中间件以/static开头的url。

如何在Angular应用程序中更改文件路径？

3 个答案: