AngularJS 路由

zoukankan html css js c++ java

AngularJS 路由
route 路由

在AngularJS里面有两种方式实现路由，第一个是$location,第二个就是route。
在这里,我先介绍route模块.

由于AngularJS是模块化的，我们要引用路由，就需要先将这个包下载下来。
```
npm install angular-route --save
```
或者使用bower
```
bower install angular-route --save
```
之后,在我们的文件引入AngularJS-route.js文件,就可以使用route路由了.

由于route是一个单独的模块,我们想要使用,必须要在自己的模块中添加对ngRoute模块的依赖.
```
var app = angular.module('myApp', ['ngRoute']);
```
然后,我们需要通过config方法来配置.
```
app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/a', {
        controller: 'aController',
        templateUrl: './a.html'
    })
        .when('/b', {
            controller: 'bController',
            templateUrl: './b.html'
        })
        .when('/c', {
            controller: 'cController',
            templateUrl: './c.html'
        })
        .otherwise({
            redirectTo:'/a'
        });
}]);
```
注意,上面的config也要注入一个对象,后缀也是Provider.

config里面注入的对象都要跟上Provider,即使后面有Provider.

when表示匹配,如果有对应的路由匹配上, 那么就会进入相应的控制器.

otherwise表示如果没有匹配到,就走'a'.

下面是控制器代码:
```
app.controller('aController', ['$scope', function ($scope) {
    $scope.msg = 'this is aController';
}])
app.controller('bController', ['$scope', function ($scope) {
    $scope.msg = 'this is bController';
}])
app.controller('cController', ['$scope', function ($scope) {
    $scope.msg = 'this is cController';
}])
```
注册了三个控制器(注意,这里的控制器不用在View里面通过ng-controller申明.

好了

现在我们需要在html文件里面加上ng-app指令和ng-view指令

注意:ng-view 指令是一个特殊的指令,它的作用是在html中给$route对应的视图占位.(ng-view是优先级为1000的终极指令,AngularJs不会运行作用在同一个指令上的其他指令.)
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div ng-app="myApp">
        <div ng-view></div>
    </div>
    <script src="./../angular.js"></script>
    <script src="./../angular-route.js"></script>
    <script src="index.js"></script>
</body>
</html>
```
下面是我的三个html文件

a.html
```
<h2>
    {{msg}}
</h2>
```
b.html
```
<h2>
    {{msg}}
</h2>
```
c.html
```
<h2>
    {{msg}}
</h2>
```
好了,所有的文件都已经写好了,似乎已经可以打开了,我们试试

上面什么都没有显示!!

我们使用F12打开控制台

我们看到了关键字 XMLHttpRequest,这是一个ajax对象.

明白了,AngularJs加载a.html,b.html,c.html时通过ajax方式的,而File协议是不支持ajax方式的?

怎么办呢?

办法就是起一个Web服务器.

现在主流的IDE都会自动以http方式在浏览器中查看文件,比如,WebStorm,HBuilder,Sublime也有对应的插件. Sublime Server.

但遗憾的是,VScode没有,

VSCode通过
```
ext install view in-browser
```
安装插件可以打开浏览器,但也是file协议.

npmJs社区提供了一个Web服务器,叫做 http-server

可以通过npm方式安装.
```
npm install http-server -g
```
现在可以使用命令
```
hs -o[path]
```
打开一个服务,

注意: 虽然路径名是可选的,但是还是需要写上,因为这个在第一个启动的时候会记住url地址,以后虽然在别的路径下启动服务,还是只会跳转到第一个url上.

好了,

它会启动一个端口8080的服务,并会打开我的资源管理器(我资源管理器使用了clover插件).
然后我们在浏览器地址栏输入
```
http://127.0.0.1:8080/01route/index.html
```
注意: /表示网站根目录,一定要使用我上面开启服务的路径作为网站根目录.

它会默认跳转到http://127.0.0.1:8080/01route/index.html#/a 并打开

是不是欧了哈哈哈哈

当然,你也可以不使用这种方式,使用IIS或者其它的Web服务器. 但是我太不喜欢IIS啦(其实我以前做ASP.NET过的... 囧),

嗯,虽然这么做可行,但是有一个弊端,看下面的图

它每次都要请求a.html,b.html,c.html,如果文件多起来,是不是很麻烦呢?
由于在html里面,script标签在html5中可以省略type="text/javascript",默认会作为JavaScript文件解析,但是我们我们声明为其他的类型,html就不会做为JavaScript解析了,而是一个普通的节点. AngularJs就是利用这个特点,实现了在一个页面上放置多个View.

看下面的代码:
```
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script id="a_html" type="text/ng-template">
{{msg}}
    </script>
    <script id="b_html" type="text/ng-template">
{{msg}}
    </script> <script id="c_html" type="text/ng-template">
{{msg}}
    </script>
</head>

<body>
    <ul>
        <li>
            <a href="#/a">a视图</a>
        </li>
        <li>
            <a href="#/b">b视图</a>
        </li>
        <li>
            <a href="#/c">c视图</a>
        </li>
    </ul>
    <div ng-app="myApp">
        <div ng-view></div>
    </div>
    <script src="./../angular.js"></script>
    <script src="./../angular-route.js"></script>
    <script src="index2.js"></script>
</body>

</html>
```
js代码有稍微的变化
```
var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/a', {
        controller: 'aController',
        templateUrl: './a_html'
    })
        .when('/b', {
            controller: 'bController',
            templateUrl: './b_html'
        })
        .when('/c', {
            controller: 'cController',
            templateUrl: './c_html'
        })
        .otherwise({
            redirectTo:'/a'
        });
}]);
app.controller('aController', ['$scope', function ($scope) {
    $scope.msg = 'this is aController';
}])
app.controller('bController', ['$scope', function ($scope) {
    $scope.msg = 'this is bController';
}])
app.controller('cController', ['$scope', function ($scope) {
    $scope.msg = 'this is cController';
}])
```
下面看效果:

但是,有时候比如一个班级的信息统计,我需要查看每个同学的详细信息,比如 ..#/tom,那么还有#/linda,在这里如果为每个学生都写一个模板是不是太浪费了? 而且每个学生之间的信息模板都是相同的,不同的就是数据,而数据是可以通过控制器来提供的. 所以在这种情况下,只需要声明一个模板就并且只匹配一次.

看下面的代码:

index2.html
```

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>
            <a href="#/student/Tom">Tom</a>
        </li>
        <li>
            <a href="#/student/Linda">Linda</a>
        </li>
        <li>
            <a href="#/student/Taylor">Taylor</a>
        </li>
    </ul>
    <div ng-app="myApp">
        <div ng-view></div>
    </div>
    <script src="./../angular.js"></script>
    <script src="./../angular-route.js"></script>
    <script src="index2.js"></script>
