如何更改Angular应用程序中的文件path?
我正在看这个示例Angular应用程序 。
在index.html
文件中,有像这样的行
<script type="text/javascript" src="/static/angular.js"></script>
但是,仔细检查后,项目中没有任何文件夹被称为static
。
这个怎么用? 如何定位这些引用?
Angular与此无关。 它是照顾path的express
服务器。 看看server/config.js
。 你会在那里看到staticUrl: '/static'
。
现在打开server/server.js
(server.js是在应用程序中运行之前运行的脚本,因此所有configuration都在该文件中完成),并且在第21行,您将看到require('./lib/routes/static').addRoutes(app, config);
。 这需要static.js
文件,指示应用程序使用/static
(在config.js文件中提到)作为静态文件(如CSS和JavaScript文件)的path。
这是服务器端现象。 在这个文件server/lib/routes/static.js
有一个中间件:
行:9 app.use(config.server.staticUrl, express.static(config.server.distFolder));
这是做什么的:如果任何http请求从config.server.staticUrl
(对于这个应用来说是/static
)开始,服务器将尝试使用保存在config.server.distFolder
文件夹中的资源进行响应(这是客户端/ dist这个应用程序)。
例如:当你请求这个URL /static/angular.js
,中间件试图在client/dist/
findangular.js
文件。 因为client/dist
目录映射到中间件以/static
开头的url。
当HTML文件被浏览器处理时,布局引擎正在向服务器发出一个单独的HTTP请求来下载相关资源:
/static/angular.js
由于所有这些都是由服务器路由机制处理的,所以客户端代码中不一定要有一个名为static的文件夹。 你的例子是使用Node.js Express路由将静态路由映射到实际物理path 。
这是configuration静态路由的一段代码:
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)
和/静态映射到的目标文件夹:
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你会发现所有的gruntconfiguration,使这成为可能。
https://github.com/angular-app/angular-app/blob/master/client/gruntFile.js