前端三大框架: Vue << React < Angular  angular的大腿是google, react的大腿是facebook。

Web App 最受欢迎的 JS 框架. 官网.EN 官网.CN 已经变成 一个 构建 复杂 单页面应用的客户端MVW 框架 model view whatwever

主要面向: 大型企业软件

angularjs 做个内部管理系统,是足够的,也是健全的。比extjs好些。你用了,你就知道了,你不用,永远在门里面看门外的风景,其实也就只有一个门框的视野。机会只给勇于弄脏自己双手的年轻人。

Angular 目的: 移动: 移动应用开发, 性能/加载时间. 模块化: 可以选择你需要的模块.不用加载全部模块 现代化: ES6

Html 静态文本展示网页不错. 但是要 构建 web 应用就 力不从心了…

一般 我们通过 下面技术 来解决网页在构建动态应用上的不足.

  • 类库:一些函数的集合. 帮助你写 web app. 如:jQuery   起主导作用的是你的代码由你决定如何使用框架

  • 框架 特殊的.已经实现了的 web 应用. 只要填充 具体的 业务逻辑 起主导作用的是 框架 由框架更具具体应用来调用你的代码..

AngularJS 使用了不同的方法. 尝试去弥补 html 本身在构建应用方面的缺陷. 添加新的标签.让浏览器 能识别新的语法.

使用双大括号 语法进行数据绑定;   使用DOM控制结构来实现迭代或者隐藏DOM片段;   支持表单和表单的验证;   能将逻辑代码关联到相关的DOM元素上;   能将HTML分组成可重用的组件。

