Как изменить пути к файлу в приложении Angular?

Я рассматриваю это образец Angular приложения.

В файле index.html есть строки типа

Однако при ближайшем рассмотрении в проекте static нет папок.

Как это работает? Как Angular найти эти ссылки?

3 ответа

Angular не имеет к этому никакого отношения. Это сервер express, который заботится о путях. Взгляните на server/config.js. Вы увидите там staticUrl: '/static'.

Теперь откройте server/server.js (server.js - это script, который запускается до того, как что-то еще запускается в приложении, поэтому вся конфигурация выполняется внутри этого файла), а в строке линии 21 вы увидите require('./lib/routes/static').addRoutes(app, config);. Для этого требуется файл static.js, который инструктирует приложение использовать /static (упомянутый в файле config.js) в качестве пути для статических файлов, таких как файлы CSS и javascript.


Это явление на стороне сервера. В этом файле есть промежуточное ПО server/lib/routes/static.js:

строка: 9 app.use(config.server.staticUrl, express.static(config.server.distFolder));

Что это такое: если какой-либо HTTP-запрос запущен с config.server.staticUrl (whitch is /static для этого приложения), сервер пытается ответить ресурсом, который хранится в папке config.server.distFolder (которая является клиентом /dist для этого приложения).

Например: когда вы запрашиваете этот url /static/angular.js, промежуточное ПО пытается найти angular.js файл в client/dist/. Поскольку каталог client/dist отображается на URL-адрес, начинающийся с /static промежуточным программным обеспечением.


Когда этот 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, и если вы посмотрите на файл grunt, вы найдете всю конфигурацию grunt, которая сделает это возможным.

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

licensed under cc by-sa 3.0 with attribution.