Ionic项目知识点

1.    Ionic开发简介

配置环境

搭建骨架（路由和MVC）

写页面（乱炖）

操作手机（外挂）

2.   Git环境

下载ng-cordova插件需要，源代码管理

1、在百度搜“git下载”，安装即可环境安装遇到的问题

2、配置到全局变量

http://jingyan.baidu.com/article/9f7e7ec0b17cac6f2815548d.html

3.    安装项目依赖

l  打开命令窗口,在搜索中输入cmd

l  输入npm install -g cordova ionic 

3.1    快速创建项目

l  先找到一个放项目的位置

l  在目录中按住shift键右击,在当前文件夹打开命令窗口

l  Ionic  start  myApp(默认是tab样式)

3.2    项目结构说明

3.3    打包app

l  先找到项目的根目录

l  在目录中按住shift键右击,在当前文件夹打开命令窗口

l  Ionic  platform  add  android

l  Ionic  build  android

4.    抽取步骤

控制项目启动的app.js

控制路由跳转的route.js

控制全局变量的global.js

控制不同平台兼容性的config.js

 

功能模块划分

Controller：业务逻辑

Factory:数据请求访问，和服务器进行操作。

Html页面：功能界面

Route:子功能路由js，控制我们的页面跳转。

4.1    外面四个js实现步骤

1、创建四个控制全局功能的js文件

2、把每个js文件变成模块

app：run

config:config

global:constant

route:config

3、把js文件在html中引入

4、在app.js 文件中注入我们其他三个模块的东西（加入功能）

4.2     route.js

1、通过angular.module.config方法定义路由

2、引入$stateProvider（）, $urlRouterProvider

3、就是根据浏览器url地址后面#部分后面你的变化匹配不同的路由，匹配到合适的路由之后，

就会把templateUrl中写得页面模板渲染到我们页面中的<ion-vav-view>,如果页面中有很多的<ion-nav-view>组件，

他就会根据组件中的name属性的值进行选择渲染。

Controller属性中的控制器会被自动渲染到模板页面中，变为ng-controller=”控制器名称”。

4.3     Global.Js

1、通过angular.module.constant定义成模块，不经常改变的东西放在这里面。

2、如果要使用，在其他模块中注入服务就可以了，比如GlobalVariable，

在其他模块中就可以把里面的属性都点出来。

  
  
  

   
   
         
   
   
   
4.3.1     Config.js
   
   
         1、         通过angular.module.config定义成模块
      2、         注入$ionicConfigProvider服务
    
  
  
  

  
  
  

   
   
         
   
   
   
4.4     功能模块js的整理步骤
   
   
         
   
   
   1、         创建四个文件
         Controller文件：控制业务逻辑的
         Route文件：功能模块路由
  
  
  
  
  
  

   
   
    Service文件：数据请求访问的
  
  
  
  
  
  

   
   
    Html页面
      2、把每个js<