This article describes the usage of AngularJS ng-template boarding method. Share it for your reference, as follows:
If you are an angular developer, you should be very familiar with ng-html2js. For angular directives, we often need to define templates (direct template/templateUrl). You can choose to put html pages in real web containers to board, or you can choose angular ng-template to put on the page of the view, or you can also write html into a js file and merge it with directive js file to publish.
For direct boarding in web containers.
This is very simple, just put it in the jetty, tomcat, iis, or node express public directory. There is nothing to say here, so let's skip it.
angular ng-template template:
The code is as follows:
<script type="text/ng-template" > Content of the template. </script>
This will be parsed at the compile of angular, and angular will put it in angular's $templateCache.
For $templateCache, as its name is the angular service for the cache of the template. With $http ajax request with $templateCache enabled, angular will first look for whether there is a cache for this url in $templateCache:
$('')
If there is a cache, angular will be directly retrieved from the cache and will not send ajax once. templateCache is enabled by default for all directives and templates.
This is because the pattern development handled by angular is very relevant. The SPA (single page application) we often mention, we push the display processing and other performance logic of the view to the front section, while the backend provides soap/restful service that is only related to data. This is unchanged for an application's business logic. You can share this logic in a graphical program regardless of whether the front end is a mobile app or a browser, or a winform gui, because it remains unchanged for the same business. Pushing the separation of the view to the respective client would be a better solution.
Go back to angular $templateCahce, for the separation of an application view, and then for the current application platform, resources such as html/js/css are static and preferably unchanged, so you can freely cache them in the client to reduce server interactions, and for greater performance pursuits, we can place this type of static resources on the reverse proxy or CDN in Nginx, so that our programs can obtain greater performance and expansion space.
Go back to angular's ng-html2js:
With the above understanding of $templateCache, it should be easy for you to understand the html2js method. Unlike ng-template, ng-template automatically adds $templateCache when compiled, and html2js is used to put $templateCache by us when developing.
('myApp', [])
.run(function($templateCache) {
$('',
'This is the content of the template'
);
});
As shown in the output above, type the html file into a js file.
You may have seen this in the angular unit test karma unit test, karma-ng-html2js-preprocessor, and if you also want to do this at build time, you can use grunt plugin grunt-html2js.
But the premise of using grunt plugin is the work flow you introduced in your project, so you can easily do it in a few lines of code. But if you are using maven or gradle as build like me, then you can try the blogger's maven plugin nghtml2js. The usage is as follows:
<plugin>
<groupId></groupId>
<artifactId>nghtml2js</artifactId>
<version>0.0.3</version>
<configuration>
<module></module>
<html>${}</html>
<extensions>
<param>tpl</param>
<param>html</param>
</extensions>
</configuration>
<executions>
<execution>
<id>nghtml2js</id>
<phase>generate-resources</phase>
<goals>
<goal>run</goal>
</goals>
</execution>
</executions>
</plugin>
I hope this article will be helpful to everyone's AngularJS programming.