CODEWITHSUNDEEP
angularjsangular-ui-routersingle-page-application
zilcuanu
zilcuanu

Reputation: 3715

does angularjs render the partials from the browser or from the web server

When rendering an angularjs app, does the partials get loaded from the web server or from the browser. When I try to debug using firebug, I can see the request being made to the web server for the html partials file. My assumption is that the partial file is always requested from the web server. Is my understanding right?

Also, is there a way where in the browser downloads all the app's html data on to the browser and then load the partials from the browser without making any network call? Is this possible and is there any option to get this done in AngularJs? Please let me know.

Upvotes: 0

Views: 358

Answers (2)

Donald
Donald

Reputation: 542

When you request a page in angularjs application, the first time angular make a request and web server send page (html, js and images) to browser with a response code 200. The second time, if nothing changed, server answer with response code 304, not send page and browser load page from cache, so, you need only one request to server in order to load each partial view. You can check it in network tab of browser developer tools. In production environment, in addition, grunt is able to minimize html, javascript and css reducing load time.

Upvotes: 0

Petr Averyanov
Petr Averyanov

Reputation: 9486

When you request page 'smth/smth2.html' angular first checks if this template is in $templateCache - if it is not presented HTTP request is made. If it will be loaded from server or from browser cache depends on page headers - by default it will be loaded from cache if presented. After request template is added to templateChache.

So the correct way to download all templates at once is to put them to $templateCache.

You can do it directly (so you wont have *.html files) or you can use tools to build your project i.e. grunt. (Tool will convert your *.html files to *.js)

Example - what we currently have in our project:

  1. Developer structure:
index.html
app.js
page.html

where in app.js you have app.state('page', templateUrl: 'page.html')

  • Http request for index.html
  • Http request for app.js
  • When user goes to #page Http request for page.html. Content of page.html added to templateCache.
  • When user goes again to #page content is taken from templateCache

  • If user press F5: templateCache is cleared, index.html will be reloaded from server, app.js will be reloaded from server, page.html will be reloaded from server or from browser cache depending on page headers and browser.

    1. Production structure:
index.html
app.js

where in app.js you have app.state('page', templateUrl: 'page.html') and app.module(...).run(function($templateCache.put("'page.html'", "<div>...</div>")))

  • Http request for index.html
  • Http request for app.js
  • When user goes to #page - no request for page.html.

Of course, you do not want to store all your html templates in one file - so to proceed from 1 to 2 you use grunt.

NB: requests for index.html and app.js can be cached by browser, adding the right headers to index.html and number to app.js excludes this. So in the end when you inspect your site source files in browsers you want to see:

  • index.html
  • app.#uniquecode#.js
  • angular.js

Upvotes: 1

Related Questions