Web前端学习笔记——AngularJS之简介、起步、特性

唯恋殊雨

于 2018-09-27 09:02:39 发布

阅读量1.1k

点赞数

分类专栏： Web前端文章标签： WEB前端

本文链接：https://blog.csdn.net/tichimi3375/article/details/82844996

版权

Web前端同时被 2 个专栏收录

63 篇文章 4 订阅

订阅专栏

WEB前端开发

63 篇文章 2 订阅

订阅专栏

Angular 简介

Angular 是什么

Angular（读音['æŋgjʊlə]）是一套用于构建用户界面的 JavaScript 框架。由 Google 开发和维护，主要被用来开发单页面应用程序。

类似于 Vue.js
- MVVM（数据驱动视图思想）
- 组件化
- 模块化
- 指令
- ......
由 Google 开发和维护
开发单页面应用程序（SPA）

发展历史

起源

2009年，Misko hevery 和 Adam abrons 在业余时间打造了 GetAngular

./media/MiskoInterview.png

./media/4529.jpg

Misko Hevery 接手了 Google 内部的一个项目 Feedback ，该项目经过6个月的迭代代码量已经达到了17000行。项目的开发和维护已经变得非常的困难。所有 Misko 就决定用 GetAngular 重写这个项目。

结果就是小伙子成功了，使用 `GetAngular 之后该项目从17000行缩减到了1500行，前后仅仅使用了三周时间。

Misko 领导一看，小伙子厉害啊，同时也看到了 GetAngular 所带来的商业价值，所以决定把 GetAngular 正式立项，组织专职团队开发和维护。

Abrons 后来离开了这个计划，但在 Google 工作的 Hevery 和一些谷歌员工如 Igor Minár 和 Vojta Jína 等则继续开发维护此库。

由于已不再是个人项目，所以开发团队将 GetAngular 重新命名为了 AngularJS 。

angularjs

至此，AngularJS 就进入了漫长的发展迭代阶段。

经过了3年的发展，AngularJS 在2012年6月份，1.0.0 版本正式推出。
AngularJS 在1.2之后的版本不再支持 IE 6和7
AngularJS 在 1.3 之后不再支持 IE8
AngularJS 在 1.5 增加了类似组件化的开发方式
- 为过渡到 Angular2 做铺垫
AngularJS 1.x.x 当前已发布到了 1.6.x

困境

饱受诟病的性能问题
- 脏检查
落后于当前 Web 发展理念
- 例如组件化
- 模块化支持不好
对移动端支持不够友好

Angular 2 横空出世

Angular 1.x 由于问题太多，历史包袱太重，重构几乎不可能。

不过早在2014年3月，官方博客就有提及开发新版本 Angular 的计划。

2014年9月下旬一个大会上，Angular2 正式亮相。

2016年9月15号，Angular2 正式发布。

由于 ng2 几乎完全重写了 ng1 ，所以官方把2之后的版本都称之为 Angular。

Angular 2 之后的正式 Logo：

新版本发布了，那用户如何从 1 升级到 2 呢？

ng2-ng1

那到底要不要更新呢？

1515398136619

ng2 相比 ng1

移除了 controller+$scope 的设计方式，改用了当前主流的组件化构建
相比 ng1 性能更好
优先为移动端设计
更贴合未来标准
- EcmaScript 6
- Web Component
TypeScript
反正就是更现代化，更好了......

现状

自 Angular 2 之后，官方承诺之后的版本都会兼容到 Angular 2
当前 Angular 最新发布版为 5.x.x
新版的 Angular 在 Github 上也已收获了 3万+ ☆
使用量低于 React 和 Vue

那我为什么要学习使用 Angular ？

任何一种技术或者框架，一定要有自己的特色，如果跟别人的完全一样，解决的问题也和别人一样，那存在的意义和价值就会遭到质疑。

企业需求
增加职业竞争力
技术的本质思想都是一样的，也许你在其它技术中无法理解的事物，在这门课程中你能找到答案。

这里我们要明白技术只是工具，主要目的还是用来帮助我们解决业务问题。作为开发人员，我们对待技术的态度应该博学开放，多学习和了解不同技术。只有当你见得东西多了才能有自己的想法，才不会人云亦云，不至于迷失在技术更新迭代的浪潮之中！

学习 Angular 的一些建议

读官方文档
写 demo 测试
写小项目练手
参与实际项目开发经验
日积月累......

这是一个知识开放的时代，我们每个人都拥有一本《九阴真经》，至于你如何利用它产生价值则需要一些方式。我们学习技术就像武侠练功一样，希望大家像郭靖一样拥有坚韧不拔的精神，锲而不舍的探索下去，终成一代大侠。

在金庸武侠中，男主角练就上层武功的方法有很多，有意外服用了灵丹妙药的，有机缘巧合得到前辈几十年功力的，有被别人打通任督二脉的，还有武功为什么厉害没有原因的（小说开始就设定东邪、西毒、南帝、北丐、中神通武功厉害，没有为什么），但是郭靖，却是靠自己的努力一步步争取到的。在郭靖成功的每一步上，都有他付出的无数汗水。

郭靖资质愚钝，学习武功，靠的是坚韧不拔；结交朋友，靠的是坦诚相待；树立威望，靠的是侠肝义胆。所以我想，《武穆遗书》和《九阴真经》也只有到了诚朴质实的人手里，才能有号令天下的作用。金毛狮王有屠龙刀，灭绝师太有倚天剑，周芷若两者皆有，但是他们的江湖地位却没有因此提高，也没有人听从他们的号召；只有侠之大者，为国为民的郭靖，能够一统江湖纷争，力挫异族入侵中华的企图。

作者：水边芦苇
链接：https://www.jianshu.com/p/58fee3439ede
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

起步

内容纲要

安装 Angular CLI 开发工具
使用 Angular CLI 初始化 Angular 项目
简单体验 Angular

目前，无论你使用什么前端框架，都必然要使用到各种 NodeJS 工具，Angular 也不例外。与其它框架不同，Angular 从一开始就走的“全家桶”式的设计思路，因此 @angular/cli 这款工具里面集成了日常开发需要使用的所有 Node 模块，使用 @angular/cli 可以大幅度降低搭建开发环境的难度。

Angular CLI 类似于 Vue CLI，是 Angular 官方开发的一个脚手架工具，专门用来开发构建 Angular 应用程序。

Angular 应用程序初始化
内置开发服务器
代码变更浏览器自动刷新
创建组件、指令、服务等集成工具
测试和维护
......

Step 0. 安装依赖环境

安装 Node.js

下载地址：https://nodejs.org/en/download/
安装
确认 Node.js 环境

安装 Python

下载地址：https://www.python.org/downloads/release/python-2714/
Windows 32 位：https://www.python.org/ftp/python/2.7.14/python-2.7.14.msi
Windows 64位：https://www.python.org/ftp/python/2.7.14/python-2.7.14.amd64.msi
确认 Python 环境

安装 C++ 编译工具

Angular CLi 在 Windows 上同时依赖 C++ 编译工具，所以我们这里也需要单独安装。

当然如果你的机器安装了 Visual Studio（注意，不是 Visual Studio Code）。

执行下面的命名安装 C++ 编译工具：

npm install --global --production windows-build-tools

?注意： Windows Vista / 7 依赖 .NET Framework 4.5.1

Gif

安装 `cnpm`

npm i -g cnpm --registry=https://registry.npm.taobao.org

Step1. 安装脚手架工具 `Angular CLI`

Angular CLI 是 Angular 官方开发的一个类似于 Vue CLI 的脚手架开发工具，它帮我们集成了 webpack 打包、开发服务器、单元测试、自动编译、部署等功能特性。

使用它的第一步就是先安装：

cnpm i -g @angular/cli

安装结束之后我们可以通过在命令行输入以下命令测试是否安装成功：

ng --version

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/

Angular CLI: 1.6.3
Node: 8.9.4
OS: win32 x64
Angular:
...

安装失败解决方案

在 Windows 平台上安装 @angular/cli 会报很多 error，那是因为 @angular/cli 在 Windows 平台上面依赖 Python 和 Visual Studio 环境，而很多开发者的机器上并没有安装这些东西
以及 node-sass 模块被墙的问题，强烈推荐使用 cnpm 进行安装，可以非常有效地避免撞墙

npm i -g cnpm --registry=https://registry.npm.taobao.org

cnpm i -g @angular/cli

如果安装失败，请手动把全局的 @angular/cli 删掉： cnpm uninstall -g @angular/cli
如果 node_modules 删不掉，爆出路径过长之类的错误，请尝试用一些文件粉碎机之类的工具强行删除。
无论你用什么开发环境，安装的过程中请仔细看错误日志。很多同学没有看错误日志的习惯，报错的时候直接懵掉，根本不知道发生了什么。

Setp 2. 使用脚手架工具初始化项目

ng new my-app

Angular CLI 将会自动帮你把目录结构创建好，并且会自动生成一些目录文件，就像这样：

1515415495089

请特别注意：Angular CLI 在自动生成好项目骨架之后，会立即自动使用 npm 来安装所依赖的 Node 模块，所以这里你懂的，一道墙又会阻止我们通往自由的道路，所以这里如果初始化很慢或者失败，请自己手动 Ctrl + C 终止掉，然后进入初始化好的项目根目录使用 cnpm 来安装。

1515415785055

Step 3. Serve the application

使用脚手架工具初始化项目完成之后，我们就可以启动开发模式了：

# 或者 npm start
ng serve

注意：

在项目根目录下执行
看好是 serve 不是 server
该命令默认会开启一个服务占用 4200 端口，如果想要修改可以通过 --port 参数来指定，例如 ng serve --port 3000

1515415982150

接下来我们打开浏览器，访问：http://localhost:4200/ 。成功即可在浏览器中看到如下页面：

1515416151290

一些常见的坑

@angular/cli 这种“全家桶”式的设计带来了很大的方便，同时也有一些人不太喜欢，因为很多底层的东西被屏蔽掉了，开发者不能天马行空地自由发挥。比如：@angular/cli 把底层 webpack 的配置文件屏蔽掉了，很多喜欢自己手动配 webpack 的开发者就感到很不爽。

对于国内的开发者来说，上面这些其实不是最重要的，国内开发者碰到的坑主要是由两点引起的：

第一点是网络问题：比如 node-sass 这个模块你很有可能就装不上，原因你懂的。
第二点是开发环境导致的问题：国内使用 Windows 平台的开发者比例依然巨大，而 @angular/cli 在 Windows 平台上有一些非常恶心的依赖，比如它需要依赖 python 环境、Visual Studio 环境。

所以，如果你的开发平台是 Windows，请特别注意：

如果你知道如何给 npm 配置代理，也知道如何翻墙，请首选 npm 来安装 @angular/cli。
否则，请使用 cnpm 来安装 @angular/cli，原因有三：1、cnpm 的缓存服务器在国内，你装东西的速度会快很多；2、用 cnpm 可以帮你避开某些模块装不上的问题，因为它在服务器上面做了缓存；3、cnpm 还把一些包都预编译好了缓存在服务端，不需要把源码下载到你本地去编译，所以你的机器上可以没有那一大堆麻烦的环境。
如果安装失败，请手动把 node_modules 目录删掉重试一遍，全局的 @angular/cli 也需要删掉重装，cnpm uninstall -g @angular/cli。
如果 node_modules 删不掉，爆出路径过长之类的错误，请尝试用一些文件粉碎机之类的工具强行删除。
无论你用什么开发环境，安装的过程中请仔细看 log。很多朋友没有看 log 的习惯，报错的时候直接懵掉，根本不知道发生了什么。

关于编辑器的选择

如你所知，一直以来，前端开发领域并没有一款特别好用的开发和调试工具。

WebStorm 很强大，但是吃资源很严重。
Sublime Text 插件很多，可惜要收费，而国内的企业还没有养成花钱购买开发工具的习惯。
Chrome 的开发者工具很好用，但是要直接调试 TypeScript 很麻烦。

所以，Visual Studio Code（简称 VS Code）才会呈现出爆炸性增长的趋势。它是微软开发的一款编辑器，完全开源免费。VS Code 底层是 Electron，界面本身是用 TypeScript 开发的。对于 Angular 开发者来说，当然要强烈推荐 VS Code。最值得一提的是，从1.14开始，可以直接在 VS Code 里面调试 TypeScript 代码。

一个 Angular 程序是如何启动的

内容纲要

项目结构介绍
了解一个 Angular 应用是如何启动的

ng启动过程.png

目录结构

.
├── e2e 端到端测试（暂且不关心）
├── node_modules npm安装的第三方包
├── src 存放业务源码
├── .angular-cli.json AngularCLI脚手架工具配置文件
├── .editorconfig 针对编辑器的代码风格约束
├── .gitignore Git仓库忽略配置项
├── karma.conf.js 测试配置文件（给karma用的，暂且不用关心）
├── package.json 项目包说明文件
├── protractor.conf.js 端到端测试配置文件（暂且不用关心）
├── README.md 项目说明文件
├── tsconfig.json TypeScript配置文件
└── tslint.json TypeScript代码风格校验工具配置文件（类似于 eslint）

`npm scripts` 介绍

...
"scripts": {
    "ng": "ng", 运行查看 Angular CLI 脚手架工具使用帮助
    "start": "ng serve", 运行开发模式
    "build": "ng build --prod", 运行项目打包构建（用于发布到生成环境）
    "test": "ng test", 运行karma单元测试
    "lint": "ng lint", 运行TypeScript代码校验
    "e2e": "ng e2e" 运行protractor端到端测试
  },
...

`.angular-cli.json` 文件

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "my-app"
  },
  "apps": [
    {
      "root": "src", 源码根目录
      "outDir": "dist", 打包编译结果目录
      "assets": [ 存放静态资源目录
        "assets",
        "favicon.ico"
      ],
      "index": "index.html", 单页面
      "main": "main.ts", 模块启动入口
      "polyfills": "polyfills.ts", 用以兼容低版本浏览器不支持的 JavaScript 语法特性
      "test": "test.ts", 测试脚本
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app", 使用脚手架工具创建组件的自动命名前缀
      "styles": [ 全局样式文件
        "styles.css"
      ],
      "scripts": [], 全局脚本文件
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": { 端到端测试相关配置
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [ TypeScript代码风格校验相关配置
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": { karma单元测试相关配置
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": { 默认后缀名
    "styleExt": "css",
    "component": {}
  }
}

AppModule

描述：项目根模块
职责：把组件、服务、路由、指令等组织到一起，设置启动组件为根组件

AppComponent

描述：项目根组件
职责：替换掉 index.html 文件中的 <app-root></app-root> 节点

特性概览

内容纲要

了解 Angular 核心特性（概念模型）

本章节主要为大家描述 Angular “概念模型”（ Mental Model ）的构建。我发现，很多开发者已经做过非常多的项目，但是当你跟他聊的时候，你很快就会发现他并没有掌握这门框架的精髓。打几个比方，当别人提到 Spring 的时候，你的大脑里面第一个想到一定是 DI、IOC、AOP 这些东西；当别人提到 Hibernate 或者 Mybatis 的时候，你的大脑里面立即会浮现出 ORM 的概念；当别人提到 React 的时候，你想到的应该是 VDom、JSX；当别人提到 jQuery 的时候，你首先想到的应该是$对吧？所以，你可以看到，任何一个成功的框架都有自己独创的 “概念模型”，或者叫 “核心价值” 也可以。这是框架本身存在的价值，也是你掌握这门框架应该紧扣的主线，而不是上来就陷入到茫茫多的技术细节里面去。

angular-architecture

组件（Components）

既然如此，问题就来了，新版本的 Angular 的核心概念是什么呢？

非常简单，一切都是围绕着“组件”（ Component ）的概念展开的：

组件化

Component（组件）是整个框架的核心，也是终极目标。“组件化”的意义有2个：

第一是分治，因为有了组件之后，我们可以把各种逻辑封装在组件内部，避免混在一起
第二是复用，封装成组件之后不仅可以在项目内部复用，而且可以沉淀下来跨项目复用

模块（Modules）

NgModule（模块）是组织业务代码的利器，按照你自己的业务场景，把组件、服务、路由打包到模块里面，形成一个个的积木块，然后再用这些积木块来搭建出高楼大厦。

模板（Templates）

组件是用来封装对视图的操作的，而我们的所谓的视图其实也就是常规的 HTML 模板：

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>

元数据（Metadata）

元数据告诉 Angular 如何处理组件类。

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = '你的第一个 Angular 应用';
}