AngularJSui-router-创新互联

（4）接下来，我们添加一些子模板。这些模板将会插入它们的父模板的ui-view。

List of State 1 Items

  ` item `

List of State 2 Things

  ` thing `

（5）最后，我们用$stateProvider来把所有的state连成一条线，像下面这样设置你的状态：

myApp.config(function($stateProvider, $urlRouterProvider) {

  //

  // For any unmatched url, redirect to /state1

  $urlRouterProvider.otherwise("/state1");

  //

  // Now set up the states

  $stateProvider

   .state('state1', {

    url:"/state1",

    templateUrl:"partials/state1.html"

   })

   .state('state1.list', {

    url:"/list",

    templateUrl:"partials/state1.list.html",

    controller:function($scope) {

     $scope.items= ["A", "List", "Of", "Items"];

    }

   })

   .state('state2', {

    url:"/state2",

    templateUrl:"partials/state2.html"

   })

   .state('state2.list', {

    url:"/list",

    templateUrl:"partials/state2.list.html",

    controller:function($scope) {

     $scope.things= ["A", "Set", "Of", "Things"];

    }

   });

});

这些只是一些简单的使用，具体的我们可以根据自己的需要改动。

例二、多个的命名视图

这是ui-router的另一个强大的功能，可以在一个模板页面中有多个ui-view。

（1）首先完成上边准备工作的设置

（2）添加一个或多个ui-view到你的应用并命名好。

   Route 1

   Route 2

（3）在config中设置你的状态

myApp.config(function($stateProvider) {

  $stateProvider

   .state('index', {

    url:"",

    views: {

     "viewA": { template:"index.viewA" },

     "viewB": { template:"index.viewB" }

    }

   })

   .state('route1', {

    url:"/route1",

    views: {

     "viewA": { template:"route1.viewA" },

     "viewB": { template:"route1.viewB" }

    }

   })

   .state('route2', {

    url:"/route2",

    views: {

     "viewA": { template:"route2.viewA" },

     "viewB": { template:"route2.viewB" }

    }

   })

});

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。