CODEWITHSUNDEEP
javascriptangularjsnode.js
CodyBugstein
CodyBugstein

Reputation: 23352

How do you change file paths in Angular app?

I'm looking at this sample Angular application.

In the index.html file, there are lines like

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

However, upon closer inspection there are no folders in the project called static.

How does this work? How does angular locate these references?

Upvotes: 5

Views: 2008

Answers (3)

Faris Zacina
Faris Zacina

Reputation: 14274

When that HTML file is processed by the browser, the layout engine is making a separate HTTP request to the server to download the resource in question:

/static/angular.js

Since all of that is handled by the server routing mechanism there doesn't have to be a folder named static in client code. Your example is using Node.js Express routing which maps /static routes to actual physical paths.

Here is a piece of code that configures static routes:

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

The important parts are:

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

And the destination folder that /static maps to:

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

Per the documentation the dist folder contains the Grunt build results, and if you take a look at the gruntfile you will find all the grunt configuration that makes this possible.

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

Upvotes: 1

Lekhnath
Lekhnath

Reputation: 4635

This is a server side phenomenon. There is a middleware in this file server/lib/routes/static.js :

line : 9 app.use(config.server.staticUrl, express.static(config.server.distFolder));

What this does is : if any http request is started from config.server.staticUrl (whitch is /static for this app) the server tries to respond with the resource that are kept in a config.server.distFolder folder (which is client/dist for this app).

For example : when you request to this url /static/angular.js the middleware tries to find angular.js file in client/dist/. Because client/dist directory is mapped to the url which starts with /static by the middleware.

Upvotes: 1

Anubhav
Anubhav

Reputation: 7218

Angular has nothing to do with this. It is the express server which takes care of the paths. Take a look at server/config.js. You will see staticUrl: '/static' mentioned there.

Now open server/server.js (server.js is the script which runs before anything else runs in the app so all the configuration is done within this file) and on line 21 you will see require('./lib/routes/static').addRoutes(app, config);. This requires the static.js file which instructs the app to use /static (mentioned in the config.js file) as the path for static files such as CSS and javascript files.

Upvotes: 1

Related Questions