angular项目流程功能实现

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        angular项目流程功能实现

1.项目结构

—-view
—-controller
—-service 公共方法的使用，主要封装一些常用api,面向于方法
—-model

2.完成项目流程是什么？

a:企业中项目实现流程

①：实际的问题导致了需求产生

②：企业核心技术（CTO 首席技术执行官）负责人或者产品（PM productmanager）对需求采取更深分析（CTO–找产品部门沟通）。

③：产品：得到需求（输入），输出：设计产品的草图（关于产品的构想）和原型（比草图更细致，具体哪点怎么放置放在哪里这种），以及交互设计（设计 整个项目的颜色搭配，每个按钮摆放位置的意义，以及用户习惯性操作心理，规划设计原则是什么样的，确定给谁用，怎么用，怎么样好用，隔三差五改需求）

④：产品和UI进行交互：UI—–>具体的实现设计图，设计图最好方式：将切换时候图的变化都能体现在设计图

⑤：UI设计好图以后和产品之间有很多次会议，review meeting UI和产品再交涉，设计出来具体东西和产品想法是否一样。UI接受产品见解进行修改，直到产品没有意见的时候，UI输出具体设计图。 UI 用Email形式群发给所有人，抄送给PM，boss

⑥：各个项目组进行开发：

—-backend (后台，服务端 – 系统应用支撑，数据结构，对外提供的webservice(用restful方式webservice)【restful前后端独立分开，一种标准，各不依赖】之间通过webservice串接)

—-ios

—-android

—-fe(前端或者叫h5) 与服务端协作

(1).设计师最主要的。设计前后端交互的文档

请求地址：url:www.goole.com/rest/api/mt/login
请求类型： method:post
参数列表：

param：{username:'admin',password:'12345'}  |  username=admin&password=12345返回结果：{username:'',timestrap:'',roleId:'加密hash码'，userImg:'头像'，info:{}}

这样做的原因：

a:前端是服务端用户 前端可以向服务端定制webservice
b:服务端按照前端所定制的规范进行开发，前端按照自己定制的json进行模拟运行，只要服务端那边一开发完毕，我们只要将指向本地模拟的service地址换成服务端，两端数据无缝串接。
规范：restful标准(前后端完全独立)

(2).设计前端项目结构

I：项目架构设计—解决数据流向
数据绑定角度：
MVVM 跟当前采取的技术方案是有关系的
MVC 跟当前采取的技术方案是有关系的
及时的数据显示和处理 websocket

II：项目目录结构
结构设计：
1.结构设计简洁明了（嵌套不超过3层以上）
2.注意分类
—-按照类别进行划分
—-按照功能（MVC）
—-可维护，协同开发更加方便
⑦：
1.按次数、天数 提交 | 代码交付 code 交付到公司代码服务器里面
2.项目经理（ code review）按照代码规范一书进行代码检查，看规范不
规范：
（1）.注释描述精确
（2）.方法命名，英文，见名知意，语义化
（3）.变量命名规则 语义化 常量命名 大写
（4）.逻辑和性能
3.测试人员对你的代码和案例（use case | 用例）进行测试
bug—->bug写好 doc格式 —->email—–>传送给程序员改
⑧：build和上线
webapp:每个公司都有做build的，build将webapp代码打包maven托管，上传到服务器 启动 公布地址

混合app：
iOS 申请apple develop key $99 经过app store验证
安卓 申请安卓开发者key ,
工具：phonegap cordova,dcloud(hbuild),apicoud (都是打包工具)

b:当前项目实现流程是什么？

1：排版好页面，绑定好数据

2.当前项目难点：

a:详情里面打开地图
b:进行支付
c:页面切换和跳转

3.根据项目流程实现基本内容

1.首页

I:确定首页结构,实现路由跳转功能，导入js以及一些css库，首页环境搭建起来
II:划分项目模块：node_modules 以及 webpack.config.js实现模块化

a：
控制器 controller.js
model model.js
service service.js
入口文件 app.js
分页：下拉刷新（分页）
每次下拉，请求一次数据，将得到数据填充在页面中
数据20条 /3 分成7页
pageIndex,每页的数据量（pageSize）,显示数据下标
1 3 0-2
2 3 3-5
3 3 6-8
上限：【 ( pageIndex-1 )*pageSize 】
下限：【 pageIndex *pageSize -1】

2.我的

3.附近

解决问题：1.解决下拉刷新问题
切换以后回来，列表不显示
写在路由控制器里面
2.点击详情，做详情显示
3.打开高德地图

ngRoute页面传值步骤
1.view 中进行编写路径的时候将值放到路由路径后面 href=”#/deatil/1234||{{ }}”
2.路由配置里面获取动态传入参数（除了动态参数，拦截当前请求地址）
//when(‘/detail/:id’)在when里面 通过冒号 给传入数据设置别名
3.传递的数据被路由处理了并且放在内置服务routeParams,根据在路由配置里面起的别名将转换成对象，获取值，直接在deatil控制器里面.controller(‘detail′,function(scope,routeParams){  
//routeParams.id $routeParams.name //红色部分要相同
})

按照id查询详情：
1.全部读取 存到本地 数据流庞大 造成本地内存占用
2.在另一个页面得到id发送ajax请求

地图：
混合开发&webapp 调用地图api常见：
1.高德地图
2.百度地图
如何使用
1.进入百度&高德官方平台，申请高德或是是百度开发者key
2.参考给的demo 找准你要使用api接口，直接放在你当前页面

做项目的时候对于功能
①：将基本功能先实现，比如页面排布，操作逻辑
②：将未知信息集成到当前项目里面
高德地图KEY：5f4f42f408**********c6b631f2