javascript - angular ui-router求解

问题描述

问 题

    <script type="text/javascript">
        var m1=angular.module('myApp',['ui.router']);

        m1. config(["$stateProvider","$urlRouterProvider",routeConfig])
          .controller("testCtrl", angular.noop);
          function routeConfig($stateProvider,$urlRouterProvider){
            $urlRouterProvider.otherwise("/app/page1");
            $stateProvider
            .state("app.page1",{
                url:"/app/page1",
                templateUrl:"page1.html"
            })
          }

    </script>

    <div ng-controller="testCtrl as ctrl">
        <ol>
        <li><a ui-sref="app.page1">app</a></li>
        </ol>
        <div ui-view></div>
    </div>
    <script type="text/ng-template" id="page1.html">
    this is page 1 for app.
    </script>

求问，这里为什么会报错，模版 page1.html显示不出来，小白求解，谢谢！

解决方案

ui-router中用.分割是表示子路由，你定义了app.p1了，但是你的app路由呢？这种用法不对吧？正确的用法应该是在父路由上app的html中使用<ui-view>定义不同id的ui-view，然后子路由中通过views map匹配对应的子页面。

这篇关于javascript - angular ui-router求解的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！