Angular 사용 시 템플릿을 프리로드하는 방법이 있습니까?JS 라우팅?

Angular 사용 시 템플릿을 프리로드하는 방법이 있습니까?JS 라우팅?

Angular 앱이 로드되면 오프라인에서 사용할 수 있는 템플릿이 필요합니다.

다음과 같은 것이 이상적입니다.

$routeProvider
  .when('/p1', {
    controller: controller1,
    templateUrl: 'Template1.html',
    preload: true
  })

이것은 @gargc의 답변에 추가된 것입니다.

스크립트 태그를 사용하여 템플릿을 지정하지 않고 파일에서 템플릿을 로드하려면 다음과 같이 하십시오.

    myApp.run(function ($templateCache, $http) {
        $http.get('Template1.html', { cache: $templateCache });
    });

    myApp.config(function ($locationProvider, $routeProvider) {
        $routeProvider.when('/p1', { templateUrl: 'Template1.html' })
    });

템플릿 캐시 서비스 $templateCache가 있습니다.이 서비스는 Javascript 모듈에서 템플릿을 프리로드하는 데 사용할 수 있습니다.

예를 들어, 다음 문서에서 가져옵니다.

var myApp = angular.module('myApp', []);
  myApp.run(function($templateCache) {
  $templateCache.put('templateId.html', 'This is the content of the template');
});

html 파일에서 javascript 모듈을 미리 생성하는 grunt 태스크도 있습니다: grunt-angular-templates

다른 방법으로는 인라인템플릿을 사용하는 방법이 있습니다.예를 들어 index.html에는 다음과 같은 스크립트태그가 포함되어 있습니다.

<script type="text/ng-template" id="templates/Template1.html">template content</script>

는 루트 설정의 실제 URL과 같은 방법으로 나중에 템플릿의 주소를 지정할 수 있음을 의미합니다( ).templateUrl: 'templates/Template1.html')

Raman Savitski의 접근법에 따라 이 문제에 대한 해결 방법이 약간 개선되었다고 생각합니다만, 템플릿은 선택적으로 로드됩니다.실제로 다음과 같이 요청된 원래 구문을 사용할 수 있습니다.

$routeProvider.when('/p1', { controller: controller1, templateUrl: 'Template1.html', preload: true })

이렇게 하면 루트를 꾸밀 수 있기 때문에 다른 곳에서 다른 프리로드 설정을 갱신할 수고를 덜 수 있습니다.

시작 시 실행되는 코드는 다음과 같습니다.

angular.module('MyApp', []).run([
    '$route', '$templateCache', '$http', (function ($route, $templateCache, $http) {
        var url;
        for (var i in $route.routes) {
            if ($route.routes[i].preload) {
                if (url = $route.routes[i].templateUrl) {
                    $http.get(url, { cache: $templateCache });
                }
            }
        }
    })
]);

모듈 루트에 정의된 모든 템플릿을 프리로드합니다.

angular.module('MyApp', [])
.run(function ($templateCache, $route, $http) {
    var url;
    for(var i in $route.routes)
    {
      if (url = $route.routes[i].templateUrl)
      {
        $http.get(url, {cache: $templateCache});
      }
    }
})

스크립트 태그로 각 템플릿을 랩할 경우 다음과 같이 입력합니다.

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

모든 템플릿을 하나의 큰 파일로 연결합니다.Visual Studio 2013을 사용하는 경우 웹 기본 다운로드 - 마우스 오른쪽 버튼 메뉴를 추가하여 HTML 번들을 만듭니다.

$templatecache 서비스를 변경하기 위해 작성한 코드를 추가합니다.이것은 작은 코드 조각일 뿐이며, 동작합니다:-)

https://gist.github.com/vojtajina/3354046

루트 templateUrl은 다음과 같습니다.

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

언급URL : https://stackoverflow.com/questions/18714690/is-there-a-way-to-preload-templates-when-using-angularjs-routing