`
jinhonglin001
  • 浏览: 14453 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

AngualrJs 的学习（二）

 
阅读更多

       前面简单了解了一下AngularJs的基本指令和控制器的知识，今天来了解一下Angularjs的路由功能，实现页面的跳转。

      实现页面跳转AngularJs有自带的模块ngRoute和基于ngRoute的ui-router。

 一、ui-router

       首先要先下载ui-router的包，在index.htem中引入js文件

 

       然后在模块的依赖中引入

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

      ui-router的本质就是想我们预留的部分填充模板，他在页面中寻找ui-view，把不同的html渲染到预留的部分，例如下面的页面：

<body>
        <nav>This is first</nav>
        <div ui-view></div>
        <footer>This is footer</footer>
    </body>

上面的first和footer不变，变的只是ui-view里，会有不同的html渲染到ui-view中。

下面是具体的例子：

首先注入依赖

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

 使用config注册路由

routerApp.config(function($stateProvider,$urlRouterProvider) {
    //配置路由

})

 使用$State配置路由

routerApp.config(function($stateProvider,$urlRouterProvider) {
        $urlRouterProvider.otherwise('/index');
        $stateProvider
               .state('index',{
                       url           : '/index',
                       templateUrl    : 'tpls/index.html'
               })
               .state('list',{
                       url           : '/list',
                       templateUrl     : 'tpls/list.html'
               })
               .state('detail',{
                       url           : '/detail',
                       templateUrl     : 'tpls/detail.html'
               });
});

 上面是Angularjs路由最基本的模板，$state的第一个参数是状态名，url是当前路径，templateUrl是你渲染到ui-view的html文件。

 

分享到：
| Angular js 的学习（一）
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics