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：5f4f42f40******80e8bc6b631f2

高德地图使用步骤：

1.登录注册

2.点击控制台，点击创建应用，创建key,key很重要，项目中会用到

3.找到开发者API

4.选择示例中心，找到自己想要的接口

支付 是一个复杂的过程

1.涉及银行业务；普通用户 开通网银-------> 支付宝（支付平台）------>网银扣款

流程：用户webservice请求支付接口（支付账户），支付密码 ，支付金额

|

（渠道）公司自己和支付宝进行验证或者签证，签证时间

|

支付宝

|

|

付款信息----哪个银行---对接银行api---银行卡里面把钱扣除

2.支付接口API由服务端提供：

参数具体描述：

http://127.0.0.1:3000/pay

post

参数?cardId , password,密码,金额 money

传送符合参数规格

method:表示请求类型

action:表示请求地址

multiple:文件上传规定

form 进行传值的时候是 cardId , password,密码,金额 money这样类型的，在input中加入name属性