浅谈前端路由的那些变化

最新推荐文章于 2024-07-30 23:06:43 发布

weixin_30906671

最新推荐文章于 2024-07-30 23:06:43 发布

阅读量62

点赞数

文章标签：前端 javascript 后端 ViewUI

原文链接：http://www.cnblogs.com/guohongjun/p/7272536.html

版权

最近一大堆事，加上工作又非常的忙，基本上没时间写博了，趁现在后端没有写好接口，来写写angularjs的路由

　　路由其实听起来非常的好理解，就是通过不同的url来访问不同的内容；所以说通过angularjs可以实现多视图的单页面web应用；通常我们的url形式为http://runoob.com/first/page，但是在单页web应用中angularjs通过# + 标记实现例如

http://runoob.com/#/first

http://runoob.com/#/second

http://runoob.com/#/third

这是我抄别人的但是确实是这么回事不然我也不知道怎么写喜欢你能理解

说白了其实就是每个url都对应的视图和控制器视图（view）控制器（controller）看过angularjs的别告诉我你不知道这是啥东西看到这不懂得请回去打打基础再回来继续

好了上代码

<html>
    <head>
    	<meta charset="utf-8">
        <title>AngularJS 路由</title>
    </head>
    <body ng-app='routingDemoApp'>
     
        <h2>AngularJS 路由应用</h2>
        <ul>
            <li><a href="#/">首页</a></li>
            <li><a href="#/class">分类</a></li>
            <li><a href="#/mine">其他</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>
        <script>
            angular.module('routingDemoApp',['ngRoute'])
            .config(['$routeProvider', function($routeProvider){
                $routeProvider
                .when('/',{template:'这是首页页面'})
                .when('/class',{template:'这是分类页面'})
                .when('/mine',{template:'这是其他页面'})
                .otherwise({redirectTo:'/'});
            }]);
        </script>
     
     
    </body>
</html>

中间我们看到两个js文件 angualr.js angular-route.js 这个是必须的

其实包含了ngRoute 模块作为主应用模块的依赖模块。

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

还有就是使用 ngView指令，不懂view是啥意思自己百度翻译去。

<div ng-view></div>

这个div内的html内容会根据路由的变化而变化。很神奇是不是？

还有最重要的一步，配置 $routeProvider，AngularJS $routeProvider 用来定义路由规则。

module.config(['$routeProvider', function($routeProvider){
    $routeProvider
        .when('/',{template:'这是首页页面'})
        .when('/class',{template:'分类页面'})
        .when('/mine,{template:'这是我的页面'})
        .otherwise({redirectTo:'/'});
}]);

看好了 angularjs模块的config函数用于配置路由规则（很重要）。通过configAPI，请求把$routeProvider注入到我们的配置函数并且使用$routeProvider.whenAPI来定义我们的路由规则。(看不懂的请看例子)

$routeProvider 为我们提供了 when(path,object) & otherwise(object) 函数按顺序定义所有路由，函数包含两个参数:

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

路由设置对象（看好了这才是我们常用的）

AngularJS 路由也可以通过不同的模板来实现。

$routeProvider.when 函数的第一个参数是 URL 或者 URL 正则规则，第二个参数为路由配置对象。

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

$routeProvider.when(url, {
    template: string,
    templateUrl: string,
    controller: string, function 或 array,
    controllerAs: string,
    redirectTo: string, function,
    resolve: object<key, function>
});

接下来我一个一个说明

template

如果只需要在ng-view 中插入简单的html内容，则使用该参数：

.when('/mine',{template:'这是我的页面'})

templateUrl

如果我们只需要在 ng-view 中插入 HTML 模板文件，则使用该参数：

$routeProvider.when('/mine', {
    templateUrl: 'views/mine.html',
});

以上代码会从服务端获取views/mine.html 文件内容插入到 ng-view 中。（views为文件夹名字）

controller:

function、string或数组类型，在当前模板上执行的controller函数，生成新的scope。（这点最重要）
controllerAs:

string类型，为controller指定别名。
redirectTo:

重定向的地址。
resolve:

指定当前controller所依赖的其他模块。

好了别的不说了 上一段完整demo

A页面代码

<div>这里是A页面</div>

B页面代码

<div>这里是B页面</div>

index首页

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>angularjs 页面路由</title>
</head>
    <body ng-app='routingDemoApp'>
     
        <h2>AngularJS 路由应用</h2>
        <ul>
            <li><a href="#/a">A页面</a></li>
            <li><a href="#/b">B页面</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>
        <script src="index.js"></script>  
    </body>
</html>

index.js代码

var app=angular.module("ngRouteExample",["ngRoute"]);
        app.config(['$routeProvider', function ($routeProvider){
          $routeProvider
           .when('/a', {
                  templateUrl: 'a.html',
                  controller: 'aController'
              })
           .when('/b', {
            templateUrl: 'b.html',
            controller: 'bController'
          })
          .otherwise({
            redirectTo: '/a'
          });
   }]);

其实写到这里就已经差不多了；其中的controller也已经有了只要在index页面里引进相应a页面和b页面的js文件就可以像写单页一样去完成自己所写的功能；前天晚上加班通宵了，现在还有点迷糊趁着现在还有空余时间写了这篇博客希望可以帮到各位拜拜！！1

转载于:https://www.cnblogs.com/guohongjun/p/7272536.html

weixin_30906671

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浅谈前端路由的那些变化

最近一大堆事，加上工作又非常的忙，基本上没时间写博了，趁现在后端没有写好接口，来写写angularjs的路由　　路由其实听起来非常的好理解，就是通过不同的url来访问不同的内容；所以说通过angularjs可以实现多视图的单页面web应用；通常我们的url形式为http://runoob.com/first/page，但是在单页web应用中angularjs通过# + 标记实现例...
复制链接

扫一扫