前端angularJs的开发过程

AngularJS是Google开源的一款JavaScript MVC的前端框架，弥补了HTML在构建应用方面的不足，其通过使用指令（directives）结构来扩展HTML词汇，使开发者可以使用HTML来声明动态内容，从而使得Web开发和测试工作变得更加容易，本文介绍的大体框架如下：

?yeoman:项目的整体构建工具。

? grunt:项目运行，打包工具。

? jquery:优秀的Javascript库

对MVVM的理解

1、各部分之间的通信都是双向的；

2、view与model不发生联系，都是通过viewmodel传递

3、view非常薄，不部署任何业务逻辑，称为“被动式图”，即没有任何主动性，而viewmodel非常厚，所有逻辑都部署在那里。

注：它采用了数据双向绑定（data-binding）,view的变动自动反应在ViewModel，反之亦然。而angular就是采用这种模式

一、启动项目的过程

①npm install

增加第三方的js操作，bower install -s js 包名称

参数-s代表按照js包并保存到项目的bower.json文件。

② bower install 安装访问浏览器

其他开发者使用此js包，只要执行 bower install即可。方便统一管理前端js文件及版本。

③ grunt serve 启动命令

会自动启动nodejs的web服务器，启动端口默认为9000，并开启浏览器。当项目中的任意文件 css,js,html修改之后，浏览器会自动加载界面，无需手动刷新

④打包： grunt build

执行此命令之后，项目中的css，js，html文件会进行合并和压缩，并且在根目录下面生成dist 文件夹，发布的时候直接copy此文件夹即可。

项目框架大体的说明如下图：