如何将组件模板与 ui-router AngularJS 一起使用

我在使用ui路由器时遇到问题。如果我突然从模板更改为组件，则所有路由都会中断。

app.module.js：

(function(){
    angular.module('jigup', [
        'ui.router',
        'map',
    ]);
})();

应用配置.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"
                })
        });     
})();

和索引.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>

路线给了我地图是所有显示的，但只

在必要时显示。

然后我尝试稍微更改代码：app.config.js：

..
.state("map", {
    url: "/map",
    component: 'mapComponent'
})
...

和添加的文件：

map.module.js：

(function(){
    angular.module('map', []);
})();

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

但是路由现在中断了 - 我得到空白页！

v0.4.2 或更早版本中不支持 ui-router 中的组件模板。您需要切换到当前的 RC 候选1.0.0-rc.1，就像这个可运行的 plnkr 示例中一样。

<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>`
})

AngularJS应用程序

相关内容

最新更新

热门标签：