Analysis on the usage of Angularjs ng-template boarding method _angularjs

The example of this article describes the Angularjs ng-template homestay usage. Share to everyone for your reference, specific as follows:

If you are a angular developer, you should be familiar with NG-HTML2JS. For angular instructions, we often need to define templates (Directive Template/templateurl), you can choose to speak HTML page in a real Web container, or you can choose angular ng-template Placed on the view page, or can also speak HTML into a JS file and directive JS files merged together to publish.

For direct boarding in the Web container.

This is simple, put directly in the Jetty,tomcat,iis, or node Express public directory. There's nothing more to say here, so we skip.

Angular ng-template Template:

The code is as follows:

<script type= "Text/ng-template" id= "/tpl.html" >
   Content of the template.
</script>

This will be resolved at the compile time of angular, and angular will put it in angular $templatecache.

For $templatecache, such as its name, this is the angular service for caching the template. When $templatecache's $http Ajax request is enabled, angular will first look in $templatecache to see if there is a cache for this URL:

$templateCache. Get (' templateid.html ')

If there is a cache, the angular will be fetched directly from the cache and will not be sent once Ajax. Templatecache is enabled for all directives and templates angular by default.

This is related to the pattern development that angular is dealing with. We often refer to the SPA (single page application) We push the display logic of the view to the front, and the back end provides only the data-related soap/restful service This does not change the business logic of processing data for an application business logic that you can share in a graphical program, regardless of whether the front-end is mobile app or browser, or WinForm GUI, because for the same business this is the same. It would be a better solution to push view separation to the respective client.

Back to angular $templateCahce, for the separation of an application view, and then for the current application platform, html/js/css such resources are static, preferably unchanged, then you can freely cache in the client, reduce server interaction, And for greater performance pursuit, we can put this kind of static resources in the Nginx here reverse proxy or CDN, so that our program to achieve greater performance and expansion of space.

Back to Angular's ng-html2js:

With the above understanding of $templatecache, then you should be very easy to understand the way html2js, and ng-template different is ng-template angular in compile when automatically joined $templatecache , HTML2JS is when we use build ourselves to put $templatecache in development.

Angular.module (' myApp ', [])
 . Run (function ($templateCache) {
   $templateCache. Put (' templateid.html ',
     ' This is the content of the template '
   );
 

Like the output above, the HTML file is typed into a JS file.

You may have seen it in angular unit test karma, Karma-ng-html2js-preprocessor, and if you want to do so at build time, you can use grunt plugin Grunt-html2js.

But the premise of using grunt plugin is that you introduce the work flow of the grunt build in your project, and you can easily handle a few lines of code in Gruntfile.js. But if you're using Java maven or Gradle as a build, you can try the blogger's Maven plugin Nghtml2js. The use of the following methods:

<plugin>
  <groupId>com.github.greengerong</groupId>
  <artifactid>nghtml2js</ artifactid>
  <version>0.0.3</version>
  <configuration>
    <module> demo.template</module>
     
 

I hope this article will help you to Angularjs program design.