ngTemplate

템플릿 정의
클라이언트 캐시 템플릿

1. 
angular.module('myApp', [])

  .controller('myCtrl', ['$scope','$templateCache', function($scope,$templateCache){

       var tmp = '<h4>lovestory</h4>'

             + '<p> $templateCache </p>'

             + '<a href="http://www.baidu.com"> templateCache </a>';

       $templateCache.put('lovestory.html',tmp);               

   }])



2.script 

<script type="text/ng-template" id="lovestory.html">   //lovestory.html id

    <h4>lovestory</h4>

    <p> script </p>

    <a href="http://www.baidu.com"> templateCache </a>

</script>

 
 
템플릿 사용

<div ng-include="'lovestory.html'" class="well"></div>

//'lovestory.html'  id, 





angular.module('myApp', [])

    .directive('templateDemo', ['$log', function($log){

        return {

        restrict: 'A', // E = Element, A = Attribute, C = Class, M = Comment

        templateUrl: 'butterfly.html',

        replace: true,

        link: function($scope, iElm, iAttrs, controller) {}

        }

    }])

<div ng-bind-html="html"></div> //html html 

 
템플릿 찾기
클라이언트가 템플릿을 찾지 못하면 aax로 템플릿을 가져오고, 현재 페이지가 http://127.0.0.1/index.html인 경우 경로 http://127.0.0.1/lovestory.html 를 찾아서 템플릿을 가져온 후 $templateCache에 넣으면 $templateCache가 플러시되지 않아 잃어버리지 않습니다
 
이점
클라이언트에서 한 번에 모든 템플릿을 불러와서 서버 통신을 줄일 수 있습니다
 
$templateCache
$templateCache = $cacheFactory('template');
$templateCache.put()
$templateCache.get()
$templateCache.remove()
$templateCache.removeAll()
 
 
url:https://www.zybuluo.com/bornkiller/note/6023