端对端的解决方案: 这会让AngularJS在构建一个CRUD(增加Create、查询Retrieve、更新Update、删除Delete)的应用时显得很“固执”(

构建一个CRUD应用可能用到的全部内容包括:数据绑定、基本模板标识符、表单验证、路由、深度链接、组件重用、依赖注入。

  测试方面包括:单元测试、端对端测试、模拟和自动化测试框架。

Angular 可爱之处:

会损失一部分灵活性.并不是 所有程序都适合 用 angularjs来做.

angular 主要考虑的是 CRUD 应用. 当然 90%的 web app 都是 CRUD 应用…

 如游戏,图形界面编辑器,这种DOM操作很频繁也很复杂的应用,和CRUD应用就有很大的不同,它们不适合用AngularJS来构建。像这种情况用一些更轻量、简单的技术如jQuery可能会更好。

Html5 入门权威: Google Html5rocks. 宝库.

最近又又 web app 电子书,

之前 web 只是用来搜索的. 主要功能就是: 提供信息.

如果要执行认为 .就要安装软件到本地.

web apps不能比桌面应用做的更多.但是能一样多..

唯一的缺点是 有网络才能运行..

其实也支持 离线运行的. 数据可以存在本地. 没网络也能运行.

早期的web 是静态的. 现在 页面是动态的 . 不是一次性展示所有内容.

Html5 / CSS3 / JS 是本质的改变.

Web App 特点: 可以和 文档编辑器 一样复杂. 也能和 待做事项 一样简单.

能提供 很好的 用户体验, 丰富的 视觉体验. 注重美学. 易用.

非常注重 和用户进行交互

应用和网站的区别

看去来差不多.但是 所需开发时间 有着巨大的差别,

软件: 专门执行一个/多个 特定任务而设计的.

和应用软件对应的是 系统软件和中间件. 管理计算机效能. 应用软件 和 系统软件的关系 好比 电灯泡和电厂.

电厂只能发电, 但是自己没有任何用途. 除非又像电灯泡 电视机 这样的 应用才能给我们提供服务.

Web App 开发过程:

  • 分析需求: 要提供什么功能.

  • 设计
  • 实现: 选择一个框架. • ASP.NET • PHP 上的任何一个流程的框架 • Python with Django • Ruby on Rails   没有一个明确的标准说哪个框架最好。它们都各有不同,每个都有自己的长处。最重要的是你要知道它们任何一个都能让你开发出好用的web应用。

开发: 开发 可以分成很多块. 是标准的编程.

后台: 创建 类,对象,服务,过程,持久层, 把这些对象 保存到数据库中. 后台是 整个应用的核型.

接下来才是前台. 实现给用户操作的界面.

  • 打磨抛光: 程序开发出来了, 各个模块也集成到一起了.

还需要 通过测试.来确保 你的需求能否被实现. 要确保 愚蠢的用户 不能通过试图做一些操作 而把你的应用弄坏. 参考 白盒/黑盒 测试. 还要确保程序能在各种浏览器中运行 ie6就算了…

  • 发布 & 后续工作.
  • 宣传. 发布 beta 版本 先.

web App framework 框架

电脑软件框架. 用来支持 动态网站.网络应用程序.网络服务的开发. 有助于减轻 网页开发者的 工作量.

种类:

MVC

模型-视图-控制器 MVC model view controller

许多框架都 遵循 MVC 结构模型… 使得 数据和用户界面分开. 模块化的代码.可以重复使用. 并允许 多个接口.

组成: 客户端 应用程序 数据库

数据集: mysql / rdbms 服务器上 客户端: web app 生成的 html 用户浏览器上

CMS 内容管理系统.

一种 内容编辑程序. 就像博客. 不需要懂得编程 就可以通过 CMS 发布.更改,管理内容.

typescript 微软开发的编程语言. 为大型引用的开发而设计的. js的一个超集.任何 js 都能在 typescript 上运行.

Dart 语言 Google 主导. 目标是成为 下一代 结构化 web 开发语言… 克服 js 的特点.


js / typescript / dart 都可以写 anguler.js


安装:

文件结构:

angular2-quickstart L——app L——app.component.js L——boot.js L——index.html L——license.md

开发环境:

创建项目文件夹 mkdir angular2-quickstart cd angular2-quickstart

添加我们需要的 库文件

我们推荐使用npm包管理器来获取和管理我们的开发库。 添加一个package.json文件到项目文件夹。

{ “name”: “angular2-quickstart”, “version”: “1.0.0”, “scripts”: { “start”: “npm run lite”, “lite”: “lite-server” }, “license”: “ISC”, “dependencies”: { “angular2”: “2.0.0-beta.0”, “systemjs”: “0.19.6”, “es6-promise”: “^3.0.2”, “es6-shim”: “^0.33.3”, “reflect-metadata”: “0.1.2”, “rxjs”: “5.0.0-beta.0”, “zone.js”: “0.5.10” }, “devDependencies”: { “lite-server”: “^1.3.1” } }

通过npm install命令安装所有包。遇到红色的出错信息直接忽略,安装会成功的。详细看附录。

第一个angular组件:

组件是 angular 的基本概念. 一个组件 一个视图.(一块网页)

组件 就是一个 控制视图模板的类, 我们会写许多组件.

最佳学习网站

ES6 工具链. 要让 angular2 应用跑起来不容易. 因为用了 太多新技术. 所以我们需要一个 工具链,

Angular 是面向未来的科技 要求浏览器 之处 ES6 +

我们现在要尝试的话,需要加一些 垫片来抹平当前浏览器与ES6的差异:

• systemjs - 通用模块加载器,支持AMD、CommonJS、ES6等各种格式的JS模块加载 • es6-module-loader - ES6模块加载器,systemjs会自动加载这个模块 • traceur - ES6转码器,将ES6代码转换为当前浏览器支持的ES5代码。systemjs会自动加载 这个模块。

环境配置: 安装好 npm

  • 创建angular 项目: mkdir angular cd angular

  • 创建 配置文件(4个)
  • package.json 标记本项目 所需的 npm 依赖包 (里面包的安装 只需要到项目根目录 执行 npm install 就自动安装) 安装成功 项目目录下 会生成一个 node.modules 目录. 里面包含我们需要的模块
  1. tsconfig.json typescript 如何从项目源文件生成js代码
  2. typings.json 为typescript 编译器无法识别的库.提供额外的 定义文件
  3. systemjs.config.js 为模块加载器 提供 到哪去查询应用模块的信息. 并注册了 所有必须的 依赖包.

这四个文件的具体内容看这里: http://www.runoob.com/angularjs2/angularjs2-typescript-setup.html

创建应用