AngularJS爬坑之路——路由关于路由的那点事儿

关于路由的那点事儿

1.什么是路由？

关于路由，首先想到的是生活中的路由器。类似路由器，AngularJS中的路由其实也是一样的概念

路由器，是将一个IP地址和一台唯一的电脑关联起来，这样我们在访问某个IP地址时就会访问到这台具体的电脑，如访问：192.168.1.100->路由器->李白的电脑
路由，就是将URL地址和对应的视图页面【如html页面】绑定起来，这样我们就可以通过某个URL地址直接访问到一个具体的视图页面了，如：访问http://www.baidu.com->路由->百度服务器上的index.html页面。

2.AngularJS中有哪些路由？

AngularJS应用开发过程中，项目中主要会使用到ng路由/ui路由 ng路由是官方提供的路由，不过存在不能直接处理路由嵌套的问题 ui路由是第三方提供的路由，可以处理深层的路由嵌套，但是建议不要超过三层

2.1. ng路由

AngularJS中，官方提供了ng-route组件用来进行路由处理，主要有以下几个服务辅助处理路由功能

$routeProvider 路由提供者服务 $routeParams 路由跳转过程中的参数处理服务 $route 路由对象

在AngularJS中的配置使用方式也是非常简单，通过模块的config()函数直接配置即可。

代码语言：javascript复制

var app = angular.module("myApp", ["ngRoute"]);
app.config(["$routeProvider", function($routeProvider) {
    $routeProvider.when("/index", {
        templateUrl:"component/index.html",
        controller:function($scope) { // TODO /index模板控制器}
    }).when("/login", {
        templateUrl:"component/login.html",
        controller:function($scope) {// TODO /login模板控制器}
    }).when("/regist", {
        templateUrl:"component/regist.html",
        controller:function($scope) {// TODO /regist模板控制器}
    }).otherwise("/index");
}]);

在HTML页面中，可以通过链接的形式进行访问，通过ng-view指令进行视图模板的接收和显示

代码语言：javascript复制

<a href="#!/index">首页</a>
<a href="#!/login">登录</a>
<a href="#!/regist">注册</a>
<ng-view></ng-view>

以上就是一个路由的简单配置，其中主要涉及到几个API的使用

when(url, {option})：对用户访问的url路径进行{option}处理的函数 url：表示用户访问的url路径 {option}：表示url路径对应的视图模板 1） templateUrl：表示和用户访问路径对应的html页面路径 2） controller：用来控制templateUrl指向的页面的控制器
otherwise(path)：用户访问路径不存在时默认跳转的路径 path：url路径，一般会指定when()函数中配置的一个路径作为默认路径

但是，需要注意

AngularJS官方提供的ng-route，不支持路由的直接嵌套，如果项目中有路由嵌套的需求的话，请尽量不要考虑使用官方的ng路由

2.2. ui路由

ui路由是第三方提供的路由处理组件，主要有以下的服务进行路由服务的处理

$stateProvider 路由状态管理服务 $stateParams 路由中的参数管理服务 $state 路由状态服务 $urlRouterProvider url地址路由管理服务

配置使用的过程中，主要通过config()函数进行路由状态的配置和管理

代码语言：javascript复制

var app = angular.module("myApp", ["ui.router"]);
app.config(["$stateProvider", "$urlRouterProvider", function($stateProvider,$urlRouterProvider) {
    $stateProvider
        .state({
            name:"main",
            url:"/main",
            templateUrl:"component/main.html"
        })
        .state({
            name:"main.home",
            url:"/home",
            templateUrl:"component/home.html"
        })
        .state({
            name:"main.userinfo",
            url:"/person",
            templateUrl:"component/person.html"
        })
        .state({
            name:"article",
            url:"/article",
            templateUrl:"component/article.html"
        })
        .state({
            name:"article.edit",
            url:"/edit",
            templateUrl:"component/edit.html"
        })
}]);

以上是路由的简单配置，主要实现了如下的页面跳转结构

HTML页面中的处理也是比较简单

代码语言：javascript复制

 index.html
------
<header>
    <a ui-sref="index">首页</a>
    <a ui-sref="article">文章</a>
</header>
<section>
    <ui-view></ui-view>
</section>

代码语言：javascript复制

main.html
-----
<header>
    <a ui-sref=".home">个人中心</a>
    <a ui-sref=".userinfo">用户资料</a>
</header>
<section>
    <ui-view></ui-view>
</section>

代码语言：javascript复制

article.html
-----
<header>
    <a ui-sref=".edit">编辑文章</a>
</header>
<section>
    <ui-view></ui-view>
</section>

以上路由代码仅供参考，后续会陆续更新！

angularjs html 人工智能

0 人点赞