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()函数直接配置即可。

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指令进行视图模板的接收和显示

<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()函数进行路由状态的配置和管理

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"
        })
}]);

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

|- index.html |---- main.html |-------- home.html |-------- userinfo.html |---- article.html |-------- edit.html

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

 index.html
------
<header>
    <a ui-sref="index">首页</a>
    <a ui-sref="article">文章</a>
</header>
<section>
    <ui-view></ui-view>
</section>
main.html
-----
<header>
    <a ui-sref=".home">个人中心</a>
    <a ui-sref=".userinfo">用户资料</a>
</header>
<section>
    <ui-view></ui-view>
</section>
article.html
-----
<header>
    <a ui-sref=".edit">编辑文章</a>
</header>
<section>
    <ui-view></ui-view>
</section>

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏魏豪的专栏

【腾讯云的1001种玩法】Nginx网站服务器学习与入门

本文详细介绍了Nginx网站服务器。从Nginx的基本概念,基本应用,高级应用。每种应用都有详细的案例与之对应。可快速帮助Linux爱好者学习Nginx来技术入...

2.2K0
来自专栏行者悟空

Nginx性能优化的那些事

1814
来自专栏从零学习云计算

Centos7.2学习记录(3)——搭建本地yum仓库

入职以来,由于公司云主机运行在内网环境下,在搭建kubernetes和openshift集群时都需要进行离线安装,这里粗略记录一下本地yum仓库的搭建过程。 ...

4120
来自专栏决胜机器学习

《Redis设计与实现》读书笔记(三十二) ——Redis事务设计与实现

《Redis设计与实现》读书笔记(三十二) ——Redis事务设计与实现 (原创内容,转载请注明来源,谢谢) 一、概述 redis的事务同数据...

3445
来自专栏Albert陈凯

linux目录结构和常用命令

一、Linux目录结构 你想知道为什么某些程序位于/bin下,或者/sbin,或者/usr/bin,或/usr/sbin目录下吗?例如,less命令位于/us...

2634
来自专栏犀利豆的技术空间

Redis 分布式锁的正确实现方式

之前我们使用的定时任务都是只部署在了单台机器上,为了解决单点的问题,为了保证一个任务,只被一台机器执行,就需要考虑锁的问题,于是就花时间研究了这个问题。到底怎样...

3880
来自专栏云计算教程系列

在Ubuntu 16.04如何使用Percona将MySQL类别的数据库备份到指定的对象存储上呢?

数据库通常会在您的基础架构中存储一些最有价值的信息。因此,在发生事故或硬件故障时,必须具有可靠的备份以防止数据丢失。

1383
来自专栏抠抠空间

爬虫之FileCookieJar

1750
来自专栏会跳舞的机器人

Dubbo无法创建新线程异常解决方案

结合上面的异常信息,我们可以知道dispatcher的默认配置值为all(AllChannelHandler来处理消息请求),因为测试环境上部署了好几个应用,如...

3692
来自专栏jmeter高手高高手

Jmeter(二十四)_服务器性能监控

1、访问网址http://jmeter-plugins.org/downloads/all/,下载三个文件。其中JMeterPlugins-Standard和J...

3992

扫码关注云+社区

领取腾讯云代金券