开放原子开发者工作坊

angular-ui-router的使用

github

https://github.com/angular-ui/ui-router

说明

`angular-ui-router`是导航插件，用以实现页面的跳转

使用方法

1. 下载该插件包
2. 引入 angular-ui-router.js
3. 在 module 引入ui.router，配置导航地址

    angular.module('MyApp', ['ui.router'])
        .controller('MainController', ['$scope','$state',function($scope,$state) {
            console.log('init ctrl');
        }])
        .run(['$state', function($state) {

        }])
        .config(function($stateProvider, $urlRouterProvider) {
            $urlRouterProvider.otherwise("/app/home");
            $stateProvider.state('app', {
                url: "/app",
                abstract:true,//设置为公用
                templateUrl: "app/viewport.html",//该页面要提供容器来供其他页面插入（ <div ui-view />）
                controller: 'MainController'
            })
            .state('app.home', {
              url: "/home",
              templateUrl: "app/home/home.html"
            })
            .state('app.article', {
              url: "/article",
              templateUrl: "app/article/article.html"
            })
            .state('app.photo', {
              url: "/photo",
              templateUrl: "app/photo/photo.html"
            })
            .state('app.music', {
              url: "/music",
              templateUrl: "app/music/music.html"
            })
            .state('app.comment', {
              url: "/comment",
              templateUrl: "app/comment/comment.html"
    //        template: "留言板"
            })
    });