// app.module.js
(function(){
"use strict";
var myApp = angular
.module("myApp", ["child"]);
myApp.constant("config", {
rootURL: "components/"
, version: "myApp1.0.0"
})
})();
// app.component.js
(function(){
"use strict";
// Define controller
function mainController(){
this.$onInit = function() {
var mainVM = this;
mainVM.parent = {
"lastName": "Smith"
, "firstName": "Jordan"
};
};
}
// Define component
var mainComponent = {
controller: mainController
, controllerAs: "mainVM"
};
// Register controller and component
angular.module("myApp")
.controller("mainController", mainController)
.component("mainComponent", mainComponent);
})();
// components/child.module.js
(function(){
"use strict";
var child = angular.module("child", []);
})();
// components/child.component.js
(function(){
"use strict";
// Define controller
function childController() {
this.$onInit = function() {
var vm = this;
vm.child = {
"firstName": "Jack"
}
};
// end of $onInit()
}
// Define component
var child = {
templateUrl: "components/child.html"
, controller: childController
, controllerAs: "vm"
, bindings: {
parent: "<"
}
};
// Register controller and component
angular.module("child")
.controller("childController", childController)
.component("child", child);
})();
<!DOCTYPE html>
<html>
<head>
<script src="//code.angularjs.org/snapshot/angular.js"></script>
<link rel="stylesheet" href="style.css">
<script src="app.module.js"></script>
<script src="app.component.js"></script>
<script src="components/child.module.js"></script>
<script src="components/child.component.js"></script>
</head>
<body ng-app="myApp" ng-controller="mainController as mainVM">
Parent: {{mainVM.parent.firstName}} {{mainVM.parent.lastName}}<br>
<child parent="mainVM.parent"></child>
</body>
</html>
<!-- components/child.html -->
Child: {{vm.child.firstName}} {{vm.parent.lastName}}
당신이 값이 주입-수있는 다른 모든 서비스처럼 될 것을
myApp.constant()를 사용하여 일정을 등록 할 때. 구성 요소의 컨트롤러에 삽입하여 사용할 수는 있지만 각도에 따라 이미 템플릿을 다운로드 (또는 다운로드하려고 시도)했습니다. 구성 요소를 등록 할 때 URL을 수정해야하지만 구성 요소를 등록 할 때는 주입 기능을 사용할 수 없습니다.
대신 $ http 인터셉터라는 기능을 살펴 보시기 바랍니다. 템플리트 요청을 찾고 URL을 수정하기위한 인터셉터를 작성할 수 있습니다.
https://docs.angularjs.org/api/ng/service/ $ HTTP
그때 인터셉터에서 해당 토큰을 찾아 토큰과 템플릿 URL을 쓰는 게 좋을 것. 예를 들어 :
그런 다음
templateUrl: '{tplBase}/myTemplate.html'
그 토큰을 찾고
myApp.config(function($httpProvider) {
//The interceptor factory is injectable, so inject your config constant here...
$httpProvider.interceptors.push(function(config) {
return {
'request': function(httpConfig) {
if (httpConfig.url.contains('{tplBase}')) {
httpConfig.url = httpConfig.url.replace('{tplBase}', config.rootUrl);
}
return httpConfig;
}
};
});
});
글쎄, 자녀 컨트롤러의 정수를 주입 :'기능 childController (구성) {' –