5-4 Angular ui-router基本使用

ui-router基本使用

ngRoute 官方路由和 ui-router 第三方社区区别

• UI-Router被认为是AngularUI为开发者提供的最实用的一个模块，它是一个让开发者能够根据URL状态或者说是'机器状态'来组织和控制界面UI的渲染，而不是仅仅只改变路由（传统AngularJS应用实用的方式）。

ui-router优点:

• 该模块为开发者提供了很多最视图（view）额外的控制。开发者可以创建嵌套分层的视图、在同一个页面使用多个视图、让多个视图控制某个视图等更多的功能。即使是非常复杂的web应用，UI-Router也可以极佳地驾驭。

安装

$ bower install angular-ui-router

---

1.导入文件, 注入模块 ui.router

2.绑定视图

• 和ngRoute一样，为特定状态指定的模板将会放在
  元素中。在这些模板中也可以包含自己的ui-view,这就是在同一个路由下实现嵌套视图的方法。

3.配置路由

• 要定义一个路由，与传统的方法相同：使用.config方式，但使用的不是stateProvider。监听状态改变使用state(), 而不是when()

app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
        //代码中路由切换不是监听锚点, 监听state
        $stateProvider.state('home', {
            url:'/home', //url显示地址
            template:'
首页
'
        }).state('my', {
            url:'/my',
            template:'
关于我们
'
        }).state('contact', {
            url:'/contact',
            template:'
联系我们
'
        });
        //设置默认url
        $urlRouterProvider.otherwise('home');
    }]);

• 上面代码定义了一个叫start的状态。设置对象stateConfig和路由设置对象的选项是非常相似的。

4.设置路由跳转

• ui-sref-active 把当前选中的路由添加样式没有选中没有样式
• 通过ui-sref监听状态改变, 路由跳转

    

        
        
首页
        
关于我们
        
联系我们