Is there a way to make AngularJS load partials in the beginning and not at when needed

Question

I have a route setup like this   var myApp   angular module  myApp            config    routeProvider   function   routeProvider         routeProvider          when   landing                 templateUrl    landing-partial               controller  landingController                     when    wkspId query                 templateUrl    query-partial               controller  queryController                     otherwise               redirectTo    landing                     I want to be able to make angularjs download both the partials in the beginning and not when requested   Is it possible

User · Answer

If you wrap each template in a script tag, eg:

<script id="about.html" type="text/ng-template">
<div>
    <h3>About</h3>
    This is the About page
    Its cool!
</div>
</script>

Concatenate all templates into 1 big file. If using Visual Studio 2013, download Web essentials - it adds a right click menu to create an HTML Bundle.

Add the code that this guy wrote to change the angular $templatecache service - its only a small piece of code and it works: Vojta Jina's Gist

Its the $http.get that should be changed to use your bundle file:

allTplPromise = $http.get('templates/templateBundle.min.html').then(

Your routes templateUrl should look like this:

        $routeProvider.when(
            "/about", {
                controller: "",
                templateUrl: "about.html"
            }
        );

User · Answer

You can pass  state to your controller and then when the page loads and calls the getter in the controller you call  state go  index   or whatever partial you want to load   Done

User · Answer

Yes  there are at least 2 solutions for this    Use the script directive  http   docs angularjs org api ng directive script  to put your partials in the initially loaded HTML You could also fill in  templateCache  http   docs angularjs org api ng  templateCache  from JavaScript if needed  possibly based on result of  http call    If you would like to use method  2  to fill in  templateCache you can do it like this    templateCache put  second html     lt b gt Second lt  b gt  template      Of course the templates content could come from a  http call    http get  third html    cache  templateCache      Here is the plunker those techniques  http   plnkr co edit J6Y2dc p preview

User · Answer

I just use eco to do the job for me  eco is supported by Sprockets by default  It s a shorthand for Embedded Coffeescript which takes a eco file and compile into a Javascript template file  and the file will be treated like any other js files you have in your assets folder   All you need to do is to create a template with extension  jst eco and write some html code in there  and rails will automatically compile and serve the file with the assets pipeline  and the way to access the template is really easy  JST  path to file    var  value    where path to file is based on the logical path  so if you have file in  assets javascript path file jst eco  you can access the template at JST  path file      To make it work with angularjs  you can pass it into the template attribute instead of templateDir  and it will start working magically

User · Answer

If you use rails  you can use the asset pipeline to compile and shove all your haml erb templates into a template module which can be appended to your application js file  Checkout http   minhajuddin com 2013 04 28 angularjs-templates-and-rails-with-eager-loading

User · Answer

Another method is to use HTML5 s Application Cache to download all files once and keep them in the browser s cache   The above link contains much more information   The following information is from the article   Change your  lt html gt  tag to include a manifest attribute    lt html manifest  http   www example com example mf  gt    A manifest file must be served with the mime-type text cache-manifest   A simple manifest looks something like this   CACHE MANIFEST index html stylesheet css images logo png scripts main js http   cdn example com scripts main js   Once an application is offline it remains cached until one of the following happens    The user clears their browser s data storage for your site  The manifest file is modified  Note  updating a file listed in the manifest doesn t mean the browser will re-cache that resource  The manifest file itself must be altered

User · Answer

If you use Grunt to build your project  there is a plugin that will automatically assemble your partials into an Angular module that primes  templateCache   You can concatenate this module with the rest of your code and load everything from one file on startup   https   npmjs org package grunt-html2js

User · Answer

Add a build task to concatenate and register your html partials in the Angular  templateCache   This answer is a more detailed variant of karlgold s answer    For grunt  use grunt-angular-templates  For gulp  use gulp-angular-templatecache   Below are config code snippets to illustrate   gruntfile js Example   ngtemplates      app                        src    app partials    html    app views    html        dest   app scripts templates js         options        module   myModule          gulpfile js Example   var templateCache   require  gulp-angular-templatecache    var paths     app partials  html    app views  html     gulp task  createTemplateCache   function      return gulp src paths       pipe templateCache  templates js     module   myModule   root  app views          pipe gulp dest  app scripts               templates js  this file is autogenerated by the build task    templateCache put  app views main html     lt div class   main   gt  r       index html   lt script src  app scripts templates js  gt  lt  script gt   lt div ng-include ng-controller  main as vm  src   app views main html   gt  lt  div gt

[angularjs] Is there a way to make AngularJS load partials in the beginning and not at when needed?

Examples related to angularjs