关于 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其中一个页面截图:

关于 angular.js 路由的一些个人整理 ( ngRoute )_第1张图片  

 

代码截图: (带上demo的目录   方便结构看的清楚)

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

index 页面

关于 angular.js 路由的一些个人整理 ( ngRoute )_第2张图片

路由配置页面:

关于 angular.js 路由的一些个人整理 ( ngRoute )_第3张图片

 

菜单部分代码: 

显示区域代码:

 

// 路由
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'
    });
}])

 

你可能感兴趣的:(angular.js)