Angular路由

最新推荐文章于 2024-05-08 09:50:52 发布

迷人的脚毛

最新推荐文章于 2024-05-08 09:50:52 发布

阅读量474

点赞数

分类专栏： angularjs

本文链接：https://blog.csdn.net/qq_40090482/article/details/78253748

版权

angularjs 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1、什么是路由：

我们把互联网想象成一个邮局，当你想给朋友写信时，首先要吧内容写到一张信纸上，然后在信封上写地址，再把信装进信封。

当你把信送到邮局，邮件分拣机会根据邮编和地址来判断你的朋友住在哪里。如果他住在一栋有很多房间的大楼里面，邮局会把信件投递到大楼的前台，然后大楼的工作人员会根据房间号再次进行分拣。

互联网的工作原理和上面的过程很类似，不同的是，现实世界中由街道连起来的楼房的和公寓，在互联网世界中被路由器和网线连接起来的计算机所取代。每一台计算机都有一个唯一的地址，让网络可以定位到它。

多个公寓房间共享同一个街道地址，与此类似，多台计算机也可以共享同一个网络或者路由器。比如，在使用星巴克提供的免费WIFI时，多台计算机会共享同一个公网IP地址。尽管如此，你的计算机依然可以通过路由器分配的内网IP地址被单独访问到，路由器就好比公寓大楼的工作人员，而内网IP地址就好比房间号。

2、路由的机制：

在开讲之前，首先谈谈APP应用。平时我们用的app总是多页面，如果用原生安卓或者苹果，那当然很流畅啦。但是当我们用一般的html页面做移动端，简单时候我们可以用<a href=""></a>这样的标签去链接页面时，速度还是可以的。

但是当我们的应用越来越多时，切换起来没那么流畅。又是碍于网速，页面加载进来有点慢。但是在angular里面，我们可以用路由进行切换。因为在angular里面，我们用户一般在加载这样的应用时，会整个的缓存在手机上。我们用路由进行切换时，不用再发起HTTP请求了。体验比原来好。

上图：

接下来上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由</title>
    <script src="angular.js"  type="text/javascript"></script>
    <script src="angular-route.js" type="text/javascript"></script>
    <style type="text/css">
        li{
            list-style: none;
            float: left;
            margin: 8px;
        }
    </style>
    <script type="text/javascript">
        //2、包含了ngRoute模块为主应用模块的依赖模块
        var app=angular.module("myapp",["ngRoute"]);

      //$routeProvider：AngularJS模块的config函数用于配置路由规则。通过使用configAPI，
        // 我们请求吧$routeProvider注入到我们的配置函数并且使用$routeProvider.whenAPI来实现定义我们的路由规则；
        app.config(["$routeProvider", function ($routeProvider) {
            $routeProvider
                //对象When（）方法：$routeProvider为我们提供了when（path，object）&otherwise（object）函数按顺序定义所有路由；
                .when("/shouye", {template: "<div><h2>首页</h2><hr><br><br><br><br></div>"})
                .when("/xingwen", {template: "<div><h2>新闻页面</h2><hr><br><br><br></div>"})
                .when("/tiyu", {template: "<div><h2>体育页面</h2><hr><br><br><br><br></div>"})
                .when("/youxi", {template: "<div><h2>游戏页面</h2><hr><br><br><br><br></div>"})
                .otherwise({template: "<div><h2>404 Page Not Found!</h2><hr><br><br><br></div>"});
        }]);
    </script>
</head>
<body ng-app="myapp">
<ul>
    <li><a href="#/shouye">首页</a></li>
    <li><a href="#/xingwen">新闻</a></li>
    <li><a href="#/tiyu">体育</a></li>
    <li><a href="#/youxi">游戏</a></li>
    <li><a href="#/qita">其他</a></li>

</ul>

<div style="clear: both"></div>
<!--//3、使用ng-view指令，该<div>内容会根据路由的变化而变化-->
<ng-view></ng-view>
</body>
</html>

====================================================================================

参数说明：

template:

如果我们只需要在 ng-view 中插入简单的 HTML 内容，则使用该参数：
```
.when('/computers',{template:'这是电脑分类页面'})
```
templateUrl:

如果我们只需要在 ng-view 中插入 HTML 模板文件，则使用该参数：
```
$routeProvider.when('/computers', {
    templateUrl: 'views/computers.html',
});
```
以上代码会从服务端获取 views/computers.html 文件内容插入到 ng-view 中。
controller:

function、string或数组类型，在当前模板上执行的controller函数，生成新的scope。
controllerAs:

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

重定向的地址。
resolve:

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

以下代码是执行外部html文件来写，一般用这个。。实现的效果都一样

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由2练习</title>
    <script src="angular.js"></script>
    <script src="angular-route.js"></script>
    <style>
        li{
            list-style: none;
            float: left;
            margin: 8px;
        }
    </style>
    <script>
        var app=angular.module("myapp",["ngRoute"]);
        app.config(["$routeProvider",function ($routeProvider) {
            $routeProvider
                .when("/shouye",{
                    //templateUrl:
                  //  如果我们只需要在 ng-view 中插入 HTML 模板文件，则使用该参数：
                    templateUrl:"Url/shouye.html",
                    //控制器用来控制这个页面写一些逻辑性代码
                    controller:"ctrl"
                })
                .when("/xingwen",{
                    templateUrl:"Url/xingweng.html",
                    controller:"ctrl"
                })
                .when("/tiyu",{
                    templateUrl:"Url/tiyu.html",
                    controller:"ctrl"
                })
                .when("/youxi",{
                    templateUrl:"http://www.baidu.com/",
                    controller:"ctrl"
                })
                //在以上选项中找不到时执行此代码   。。    其他的意思
                .otherwise({
                    //redirectTo ：重定向
                    redirectTo:"/shouye"
                })
        }])
        //控制器   顾名思义就是这里面可以写一些逻辑性的代码来给上面的每个页面进行控制
        app.controller("ctrl",function ($scope,$routeParams) {
            console.log("类型："+$routeParams['type'])
        })
    </script>
</head>
<body ng-app="myapp">
<ul>
    <li><a href="#/shouye?type=国际首页">首页</a></li>
    <li><a href="#/xingwen?type=十九届人民大会">新闻</a></li>
    <li><a href="#/tiyu?type=奥运会">体育</a></li>
    <li><a href="#/youxi?type=英雄联盟">游戏</a></li>
    <li><a href="#/qita">其他</a></li>
</ul>

<div style="clear: both"></div>

<ng-view></ng-view>
</body>
</html>

上图理解一下：

迷人的脚毛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Angular路由

1、什么是路由：我们把互联网想象成一个邮局，当你想给朋友写信时，首先要吧内容写到一张信纸上，然后在信封上写地址，再把信装进信封。当你把信送到邮局，邮件分拣机会根据邮编和地址来判断你的朋友住在哪里。如果他住在一栋有很多房间的大楼里面，邮局会把信件投递到大楼的前台，然后大楼的工作人员会根据房间号再次进行分拣。互联网的工作原理和上面的过程很类似，不同的是，现实世界中由街道连起来的楼房的和公寓
复制链接

扫一扫

专栏目录