AngularJS 入门6-路由

最新推荐文章于 2020-07-23 05:22:23 发布

半侠

最新推荐文章于 2020-07-23 05:22:23 发布

阅读量765

点赞数

分类专栏： AngularJS

本文链接：https://blog.csdn.net/wulinbanxia/article/details/73430930

版权

AngularJS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

AngularJS 入门6-路由

AngularJS 路由允许我们通过不同的 URL 访问不同的内容。

通过 AngularJS 这个NG的路由模块可以实现带有多视图的单页面开发

实例：

//HTML部分

<body ng-app='routingDemoApp'>
  <h2>AngularJS 路由应用</h2>
  <ul>
    <li><a href="#/">首页</a></li>
    <li><a href="#/computers">电脑</a></li>
    <li><a href="#/printers">打印机</a></li>
    <li><a href="#/blabla">其他</a></li>
  </ul>
  <div ng-view></div>
 
  <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
  <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
</body>

解析：

1当点击链接href="#/computers"，会调用对应的 $routeProvider.when 函数

2使用 ngView 指令：<div ng-view></div>，会将不同的内容显示在div内，实现单页面的多视图开发

3需要载入实现路由的 js 文件：angular-route.js

//JS部分

<script>
  angular.module('routingDemoApp',['ngRoute'])
        .config([ '$routeProvider' ,  function($routeProvider){
            $routeProvider
            .when('/',{template:'这是首页页面'})
            .when('/computers',{template:'这是电脑分类页面'})
            .when('/printers',{template:'这是打印机页面'})
            .otherwise({redirectTo:'/'});
        } ]);
</script>

解析：

通过使用 configAPI，我们请求把$routeProvider注入到我们的配置函数并且使用$routeProvider.whenAPI来定义我们的路由规则。

1使用AngularJS 模块的 config 函数用于配置路由规则

angular.module('routingDemoApp',['ngRoute'])

.config([ '$routeProvider' , function($routeProvider){...} ]);

2配置 $routeProvider用来定义路由规则

第一个参数是 URL 或者 URL 正则规则，第二个参数为路由配置对象。

路由配置对象语法规则如下：

$routeProvider.when(url, {

template: string,

templateUrl: string,

controller: string, function 或 array,