如何在ui-router AngularJS中使用组件模板? [英] How to use component templates with ui-router AngularJS?
问题描述
我在使用ui-router时遇到问题.如果我从模板更改为组件，所有路由都会突然中断.
I am experiencing problems with ui-router. If I change from template to component suddenly all routing breaks.
app.module.js:
app.module.js:
(function(){
angular.module('jigup', [
'ui.router',
'map',
]);
})();
app.config.js
app.config.js
(function(){
angular
.module('jigup')
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when("", "/map");
$stateProvider
.state("map", {
url: "/map",
template: '<span style="width:100px" ui-sref="map"><a href="">map</a></span><span style="width:100px" ui-sref=".about"><a href="">About</a></span> this is map <div ui-view=""></div>'
})
.state("map.about", {
url: "/about",
template: "about page"
})
});
})();
和index.html:
and index.html:
<html lang="en" >
<head>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/0.10.0/lodash.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-google-maps/2.4.1/angular-google-maps.js"></script>
</head>
<body ng-app="jigup">
<div data-ui-view=""></div>
<script type="text/javascript" src="<?php echo base_url('app/app.module.js'); ?>"></script>
<script type="text/javascript" src="<?php echo base_url('app/app.config.js'); ?>"></script>
</body>
</html>
路由使我可以始终显示地图，但仅在必要时显示.
And routing gives me that map is allways displayed but about only if neccessary.
然后我尝试更改一下代码: app.config.js:
I then tried to change code a bit: app.config.js:
..
.state("map", {
url: "/map",
component: 'mapComponent'
})
...
和添加的文件:
map.module.js:
map.module.js:
(function(){
angular.module('map', []);
})();
map.component.js:
map.component.js:
(function(){
angular.module('map')
.component('mapComponent', {
template: '<span style="width:100px" ui-sref="map"><a href="">map</a></span><span style="width:100px" ui-sref=".about"><a href="">About</a></span> this is map <div ui-view=""></div>',
});
})();
但是路由现在中断了-我的页面空白！
but routing now breaks - I get blank page!
推荐答案
v0.4.2或更早版本不支持ui-router中的组件模板.您需要像下面的可运行的plnkr示例那样，切换到当前的RC候选1.0.0-rc.1.
Component templates in ui-router are not supported in v0.4.2 or earlier. You need to switch to the current RC candidate 1.0.0-rc.1 like in this runnable plnkr example.
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-rc.1/angular-ui-router.js"></script>
AngularJS应用程序
var myApp = angular.module("myApp", ['ui.router']);
myApp.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when("", "/PageTab");
$stateProvider
.state("PageTab", {
url: "/PageTab",
templateUrl: "mainTemplate.html"
})
.state("PageTab.about", {
url: "/about",
component: "about"
})
});
myApp.component('about', {
template: `<div>
<div>
<h1>About page</h1>
</div>
</div>`
})
这篇关于如何在ui-router AngularJS中使用组件模板?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
