Angular 的安装和使用

本文内容概要：

• angular简单介绍
• 安装angular的依赖环境
• angular的简单应用（创建项目+组件+module+service+class）
• 组件中主要文件的介绍

 

介绍

Angular是一套用于构建用户界面的JavaScript框架。有Google开发和维护，主要用来开发单页面应用程序。类似于vue.js。

特性

• MVVM（数据驱动视图思想）
• 组件化
• 模块化
• 指令
• 服务
• 依赖注入
• Typescript
• 、、、、、、

现状

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

安装依赖环境

安装Node.js

• 下载地址：https://nodejs.org/en/download/
• 安装后在cmd中输入：node -v  确认Node.js环境

安装npm

• npm会随着node的安装一起被安装。
• 在cmd中输入npm -v 确认npm环境。

由于@angular/cli同时依赖python，故同样需要安装python的运行环境，这里不多做赘述。

安装c++编译工具

• @angular/cli在Windows上同时依赖c++编译工具，所以也需要单独安装Visual Studio。
• 执行下面的命令安装c++编译工具：

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

安装 cnpm

cnpm是国内淘宝为了解决npm安装过慢而产生的镜像，因为npm安装是通过外网下载的，很多时候容易安装失败，故建议用cnpm，当然不是必须的。

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

安装 @angular/cli

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

cnpm i -g @angular/cli

安装后在cmd中输入 ng --version 确认是否安装成功。

安装失败解决方案

• 在Windows平台上安装@angular/cli会报很多error，那是因为@angular/cli 在Windows平台上面依赖python和Visual Studio 环境，而很多开发者并不一定安装了这些。
• 以及node-sass模块被墙的问题，强烈推荐使用cnpm进行安装，可以非常有效地避免撞墙。
• 如果安装失败，请手动把全局的@angular/cli 删掉：

  cnpm uninstall -g @angular/cli

• 如果node_modules删不掉，爆出路径过长之类的错误，请尝试用一些文件粉碎机之类的工具强行删除。
• 其实无论用什么开发环境，安装的过程中请仔细看错误日志。

Angular的简单应用（创建项目+component+module+service+class）

• 使用脚手架工具初始化创建项目

ng new angular-demo（angular-demo：项目名称）

Angular CLI 将会自动帮我们把目录结构创建好，并且会自动生成一些目录文件。如下图所示：

 

 注意：这里自动下载第三方包的依赖文件时通过快捷键CTRL+C打断，不要自动下载，这样很可能会出错，我们通过cnpm手动去安装就好。

cd angular-demo
cnpm install || cnpm i

• 启动angular应用程序（Server the application）

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

ng serve

//或者  npm start

注意：

• 在项目根目录下执行
• 是 serve 不是server，我就经常手误输错。
• 该命令默认会开启一个服务器占用4200端口，如果想要修改可以通过 --port 参数来指定，例如 ：

ng server --port 5000

 

如上图所示，我们在进行项目编写的时候，所有的编写文件基本都在src目录文件下。

• 使用命令在 src/app/pages 目录下创建新组件（component）

ng generate component NewComponentName 
|| ng g component 组件名称
//NewComponentName 新组建名称

• 使用 Angular CLI 创建一个新模块(module)

 

ng generate module 模块名称
|| ng g module 模块名称

 

• 使用 Angular CLI 创建一个新服务(service)

 

ng generate service 服务名称
|| ng g service 服务名称

 

• 使用 Angular CLI 创建一个简易的模型类(class)

 

ng generate class 类名称

 

组件中主要文件的介绍

 

• main.ts 
• 这个文件就是模块化启动入口，负责加载启动根模块。

 主要是去加载app目录下的组件，如下图所示：

•  component.ts文件
• 而我们主要关注的就是此核心文件 ----- 项目的根组件。在angular中组件就是一个类。
• @component 组件的装饰器
• selecor 用来定义组件渲染的标签名称，说白了就是组件的名字
• templateUrl 用来指定组件的模板文件
• styleUrls 一个数组，用来存放组件相关的样式文件

 

•  HTML文件

 上图中{{ }}中的 title 对应的便是component.ts中的 title 。（图中的绿色部分）

• moudle文件
• 项目的根模块。负责把组件、服务、路由、指令等组织到一起，设置启动组件为根组件。

目录结构

 

 npm scripts 介绍

 

原文件如下图所示：

 

 以上内容只是一个简单的介绍，具体以angular官网文档为准：https://angular.cn/docs