第一章 Angular概述
1. Angular简介
Angular 是 Google 推出的一个跨平台的前端开发框架,它充分利用现代 Web 平台的各种能力,提供 App 式体验。使用 Angular 可以开发出桌面应用和移动应用,为用户提供良好的体验。Angular 用 HTML、CSS 和 JavaScript 或者一个可以编译成 JavaScript 的语言(例如 Dart 或者 TypeScript ),来构建客户端应用的框架。是Google推出的一个跨平台全终端的框架。该框架包括一系列库,有些是核心库,有些是可选库。
我们是这样写 Angular 应用的:用 Angular 扩展语法编写 HTML模板, 用组件类管理这些模板,用服务添加应用逻辑, 用模块打包发布组件与服务。然后,我们通过引导根模块来启动该应用。 Angular 在浏览器中接管、展现应用的内容,并根据我们提供的操作指令响应用户的交互。
Angular 应用程序的八个主要构造块:模块、组件、模板、元数据、数据绑定、指令、服务、依赖注入。
关于 Angular 的版本,AngularJS 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。2016年,angular 升级为 2.0。因为默认不使用JavaScript而是改用了TypeScript语言,从2.0开始angular.js已经不叫angular.js了,就叫 angular,只是版本号是2.x。为了将版本号语义化(什么是语义化版本?),Google 决定统一各组件的版本号,但是之前route组件因为破坏性升级版本号到了3.x,为了统一版本号,直接将angular提至4.0版本,这样才有了angular发布了4.0正式版。
angular.js 1.x到angular2确实是一个非常大的升级,以至于api,实现原理,框架思路都是完全不一样的。可以毫不夸张的说,学习angular2就和学一个全新的框架并没有太大区别。但是angular2.x到angular4.0破坏性升级并不多,也很容易直接升级到4.0版本。
特别提示,教程后面的所有内容,都是针对 Angular 2+ 的,适合 Angular 2.x, 4.x 以及 5.x ,但是不适合 1.x 。如果你不是为了维护一个使用 AngularJS 的旧项目,建议也不要再去看 AngularJS (即Angular 1.x)的任何教程了。
2. 搭建开发环境
高楼大厦平地起,要想搭建一个 Angular 应用,也要从基础工具入手。有两种方法可以开始一个 Angular 应用,一是用 Angular CLI ,二是使用种子项目。无论哪种方法,都需要安装必要的软件。关于软件的安装,请参看 附录A Angular 环境搭建。本教程假设读者是用第一种方法(Angular CLI)创建的项目。在后面的教程中,前端开发将会用到node.js、npm 和 Angular CLI ,代码管理使用 git,在正式的后端服务器运行之前,我们使用 json-server 暂时代替。
(1) 使用 Angular CLI 新建 Angular 项目
创建新项目
打开终端窗口,运行命令 ng new heroes
生成一个名为 heroes 的新项目。新建项目时要下载所有依赖,大小200MB多,所以很慢,需要耐心等待。如果网速较慢,可在命令后加上 --skip-install 选项,即运行命令 ng new hello --skip-install
,这样,在新建项目时,就会忽略安装依赖包,创建速度就很快。等创建完成后,再把别的项目中 node_modules 文件夹拷过来,用 npm install执行依赖安装时,就没多少需要下载了。
启动开发服务器
在终端窗口中运行命令 cd heroes
进入 heroes 的项目目录;
然后运行命令 npm start
或者 ng serve
启动开发服务器,监听文件变化,并在修改这些文件时重新构建此应用。
打开浏览器并访问http://localhost:4200/
,会看到
(2) 使用种子项目
克隆种子项目
运行下列命令来执行克隆并启动步骤。
git clone https://github.com/angular/quickstart.git quickstart
cd quickstart
npm install
npm start
打开浏览器并访问http://localhost:3000/
,就可以看到 Hello Angular 的欢迎语了。
3. 官网范例:英雄指南
本教程是在官网范例的基础上进行开发,所以请首先了解 官网范例:英雄指南 ,并对照学习。
4. 代码目录结构
在开始开发工作之前,我们先来看一下当前的文件目录。
|---e2e
| |---app.e2e-spec.ts
| |---app.po.ts
| |---tsconfig.e2e.json
|---node_modules 存放各种引用的模块包的文件夹
|---src
| |---app 应用的根目录,我们要编写的东西基本都在这个文件夹中
| |---assets 存放静态资源(图片,视频等)的文件夹
| |---environments 环境配置文件的存放目录
| |---favicon.ico 图标
| |---index.html 应用的入口页面
| |---main.ts 应用的入口 ts 文件
| |---polyfills.ts
| |---styles.css 全局的样式文件
| |---tsconfig.app.json TypeScript配置文件
| |---tsconfig.spec.json
| |---typings.d.ts
|---.angular-cli.json Angular/cli 的配置文件
|---.editorconfig
|---.gitgnore git 的配置文件
|---karma.conf.js
|---package.json node 打包的配置文件
|---protrator.conf.js
|---README.md 项目的说明文件
|---tsconfig.json
|---tslint.json
实际上在开发中,我们关注的只有src
目录。
在后面各章节开始练习时,首先要在命令行中输入:
npm start
来启动应用,当我们改变了代码时,它会自动编译,并刷新浏览器页面。
参考资料
[1] Angular 英文官网 http://angular.io
[2] Angular 中文官网 http://angular.cn
[3] 王芃老师的《Angular从零到一》教程
[4] 廖雪峰老师的Git教程