资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

AngularJSui-router-创新互联

原文地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/angularjs-ui-router/

创新互联凭借在网站建设、网站推广领域领先的技术能力和多年的行业经验,为客户提供超值的营销型网站建设服务,我们始终认为:好的营销型网站就是好的业务员。我们已成功为企业单位、个人等客户提供了做网站、成都网站设计服务,以良好的商业信誉,完善的服务及深厚的技术力量处于同行领先地位。

ui-router是angularjs的一个客户端的单页应用路由解决方案,它提供了一种类似一个层次树的状态来方便的实现各个页面间的跳转。

Q:路由是怎么显示各个模板?

当ui-routr状态被激活时,它的模板会自动插入到父状态对应的模板中包含ui-view属性的元素内部。如果是顶层状态,那么它的父模板就是index.html。

Q:激活路由状态有三种方法:

1.调用$state.go()方法;

2.点击包含ui-sref指令的链接;

3.导航到与状态相关联的 url。

使用ui-router的准备工作:

     (1)下载angular-ui-router.js

     (2)在index.html中下载angular-ui-router.js

     (3)把ui.router依赖注入

例:

 

   

   

   

   ...

   ...

例一、嵌套的状态和视图

(1)首先完成上边准备工作的设置

(2)然后添加一个ui-view指令到

   

   

   State 1

   State 2

(3)可能你会注意到我们还添加了ui-sref指令,另外为了管理状态转换,如果对应的状态有一个URL,这个指令还会自动生成链接的href属性,这些内容将会插入index.html的ui-view,注意:嵌套状态和视图的关键就是它们拥有自己的ui-view。

State 1


Show List

State 2


Show List

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

List of State 1 Items

List of State 2 Things

(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许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


标题名称:AngularJSui-router-创新互联
分享网址:http://cdkjz.cn/article/goodj.html
返回首页 了解更多建站资讯
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220