angular-ui-router

最新推荐文章于 2025-09-12 16:56:45 发布

weixin_30920513

最新推荐文章于 2025-09-12 16:56:45 发布

阅读量84

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ui ViewUI

原文链接：http://www.cnblogs.com/final-elysion/p/6072857.html

angular-ui-router的使用

github

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

说明

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

使用方法

下载该插件包
引入 angular-ui-router.js
在 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: "留言板"
            })
    });

转载于:https://www.cnblogs.com/final-elysion/p/6072857.html