ionic入门教程-ionic路由详解（state、route、resolve）(转)

http://blog.csdn.net/onil_chen/article/details/51758696?appinstall=0

今天好好的跟你们讲讲ionic的路由配置。

问到的朋友有点多，由于这个内容比较多，因此我一直想等我多了解一些再出关于路由的教程。

可是有些很简单的也有朋友不理解，因此我就提早出了这篇教程。

但愿能对你们有点帮助，关于我遗漏的部分，后面再发教程补充吧。

可是基本的内容，简单的应用，应该这篇教程里面都会提到了。

首先咱们仍是从tabs类型的新建项目来学习（这个项目真的很厉害，你们能够花时间好好看看）。

咱们就按照代码的启动流程开始看这个路由吧。

使用的ide是webstorm9.0.3

首先让咱们运行这个项目，右键点击index.html，选择用浏览器运行，选择谷歌浏览器。

在打开的谷歌浏览器中打开开发人员工具（快捷键F12），

而后选择手机调试模式（开发人员工具栏，放大镜旁边那个按钮，多是手机样子或者别的，版本问题，我忘记图标长什么样子了），

选择iphone6。而后刷新。从新适配界面。（只是为了比较好看而已）

既然这节课是说路由，那最开始咱们最早要关注的就是

http://localhost:63342/routeDemo/www/index.html#/tab/dash

为何会访问这个地址呢？#tab/dash这个就是路由，可是为何访问的是这个路由，又是什么意思，怎么定义的呢？

首先咱们作一个操做，在地址栏里面访问http://localhost:63342/routeDemo/www/就是去掉了index.html#/tab/dash这不部分的内容。

访问以后，你会发现，就算是只访问http://localhost:63342/routeDemo/www/最后访问的仍是http://localhost:63342/routeDemo/www/index.html#/tab/dash

这里有两个知识点，一个是web的，当url访问的是网站的某个文件夹时，浏览器会自动打开该文件夹下的index.html文件。

即打开的就是上面这个代码，代码是按照顺序从上到下解析的。跑到body的ng-app=“starter”，就是自动启动应用的脚本。

就会在模块池（我随意说的，便于理解）查找名字叫作starter的模块。是的，模块，没有应用，你没有看错。

纸上得来终觉浅，绝知此事要读源码（read the fucking source code）

咱们打开app.js查看源码

能够看到这里定义了名字叫作starter的模块，前面自动启动的就是它，后面中括号里面的内容，能够理解为这个模块的依赖，就是说这个模块要运行起来，是要在这三个模块运行起来的基础上才行的，这么说不是很严谨，可是新手这么理解是能够的。

通常在项目中，会把这个模块的返回值保存下来，这样在代码中操做会比较方便。

var app = angular.module(name,[])这样子的形式，在代码中直接使用app就是当前这个应用了，比较方便。

恩，咱们接着往下看

注意看前面的.run()能够这么理解在app运行的时候执行的内容，看内容这一块是打包以后才有用的。因此你的项目只是一个单存的web项目，能够把这个删除了也没有关系。

这个.run()还能够用来引入rootscope，全局的控制器上下文，能够实现一些简单的数据传递，或者通用函数的统一处理。写法以下

.run(function($rootScope){  $rootScope.debug = true;})这样子你在子控制器里面引入$rootScope,就能得到这个全局变量了，好比在是否打印log的时候能够这么实现

$rootScope.debug && console.log("运行日志")

这里还要注意的是.run()是直接接在angular.module(name,[]).run()注意这是一个链式的写法。有语句后面加分号编程习惯的小伙伴，能够注意一下，按照上面提到的，能够把这个拆开写var app = angular.module(name,[]);  这是能够断开的app.run(); 这样子的写法有个好处就是，这两部分的内容能够写到不一样的文件里面。有些人喜欢把route这部分的内容分离，就是能够这么实现的。

仍是接着看源码

.config()能够理解为应用运行的配置文件，能够用来定义一些基础的配置，这里引入的是$stateProvider,用来配置路由。第二个参数实际上是能够不用的。可是这里是用来定义，当你访问连接的时候没有携带任何的路由信息，那系统会自动访问otherwise配置的路由。就像咱们一开始访问的地址http://localhost:63342/routeDemo/www/。浏览器自动帮咱们补齐了地址http://localhost:63342/routeDemo/www/index.html。这是一个没有路由信息的地址，因此这里配置的otherwise就会帮咱们自动补上#/tab/dash。这里就解释了为何咱们直接访问项目目录，会访问http://localhost:63342/routeDemo/www/index.html#/tab/dash。

接下来，咱们来看一个详细的路由配置。这里有两种状况。是否为母版（模板）.

咱们看tab的这个路由，url就是路由地址，abstract：true就是指设置这个界面为母版界面，能够这么理解，这是一个架子，全部的子界面都有这个统一的界面。

templateUrl是定义了这个路由视图对应的界面。这里咱们仍是围绕着http://localhost:63342/routeDemo/www/index.html#/tab/dash。这个连接。咱们要解释里面的这个tab是什么。

这里咱们作一个有意思的尝试，咱们注销掉路由配置里面的$urlRouterProvider.otherwise('/tab/dash')防止咱们输入错误路由的时候，系统自动跳转。而后咱们在浏览器里面访问http://localhost:63342/routeDemo/www/index.html#/tab只访问到tab这一级。（注意在浏览器中只修改路由是不会从新加载页面的，这也是路由的一个优势，因此要刷新页面以后在修改路由，这样咱们刚才修改的代码才会有效）

