美文网首页我爱编程
angular-ui-router的简单使用

angular-ui-router的简单使用

作者: 穷鬼_h | 来源:发表于2017-08-19 00:17 被阅读0次

    下载和安装

    直接通过bower来安装angular-ui-router

    使用bower安装angular-ui-router之前,首先需要安装npm和bower。npm是node.js的包管理工具,下载安装node.js,即可完成npm的安装

    通过npm安装bower(如果未安装bower):

    npm install -g bower

    安装好bower之后,接下来使用bower安装angular-ui-router

    bower install --save angular-ui-router

    使用angular-ui-router

    首先要在angular.module方法中,注入angular-ui-router

    var app = angular.module('myApp',['ui.router']);

    定义视图,你的html页面将会呈现在这儿

    <div ui-view></div>

    定义路由规则

    app.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){

    //$stateProvider.state() 方法包含两个参数,此方法用来定义你的路由和规则

    //第一个你的路由名称  类型:string

    //第二个你的路由规则 类型Object

     $stateProvider.state('work',{

    url:'/work',    //访问路劲

    templateUrl:'view/work.html',   //把view文件夹下的workhtml文件显示

    controller:'workCtrl'   //定义控制器,(有需要写)

    })

    $urlRouterProvider.otherwise('work');   //将一个路由重定向

    }])

    执行到现在,你的页面基本上就可以呈现出你想要的内容了,然后看一下HTML页面。格式就在这儿省略了!

    <div ui-view></div>

    相关文章

      网友评论

        本文标题:angular-ui-router的简单使用

        本文链接:https://www.haomeiwen.com/subject/uypzrxtx.html