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

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

---

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

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가 처음에는 부분을 모두 다운로드 할 수 있기를 원하지만 요청하지 않았습니다.

가능합니까?

---

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

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

---

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

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

---

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>

---

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

<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"
            }
        );

---

If you use rails, you can use the asset pipeline to compile and shove all your haml/erb templates into a template module which can be appended to your application.js file. Checkout http://minhajuddin.com/2013/04/28/angularjs-templates-and-rails-with-eager-loading

---

I just use eco to do the job for me. eco is supported by Sprockets by default. It's a shorthand for Embedded Coffeescript which takes a eco file and compile into a Javascript template file, and the file will be treated like any other js files you have in your assets folder.

All you need to do is to create a template with extension .jst.eco and write some html code in there, and rails will automatically compile and serve the file with the assets pipeline, and the way to access the template is really easy: JST['path/to/file']({var: value}); where path/to/file is based on the logical path, so if you have file in /assets/javascript/path/file.jst.eco, you can access the template at JST['path/file']()

To make it work with angularjs, you can pass it into the template attribute instead of templateDir, and it will start working magically!

---

You can pass $state to your controller and then when the page loads and calls the getter in the controller you call $state.go('index') or whatever partial you want to load. Done.

---

Another method is to use HTML5's Application Cache to download all files once and keep them in the browser's cache. The above link contains much more information. The following information is from the article:

Change your <html> tag to include a manifest attribute:

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

A manifest file must be served with the mime-type text/cache-manifest.

A simple manifest looks something like this:

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

Once an application is offline it remains cached until one of the following happens:

1. The user clears their browser's data storage for your site.
2. The manifest file is modified. Note: updating a file listed in the manifest doesn't mean the browser will re-cache that resource. The manifest file itself must be altered.

참고URL : https://stackoverflow.com/questions/12346690/is-there-a-way-to-make-angularjs-load-partials-in-the-beginning-and-not-at-when