AngularJS 路由

时间 2019-11-08

原文原文链接

route 路由

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

因为AngularJS是模块化的，咱们要引用路由，就须要先将这个包下载下来。html

npm install angular-route --save

或者使用bowerhtml5

bower install angular-route --save

以后,在咱们的文件引入AngularJS-route.js文件,就可使用route路由了.java

因为route是一个单独的模块,咱们想要使用,必需要在本身的模块中添加对ngRoute模块的依赖.ajax

var app = angular.module('myApp', ['ngRoute']);

而后,咱们须要经过config方法来配置.npm

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

下面是控制器代码:

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

<!--/*
 * @Author: Pawn.Hu 
 * @Date: 2016-08-14 13:48:39 
 * @Last Modified by:   Pawn.Hu 
 * @Last Modified time: 2016-08-14 13:48:39 
 */-->
<!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路由架构,其实,在真正开发中,咱们并非按照上面的方式来使用路由.

但愿能对你提供帮助.