다음과 같은 경로 설정이 있습니다.
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가 처음에는 부분을 모두 다운로드 할 수 있기를 원하지만 요청하지 않았습니다.
가능합니까?
답변
예, 적어도 두 가지 해결책이 있습니다.
- 사용
script
지침 ( http://docs.angularjs.org/api/ng.directive:script을 처음에로드 된 HTML에 파셜을 넣어) - 필요한 경우 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"
}
);
답변
레일을 사용하는 경우 자산 파이프 라인을 사용하여 모든 haml / erb 템플릿을 컴파일하여 application.js 파일에 추가 할 수있는 템플릿 모듈로 만들 수 있습니다. 체크 아웃
http://minhajuddin.com/2013/04/28/angularjs-templates-and-rails-with-eager-loading
답변
나는 단지 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 속성으로 전달하면 마술처럼 작동하기 시작합니다!
답변
$ state를 컨트롤러에 전달한 다음 페이지가 컨트롤러에서 getter를로드하고 getter를 호출 할 때 $ state.go ( ‘index’) 또는로드하려는 부분을 호출 할 수 있습니다. 끝난.