ionic路由理解

前言

最近公司在开发一款mobile产品，主管拍脑袋定下来要用ionic+angular开发，我能说我是刚来公司么？算上上个月公司忙于宝马展，我干了一个月现场苦力，端茶倒水布置展台，带着黄色的安全帽出入现场，不知道的还以为我是一包工头呢?恩，扯淡的话咱就不提了，说实话拿到这个项目，一头雾水不说，但是也得硬着头皮干呀，我写这篇文章的时候也只是刚把整个项目的框架搭起来啊，台子是搭好了，测了一下bug有几个啊，我还没有告诉主管呢，昨天在简书看到了一篇文章“如何在有限的时间内高效率的学习前端?”这里特别感谢作者,给我提了几点建议。对于angularJs我之前只是知道它，但是还没有做过 项目，更别说ionic了，有压力就有动力，既然这个项目我要负责，而且还是在这两方面几乎没有什么经验的人负责，我希望最后能完美的实现需求，恩，这个项目没有设计稿，因为有原来PC端的，所以我就依照原来的平台进行布局，今天写下angular第一弹就是把自己做项目中的坑给记录下来，记录下自己的想法和一步步的成长。。。。

正文

《用angularJs开发下一代web应用》译者有必要提下：大漠穷秋这位同仁貌似是angularJs中国布道者，是国内较早接触angularJs的人，慕课网还有他讲的视频呢我首先把这本书大致翻了一遍了解MVVM设计模式，什么模型、模板、双向数据绑定、视图、控制器、依赖注入、指令、服务、过滤器、自定义指令、自定义服务、自定义过滤器等等，这里特别提下：单元测试+端对端（集成测试）我不懂希望我以后能知道这是怎么个回事儿，有看到这篇文章的读者可给我指条明路小的不胜感激我就了解这么多，但是我的记性不是太好啊，看了就忘了，然后忘了接着看呗，里面的很多东西其实还是很高深的，到最后直接看不懂了，不过没关系，边做项目边上网搜资料然后再回过头来看这本书 ，到时候肯定能看懂啦

新建一个项目

看了这本书，大致有了方向，书中提到了yeoman的概念，它是一个工具，里面包含一个完整的项目结构，免去了我们自己创建项目的麻烦，类似于一个自动化工具，反正是我不会用，我试着下载nodeJs+ionic+cordova提示我安装失败，老是报版本过低的问题，好烦，不过没关系这个周末我就争取把它搞定，为什么安装它？前面也提到了自动化，它提供了一些命令直接可以在CMD运行，比如启动一个本地服务器，还有自动配置路由等，很方便，但是因为我刚接触这个项目，不想走捷径先用最原始的手动进行各种操作，以使我真正的熟练这个项目

我用的IDE是Hbuilder,对于angularJs自动提示功能还不健全，不过它自带服务，这样调试代码还是很方便的，我看网上很多人推荐sublime和webstorm那么我也建议各位用这两款IDE吧，项目结构大概是这个样子

是不是感觉有点儿乱啊，不过没关系，这个项目目前只有我一个人负责，所以先满足自己能看就OK，不过以后我尽量注意标准化，做一个友好的程序员

我们前端只关注www这个根目录就OK了，其他的一些配置只有在打包成app的时候才用的上，一个index.html这是整个项目的入口，每次启动都要先打开index.html这个文件，

里面配置所有需要引入的css和js文件，我现在只是引入了ionic.css和自己定义的style.css之外并没有引入其它框架，可能以后会用到其他的一些ui库，js的话ionic.bundle.js这个文件集合了angularJs一些常用的插件，我们可以打开这个看到它到底集成了哪些东西，具体如下图：

 

其中配置文件都在一个叫做js的文件夹里controller，driectives，filter,services文件都是新建的。

这里我们先从app.js说起：

app.js文件里主要是实现路由配置的也就是各个页面的切换，它是基于UI-Router，我们已经引入了angular-ui-router.js

var app = angular.module('starter', ['ionic', 'starter.controllers'])
在app.js里面我们首先定义了一个叫做starter的模块，并且在index.html引入这个控制器

可以看到index.html里面除了引入所需要的css文件和js文件之外,就是这简洁的两行代码了，app.js里的starter绑定到了body上面<ion-nav-view></ion-nav-view>这个是ionic
自带的标签，好像叫做ionic的命名空间，它是用来渲染模板的所有的html都是放在这里的