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",
            templateUrl:"templates/login.html",
            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：进入或者离开当前状态的视图时会调用这两个函数

总结

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