AngularJS系列——ui-router

引言

上篇博客讲了使用AngularJs开发一个App项目的目录结构,这次我们来深入讲解一下AngularJs的路由机制。

来源

首先,我们先要知道为什么要使用路由机制。

我们都知道传统的URL是:http://…….com。浏览器会向这个地址发送服务器请求来获取相关的html和js,当我们想跳到第二个页面的时候,浏览器就会再发起一个完整的服务器请求来获取整个html内容。而在单页面应用中,url是:http://…….com/#login……。关键在于#,浏览器对于带有#的url处理方式有所不同,浏览器会向#之前的地址发送服务器请求,忽略#之后的内容。客户端可以根据URL中剩余的部分来进行后续的处理。当用户从第一个页面迁移到第二个页面的时候,浏览器不会发送额外的请求,页面也不会重新加载。只是加载相应数据以及html片段而不是重新获取整个html,尤其是当页面中的大部分内容没有发生变化时。

我们知道Angularjs是一种富客户端单页面应用,所以要在一个页面呈现不同的视图,路由是非常重要的。

AngularUI在不断发展的过程中被划分成了几个模块,今天我们来了解一下ui—router。这是一个独立的模块。

原理

Ui-router只关注状态,根据状态的变化去导航到不同的视图,视图通过ng-contorller指令找到对应的controller控制器,然后在控制器内容处理各种业务逻辑,根据指令把模型加载绑定到视图,最后呈现出来。

过程

url——>路由状态变化——>加载制定视图——>找到controller——>逻辑处理——>根据指令绑定视图——>呈现

可以去github下载指定版本:https://github.com/angular-ui/ui-router 之后在我们的页面中进行引用。

使用

下面开始展示我们在项目中是怎么使用ui-router的!

1、建立app.js文件和router.js文件

首先我们在js目录下建立app.js文件.将我们的ui-router模块注入,还有其他的全局模块。


接着在js目录下建立routes.js文件

<span style="font-size:18px;">angular.module('itoo-exam-evaluation.routes',['ui-router'])

</span><pre name="code" class="javascript"><span style="font-size:18px;">.config(function($stateProvider,$urlRouterProvider) {
</span>

$stateProvider .state("login",{ url:"/login",templateUrl:"templates/login.html",controller:"userCtrl" }) .state("studentEvaluate",{ url: "/studentEvaluate",templateUrl: "templates/studentEvaluate.html" })
<span style="font-size:18px;">$urlRouterProvider.otherwise("/login"); </span>

});
 

2、代码解析

第一行:声明AngularJs模块。告诉HTML页面这是一个Angularjs作用的页面,他的内容由AngularJS引擎来解释。

<span style="font-size:18px;">angular.module('itoo-exam-evaluation.routes',['ui-router'])</span>


第二行:我们注入了$stateProvider和$urlRouterProvider2个服务,这样就可以为这个应用程序配置路由了。

<span style="font-size:18px;">.config(function($stateProvider,$urlRouterProvider) {
</span>

语句块1$stateProvider.state是定义了会在主页面上第一个显示出来的状态,作为母版页加载好之后第一个被使用的路由。

<span style="font-size:18px;"> $stateProvider

    .state("login",{
            url:"/login",controller:"userCtrl"
        })</span>

默认路由:当没有路由路径能匹配当前的导航状态,会默认将路径路由到这个页面
<span style="font-size:18px;">$urlRouterProvider.otherwise("/login"); </span>

State配置参数

url:默认相对路径(以^开头的是绝对路径

views:每个子视图可以包含自己的模板、控制器和预载入数据。 (后2项选填,控制器可以在view中绑定)

abstract:抽象模板不能被激活

templateUrl: HTML模板的路径或者返回HTML模板路径的函数

controller、controllerProvider:指定任何已经被注册的控制器或者一个作为控制器的函数

<span style="font-size:18px;"> .state('tab.selectedCourses',{
            url: '/selectedCourses',views: {
                'tab-selectedCourses': {
                    templateUrl: 'templates/tab-selectedCourses.html',controller: "selectedCoursesCtrl"
                }
            },
            abstract: true,templateUrl: "templates/tabs.html",controller: "selectedCoursesCtrl"

        })</span>

template: HTML字符串或者返回HTML字符串的函数

templateProvider:返回HTML字符串的函数

resolve:在路由到达前预载入一系列依赖或者数据,然后注入到控制器中。

data:数据不会被注入到控制器中,用途是从父状态传递数据到子状态。

onEnter/onExit:进入或者离开当前状态的视图时会调用这两个函数

总结

学习一个知识,都是要一步步深入的,不怕当时不知道,只要一步步的深入研究,通过项目进行实践,就一定会理解!没有什么阻挡的了一个想要前进的人!!

相关文章

AngularJS 是一个JavaScript 框架。它可通过 注:建议把脚本放在 元素的底部。这会提高网页加载速度,因...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题,也即是页面闪烁问题。出现这个的原因是:由于...
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HTML 属性,带有...
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内:{{ expres...
ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用 CSS 样式为了...
$http是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。读取 JSON 文件下是存储在web服务器上...