</body>

</html>
```
这里申明了3个锚点

index2.js
```
var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/student/:name', {
        controller: 'studentController',
        templateUrl: './student.html'
    }).otherwise({
        redirectTo: '/student/Tom'
    });
}])
app.controller('studentController', ['$scope', '$routeParams', function ($scope, $routeParams) {
    var name = $routeParams.name;
    $scope.name = name;

}])
```
这里when方法第一个参数后面的冒号表示后面是一个路由参数.

注意: $routeProvider.when('/student/:name', { ... }) 这里when的后面还可以跟上一个?号,表示没有也能匹配成功,但是通常情况下不会跟otherwise合用.,而且AngularJS路由模块只有这两个特殊符号.

这里是student.html 模板
```
<h1>
    {{name}}
</h1>
```
下面看效果

注意观察地址栏的变化.(我的书签就不用看了,都是没用的东西.

这就是AngularJS的路由基础,但是功能还是相对比较薄弱,

ui-router 这是一个独立的模块,并不包含在AngularJs中,可以进行嵌套路由和一些非常复杂的路由,会在后面介绍.

好了,关于AngularJS 基础的路由模块就介绍到这里,下面Angular路由(二) 我会介绍下$location服务和AngularJS路由架构,其实,在真正开发中,我们并不是按照上面的方式来使用路由.

希望能对你提供帮助.
查看全文

相关阅读:
django笔记
 pandas dataframe的合并（append, merge, concat）
pandas删除行删除列，增加行增加列
 github上值得关注的前端项目
 CSS布局奇淫技巧之--各种居中
 级联菜单
 鼠标移入移出改变透明度
 图片轮播特效
 图片放大镜效果
 css3多列布局

原文地址：https://www.cnblogs.com/likeFlyingFish/p/5801180.html

最新文章
date详解
 reboot详解
 shutdown详解
 poweroff详解
 history详解
 export详解
 pwd详解
 startx详解
 echo详解
 tty详解

route 路由