angular学习

Angular介绍

Angular是谷歌开发的一款开源的web前端框架，诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。 根据项目数统计angular（1.x 、2.x 、4.x、5.x、6.x、7.x 、8.x、9.x）是现在网上使用量最大的框架。

Angular基于TypeScript和react、vue相比 Angular更适合中大型企业级项目。

Angular环境搭建

1、安装前准备工作：

1.1、安装nodejs 安装angular的计算机上面必须安装最新的nodejs–注意安装nodejs稳定版本

1.2、选择一个 命令工具， npm, cnpm, yarn ,任选其一

设置淘宝源镜像 ，如果你用npm

npm config set registry https://registry.npm.taobao.org

如果你用cnpm ， 安装cnpm npm可能安装失败建议先用npm安装一下cnpm用淘宝镜像安装https://npm.taobao.org/

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

或者 安装yarn ,注意，只要选 一个命令工具就行

yarn

npm install yarn -g

然后切换为淘宝源你才能感受到速度：

yarn config set registry https://registry.npm.taobao.org --global``yarn config set disturl https://npm.taobao.org/dist --global

好了，真的很简单，它的命令与npm几乎一样：

  • 初始化：yarn init
  • 安装一个包：yarn add 包名
  • 更新一个包：yarn upgrade 包名
  • 删除一个包：yarn remove 包名
  • 安装所有包：yarn或者yarn install

安装Angular CLI

  1. 全局安装typescript（可选） $ npm install -g typescript // 新建项目的时候会自动安装typescript(非全局)所以这里也可以不用安装。
  2. 全局安装Angular CLI
yarn global add @angular/cli 或者 npm install @angular/cli -g
  • 如果要卸载，执行下面命令： yarn global remove @angular/cli

经过不算漫长的等待，你的Angular CLI就装好了。确认一下：

  • 检验安装是否成功 ng version 或者 ng v

新建Angular项目

新建Angular项目

ng new my-app

如果要跳过npm i安装 ng new my-app –skip-install

趁着它在下载，来看一下运行ng new之后Angular cli已经帮我们干了什么：

那么，这时候Angular cli帮你干了以下这么多事情：

  • 创建 my-app 目录
  • 应用程序相关的源文件和目录将会被创建
  • 应用程序的所有依赖 (package.json中配置的依赖项) 将会被自动安装
  • 自动配置项目中的 TypeScript 开发环境
  • 自动配置 Karma 单元测试环境
  • 自动配置 Protractor (end-to-end) 测试环境
  • 创建 environment 相关的文件并初始化为默认的设置

启动项目

安装完成之后就可以启动项目了：

cd my-app //进入my-app

npm start 或者 ng serve //启服务

ng serve命令会启动开发服务器，监听文件变化，并在修改这些文件时重新构建此应用。 使用–open（或-o）参数可以自动打开浏览器并访问http://localhost:4200/。

ng serve命令提供了很多参数，可以适当参考。 以下参数仅供参考：

--dry-run: boolean, 默认为 false, 若设置 dry-run 则不会创建任何文件
--verbose: boolean, 默认为 false
--link-cli: boolean, 默认为 false, 自动链接到 @angular/cli 包
--skip-install: boolean, 默认为 false, 表示跳过 npm install
--skip-git: boolean, 默认为 false, 表示该目录不初始化为 git 仓库
--skip-tests: boolean, 默认为 false, 表示不创建 tests 相关文件
--skip-commit: boolean, 默认为 false, 表示不进行初始提交
--directory: string, 用于设置创建的目录名，默认与应用程序的同名
--source-dir: string, 默认为 'src', 用于设置源文件目录的名称
--stylring, 默认为 'css', 用于设置选用的样式语法 ('css', 'less' or 'scss')
--prefix: string, 默认为 'app', 用于设置创建新组件时，组件选择器使用的前缀
--mobile: boolean, 默认为 false,表示是否生成 Progressive Web App 应用程序
--routing: boolean, 默认为 false, 表示新增带有路由信息的模块，并添加到根模块中
--inline-style: boolean, 默认为 false, 表示当创建新的应用程序时，使用内联样式
--inline-template: boolean, 默认为 false, 表示当创建新的应用程序时，使用内联模板

其他文件：

.editorconfig： 给你的编辑器看的一个简单配置文件
.gitignore： git 排除文件
angular.json： angular cli 的配置文件
package.json：npm 配置文件，项目使用到的第三方依赖包
protractor.conf.js- ：运行 ng e2e 的时候会用到
README.md：项目的基础文档
tsconfig.json：TypeScript 编译器的配置
tslint.json：运行 ng lint 时会用到

Angular CLI简单使用

新建组件

ng generate component news

  • installing component

    • create src/app/great-angular/news.component.css
    • create src/app/great-angular/news.component.html
    • create src/app/great-angular/news.component.spec.ts
    • create src/app/great-angular/news.component.ts
    • update src/app/app.module.ts

    如你所见，Angular cli帮我们干了如下事情：

  • src/app/news 目录被创建

  • news目录下会生成以下四个文件：

  • CSS 样式文件，用于设置组件的样式

  • HTML 模板文件，用于设置组件的模板

  • TypeScript 文件，里面包含一个 组件类和组件的元信息

  • Spec 文件，包含组件相关的测试用例

  • news 组件会被自动地添加到 app.module.ts @NgModule 装饰器的 declarations 属性中。

其他命令

Angualr CLI提供了许多常用命令供我们选择：

  • ng generate class my-new-class // 新建类， 新建一个名为my-new-class的类 (class)
  • ng generate component my-new-component // 新建组件
  • ng generate directive my-new-directive // 新建指令
  • ng generate enum my-new-enum // 新建枚举
  • ng generate module my-new-module // 新建模块
  • ng generate pipe my-new-pipe // 新建管道
  • ng generate service my-new-service // 新建服务

当然选择。。简写：

  • ng g cl my-new-class // 新建 class
  • ng g c my-new-component // 新建组件
  • ng g d my-new-directive // 新建指令
  • ng g e my-new-enum // 新建枚举
  • ng g m my-new-module // 新建模块
  • ng g p my-new-pipe // 新建管道
  • ng g s my-new-service // 新建服务

单元测试

Angular默认集成了``karma`测试框架，只需要： ng test

端到端测试

ng e2e

构建应用程序

ng build

其中过程应该是这样的： Angular CLI 从 .angular-cli.json 文件中加载配置信息 Angular CLI 运行 Webpack 打包项目相关的 html、 CSS 等文件 打包后的资源，将被输出到配置文件中 outDir 所指定的目录，默认是输出到 dist 目录。

Angular开发工具介绍

Visual Studio Code

angular