关于 angular.js 路由的一些个人整理 ( ngRoute )

关于路由的描述：

router 路由是由angularJs中提出的，用于构建单页面应用的模块，其本质是从 a 标签点击跳转功能延展来的。

路由的说明：

1：router功能的实现需要依赖于 angularJS 的扩展库文件  angular-route.min.js 。

2：router功能的实现需要依赖于 ng-view 指令。

3：router功能的实现需要依赖于 a 标签的href属性。(  href='#要加载的页面标识'  )

路由用法介绍：

*****( 使用路由的时候， 一定要记得在页面注入 ngRoute，且页面记得写上 ng-view )*****

1：通过 config  方法来构建路由；

2：在路由中，通过 .when( ) 来区分加载对应的页面；通过 .otherwise( ) 来设置路由的默认加载页面；

app.config ( [ '$routeProvider', function($routeProvider ) {

              $routeProvider

                      .when('/页面标识'，{

                          templateUrl: '要加载的页面url',

                          controller: '页面对应的controller'

                      })

                      ...

                .otherwise('/页面标识'，{

                          redirectTo: '/默认加载的页面标识'

                      })；

   }]) ；

 

下面是demo和截图：

demo其中一个页面截图：

  

 

代码截图： （带上demo的目录   方便结构看的清楚）

先上传文字说明， 后面我会把这个demo打包放在csdn上，方便小伙伴更好的理解；

index 页面

路由配置页面：

 

菜单部分代码： 

<div class="menu">
       <ul>
             <li><a href="#monday">星期一</a></li>
             <li><a href="#tuesday">星期二</a></li>
             <li><a href="#wednesday">星期三</a></li>
             <li><a href="#thursday">星期四</a></li>
              <li><a href="#firday">星期五</a></li>
         </ul>
</div>

显示区域代码：

<div class="view" ng-view></div>

 

// 路由
app.config(['$routeProvider', function($routeProvider){
    $routeProvider
    // 周一
    .when('/monday', {
        templateUrl: 'view/monday.html',
        controller:'mondayController'
    })
    // 周二
    .when('/tuesday', {
        templateUrl: 'view/tuesday.html',
        controller: 'tuesdayController'
    })
    // 周三
    .when('/wednesday', {
        templateUrl: 'view/wednesday.html',
        controller: 'wednesdayController'
    })
    // 周四
    .when('/thursday', {
        templateUrl: 'view/thursday.html',
        controller: 'thursdayController'
    })
    // 周五
    .when('/firday', {
        templateUrl: 'view/firday.html',
        controller: 'firdayController'
    })
    // 默认加载
    .otherwise({
        redirectTo: '/firday'
    });
}])