Angular 的安装和使用

本文内容概要：

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

 

介绍

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的简单应用（建立项目+模板）

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

ng new angular-demo

Angular CLI 将会自动帮咱们把目录结构建立好，而且会自动生成一些目录文件。以下图所示：

 

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

cd angular-demo
cnpm install

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

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

ng serve

//或者  npm start

注意：

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

ng server --port 5000

 

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

• 使用命令在 src/app/pages 目录下建立新组件

 

ng generate component NewComponentName
//NewComponentName 新组建名称

组件中主要文件的介绍

 

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

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

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

 

•  HTML文件

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

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

目录结构

 

 npm scripts 介绍

 

原文件以下图所示：

 

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