前端angularJs的开发过程
AngularJS是Google开源的一款JavaScript MVC的前端框架,弥补了HTML在构建应用方面的不足,其通过使用指令(directives)结构来扩展HTML词汇,使开发者可以使用HTML来声明动态内容,从而使得Web开发和测试工作变得更加容易,本文介绍的大体框架如下:
yeoman:项目的整体构建工具。
grunt:项目运行,打包工具。
bower:js依赖管理的工具。 angular: MVVM框架。
bootstrap:css及布局框架
jquery:优秀的Javascript库
对MVVM的理解
1、 各部分之间的通信都是双向的;
2、 view与model不发生联系,都是通过view model传递
3、 view非常薄,不部署任何业务逻辑,称为“被动式图”,即没有任何主动性,而view model非常厚,所有逻辑都部署在那里。
注:它采用了数据双向绑定(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此文件夹即可。
项目框架大体的说明如下图: