angular ui-router求解

Question

    <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显示不出来，小白求解，谢谢！

Answer 1

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

Answer 2

app.config(function ($stateProvider, $urlRouterProvider, 
$resourceProvider) {
  $stateProvider
  // 首页
  .state('home', {
    url: '/home',
    templateUrl: '../pages/home.html'
  })
  // 应用列表
  .state('home.application_list', {
    url: '/apps',
    templateUrl: '../pages/application-list.html',
    controller: 'application_list'
  })
  // 默认路由
  $urlRouterProvider.otherwise('/home/fixpacks');
  $resourceProvider.defaults.stripTrailingSlashes = false;
});

楼主可以参考一下这份配置