而后咱们会在界面上看到两个浅浅的框框。

要仔细看，否则会觉得没有东西。咱们在从控制台看一下html

注意看这个视图是有解析的。恩，这 暂且放一边不看，咱们接着看另一个路由配置

首先是这个路由的名字tab.dash这里的点和js中的点同样理解为对象的属性，这里表示一种从属关系。指dash这个视图是tab的一个子视图。

这个路由配置和tab的路由配置有个明显不一样的地方就是多了一个views，能够简单理解为用来定义视图详情。格式是views:{name:{parms}}

这里最应该关注的就是‘tab-dash’这个视图名字。首先要指导这个视图名字是从哪来的，又是什么意思？

咱们打开tabs.html文件

能够看到在tabs地下定义的tab里面有一个ion-nav-view 它的名字定义为‘tab-dash’这个意思就是。tab.dash这个路由定义了，这个路由的视图是在‘tab-dash’这个tab的视图里面绘制的。

这个ion-nav-view咱们在index.html中也有见过<ion-nav-view ></ion-nav-view>。那这里要怎么理解呢？

咱们对代码作一点小改动。改动tab的配置。加入views属性。

而后给index.html中的<ion-nav-view ></ion-nav-view>加入属性name='main'。

而后运行项目，项目运行成功。给每个视图定义了名字以后，理解起来就容易不少了。下面我画一个简单的图来讲明这几个关系。

这里我把视图之间画的比较开，便于理解。可是这些视图之间的关系，要以我下面的说明为主。

首先咱们来理解系统默认的那种没有定义views属性的路由，它们会被默认绘制在最上层的main视图里面。从上往下，第一个没有定义名字的view。

好比咱们在项目中经常会有一些界面不须要下面的tab切换。因此咱们能够把他们定义为不带views属性的，即不声明所属视图的路由，他们都会被绘制在main视图中，他们和tabs视图是同级的关系。这个视图是直接在主视图中绘制的，因此图中蓝色的tabs视图，其实是不存在的。

tabs视图下面有定义了不少个子视图，根据代码控制这些子视图是只能同时有一个是显示的，其余的子视图都会被放入视图缓存中。因此途中紫色的视图，应该是和tabs视图同样的的，可是它们是存在的。当这些视图的大小都彻底同样的时候，那咱们看起来就像只有一个视图了。这里我在画一个简化版的tabs切换的视图关系，便于理解。

正视图侧视图

根据上面这两个不一样角度的图应该可以理解tabs是怎么作到切换的了。咱们可以看到的就是最上层的，因此在tabs母版里面定义的tabs切换栏，在每个子视图里面都有，就是这么实现的。

因此说视图要不要定义，要怎么定义能够根据项目须要灵活的选择。定义在同一个视图地下的路由在切换的时候，会有历史保留，能够直接使用back按钮，进行返回操做。可是游离在子视图，即没有设置views的视图，相互之间是没有历史的，他们之间的返回须要手动的补充功能，我以为应该是我哪里使用的不对。可是还没定位出来。

看完了新建项目中定义的这几个属性，咱们接下来来看几个，比较经常使用的新建项目中没有提到的属性。

一、template

这个属性和templateUrl都是用来定义视图对应的html模板的，前者接受的是一个html的字符串，后者接受的是一个文件路径的地址。比较好理解。

二、prefetchTemplate

默认为true。这个设置为false，表示不提早加载html，模板。这里咱们看一下新建项目的日志

这里咱们在启动项目的时候，走过路由配置，全部的html都会被预加载到缓存中。是的后面的视图之间的切换会很流畅。

可是也有一个问题，就是启动项目的时候，要加载过多的文件，有些文件还不必定有用，在不少级下面的文件，不多使用到。

因此能够选择，把一些不经常使用的视图设置为false，这样一开始就不会去加载它们了。

在作按需加载的时候。也能够把这个值设置为false。js文件都按需加载了，访问首页只加载了一个js文件却加载了几十个上百个的html文件，这很不科学。

三、resolve:预载入
  使用预载入功能，能够预先载入一系列依赖或者数据，而后注入到控制器中。
  在路由中的resolve，可以保证在路由到达前载入数据保证（promises）.
  预载入对象须要一个对象，这个对象的key纪要注入到控制器的依赖，这个对象的值为须要被载入的服务。
  若是传入的是字符串，路由会视图匹配已经注册的服务。
  若是传入的是函数，该函数会被注入，而且该函数返回的值即是控制器的依赖之一。
  若是该函数返回一个数据保证（promise），这个数据保证将在控制器被实例化前被预先载入而且数据会被注入到控制器中。

这个用来实现按需加载的基础，也有其余的模块依赖，或者前置函数的执行，都是靠它来完成的。

接下来还要讲到的几个经常使用事件。

一、$ionicView.enter 

在进入视图的时候响应的事件，在控制器中使用on方法监听触发

二、$ionicView.leave

在离开视图的时候响应的事件。注意若是从A界面到B界面跳转，那么B界面的enter会先响应，再响应A界面的leave事件

三、$stateChangeStart

在切换路由是响应的事件，能够用来判断前置路由是什么，控制当进入某些页面时执行的函数，好比说进入某些页面都要把右上角的按钮显示出来等等

暂时能想起来的，就这么多，其中须要明确关注的是resolve这个属性。后续的深刻学习，对它的涉及会比较多。

这节课没有demo，直接新建一个tabs类型的项目跟着看就能够了。

你们还有其余的问题能够经过如下方式找到我