AngularJS가 처음에는 부분적으로로드 할 수있는 방법이 있습니까?

190

다음과 같은 경로 설정이 있습니다.

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'
        });
}]);

angularjs가 처음에는 부분을 모두 다운로드 할 수 있기를 원하지만 요청하지 않았습니다.

가능합니까?

angularjs 
— 란 지스 라마 찬드라
소스

답변:

270

예, 적어도 두 가지 해결책이 있습니다.

  1. 사용 script지침 ( http://docs.angularjs.org/api/ng.directive:script을 처음에로드 된 HTML에 파셜을 넣어)
  2. 필요한 경우 JavaScript 에서 $templateCache( http://docs.angularjs.org/api/ng.$templateCache )를 채울 수도 있습니다 ( $http전화 결과에 따라 )

방법 (2)를 사용하여 채우 $templateCache려면 다음과 같이하십시오.

$templateCache.put('second.html', '<b>Second</b> template');

물론 템플릿 컨텐츠는 $http호출 에서 올 수 있습니다 .

$http.get('third.html', {cache:$templateCache});

다음은 이러한 기술을 다루는 사람입니다. http://plnkr.co/edit/J6Y2dc?p=preview

— pkozlowski.opensource
소스
2
답장을 보내 주셔서 감사합니다. 스크립트 태그에 물건을 넣고 싶지 않기 때문에 템플릿 캐시 아이디어가 마음에 듭니다. 사용 방법? 설명서가 잘못되었습니다. 나는 그 의견 중 하나에서 바이올린을 보았습니다. 하지만 URL에서로드하고 싶습니다.
— Ranjith Ramachandra
댓글에 따라 답변을 업데이트
— pkozlowski.opensource
4
때로는 인라인 <script>태그를 서버 측 포함과 함께 사용합니다. 이를 통해 부분적인 부분을 조직적인 목적으로 별도의 파일로 유지할 수 있지만 모든 것을 하나의 문서로 제공합니다.
— Blazemonger
2
하나의 솔루션과 다른 솔루션을 선택할 때 속도가 향상되는지 알고 있습니까?
— Atav32
2
http 호출을 사용하여 템플릿을 캐싱하지만 문제는 캐시 된 템플릿의 이름이 URL이 될 수 있다는 것입니다. $ http.get ( 'app / correction / templates / group-correction-table.html', {cache : $ templateCache}); 그런 다음 템플릿을로드 할 때 마다이 추악한 이름을 사용해야합니다 :( 좋아요, 다음과 같이 <td ng-include = " 'app / correction / templates / group-correction-table.html' ">
— Shilan
25

Grunt를 사용하여 프로젝트를 빌드하는 경우 $ templateCache를 시작하는 Angular 모듈로 부분을 자동으로 어셈블하는 플러그인이 있습니다. 이 코드를 나머지 코드와 연결하고 시작할 때 하나의 파일에서 모든 것을로드 할 수 있습니다.

https://npmjs.org/package/grunt-html2js

— 칼 골드
소스
11
이 또한의 grunt-angular-templates것은 같은 종류의 작업을 수행하는 - npmjs.org/package/grunt-angular-templates - 치료를 작동
— 벤 Walding
인덱스 파일의 템플릿에서도 작동합니까? 색인 파일에 ng-view 및 ng-include가 있고 응용 프로그램을 표시하는 데 문제가 있습니다.
— 배트맨
16

Angular에 HTML 부분을 연결하고 등록하는 빌드 작업을 추가하십시오 $templateCache. ( 이 답변은 karlgold의 답변에 대한 자세한 변형입니다 . )

에 대한 툴툴 거리는 소리 , 사용 꿀꿀 - 각 템플릿을 . 들어 꿀꺽 , 사용 꿀꺽 - 각도 - templatecache .

아래는 설명 할 구성 / 코드 스 니펫입니다.

gruntfile.js 예 :

ngtemplates: {
  app: {                
    src: ['app/partials/**.html', 'app/views/**.html'],
    dest: 'app/scripts/templates.js'
  },
  options: {
    module: 'myModule'
  }
}

gulpfile.js 예 :

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 (이 파일은 빌드 작업에 의해 자동 생성됨)

$templateCache.put('app/views/main.html', "<div class=\"main\">\r"...

index.html

<script src="app/scripts/templates.js"></script>
<div ng-include ng-controller="main as vm" src="'app/views/main.html'"></div>
— 제임스로 루크
소스
2
안녕하세요 @ 제임스이 gulp 플러그인을 사용하고 있습니다. 모든 .html이 올바르게로드되지만 일부 대화 상자 플러그인 (ng-material을 사용하고 있음)의 일부로 html을 지정하려고하면 404가 발생합니다. ex-$ mdDialog.show ({controller : 'entityGridCtrl', templateUrl : 'user / partials / entityGrid.html '});
— Anand
내 앱 / 뷰 참조를 사용자 / 부분으로 대체 했습니까?
— James Lawruk
고마워. 나는이 부분 지문의 경로를 변경하고 있지 않다, 내 질문을 게시 - stackoverflow.com/questions/29399453/...
— 아난드
11

각 템플릿을 스크립트 태그로 감싸면 다음과 같습니다.

<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서비스 를 변경하기 위해 작성한 코드를 추가하십시오 -유일한 코드 조각이며 작동합니다 : Vojta Jina 's Gist

그것 $http.get번들 파일을 사용하도록 변경해야한다 :

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

경로 templateUrl는 다음과 같아야합니다.

        $routeProvider.when(
            "/about", {
                controller: "",
                templateUrl: "about.html"
            }
        );
— 사이먼 다우 데스 웰
소스
0

나는 단지 eco나를 위해 일하는 데 사용합니다. eco스프로킷은 기본적으로 지원됩니다. 에코 파일을 가져와 Javascript 템플릿 파일로 컴파일하는 Embedded Coffeescript의 약자이며 파일은 자산 폴더에있는 다른 js 파일처럼 취급됩니다.

당신이해야 할 모든이에 일부 HTML 코드를 확장 .jst.eco와 템플릿을 생성하고 작성하는 것입니다, 그리고 레일은 자동으로 컴파일하고 자산 파이프 라인을 사용하여 파일 및 템플릿이 정말 쉽게 액세스 할 수있는 방법을 제공합니다 : JST['path/to/file']({var: value});어디 path/to/file는 논리 경로를 기반으로하므로에 파일이있는 경우 다음 위치 /assets/javascript/path/file.jst.eco에서 템플릿에 액세스 할 수 있습니다.JST['path/file']()

angularjs와 함께 작동하게하기 위해 templateDir 대신 template 속성으로 전달하면 마술처럼 작동하기 시작합니다!

— 연필 점검
소스
이것이 질문에 대한 대답인지 확실하지 않으며 프로그래밍 언어를 변경하는 것이 과도합니다.
— xdhmoore
0

$ state를 컨트롤러에 전달한 다음 페이지가 컨트롤러에서 getter를로드하고 getter를 호출 할 때 $ state.go ( 'index') 또는로드하려는 부분을 호출 할 수 있습니다. 끝난.

— rj905
소스
-1

또 다른 방법은 HTML5의 응용 프로그램 캐시 를 사용 하여 모든 파일을 한 번 다운로드하여 브라우저의 캐시에 보관하는 것입니다. 위의 링크에는 훨씬 더 많은 정보가 포함되어 있습니다. 다음 정보는 기사에서 가져온 것입니다.

속성 <html>을 포함하도록 태그를 변경하십시오 manifest.

<html manifest="http://www.example.com/example.mf">

매니페스트 파일은 mime-type과 함께 제공되어야합니다 text/cache-manifest.

간단한 매니페스트는 다음과 같습니다.

CACHE MANIFEST
index.html
stylesheet.css
images/logo.png
scripts/main.js
http://cdn.example.com/scripts/main.js

응용 프로그램이 오프라인 상태가되면 다음 중 하나가 발생할 때까지 캐시 된 상태로 유지됩니다.

  1. 사용자는 귀하의 사이트에 대한 브라우저의 데이터 저장 공간을 비 웁니다.
  2. 매니페스트 파일이 수정되었습니다. 참고 : 매니페스트에 나열된 파일을 업데이트한다고해서 브라우저가 해당 리소스를 다시 캐시한다는 의미는 아닙니다. 매니페스트 파일 자체를 변경해야합니다.
— 브렌트 워시번
소스
1
안타깝게도이 기능은 현재 developer.mozilla.org/en-US/docs/Web/HTML/에서 더 이상 사용되지 않습니다.
— Lazy Coder
HTML 표준에 따르면, "이 기능은 웹 플랫폼에서 제거되고 있습니다. (이 과정은 오랜 시간이 걸립니다.") 제안 된 대체 서비스 워커는 여전히 "실험 기술"입니다 지금까지는 여전히 응용 프로그램 캐시가 내 응용 프로그램에서 잘 작동하기 때문에 계속 사용하고 있습니다.
— 브렌트 워시번
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.