第一章 Angular概述

1. Angular简介

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教程

results matching ""

    No results matching ""