Angular 的安装和使用

念雨發表於 2020-12-23 14:32:00

本文内容概要：
<ul>
<li>angular简单介绍</li>
<li>安装angular的依赖环境</li>
<li>angular的简单应用（创建项目+组件+module+service+class）</li>
<li>组件中主要文件的介绍</li>
</ul>
 
<blockquote>
介绍
</blockquote>
Angular是一套用于构建用户界面的JavaScript框架。有Google开发和维护，主要用来开发单页面应用程序。类似于vue.js。
特性
<ul>
<li>MVVM（数据驱动视图思想）</li>
<li>组件化</li>
<li>模块化</li>
<li>指令</li>
<li>服务</li>
<li>依赖注入</li>
<li>Typescript</li>
<li>、、、、、、</li>
</ul>
现状
目前，无论我们使用什么前端框架，都必然要使用到各种NodeJS工具，angular也不列外。与其它框架不同，angular从一开始就走的“全家桶”式的设计思路，因此 @angular/cli 这款工具里面集成了日常开发需要使用的所有Node模块，使用 @angular/cli 可以大幅度降低搭建开发环境的难度。
<blockquote>
安装依赖环境
</blockquote>
安装Node.js
<ul>
<li>下载地址：https://nodejs.org/en/download/</li>
<li>安装后在cmd中输入：node -v  确认Node.js环境</li>
</ul>
安装npm
<ul>
<li>npm会随着node的安装一起被安装。</li>
<li>在cmd中输入npm -v 确认npm环境。</li>
</ul>
由于@angular/cli同时依赖python，故同样需要安装python的运行环境，这里不多做赘述。
安装c++编译工具
<ul>
<li>@angular/cli在Windows上同时依赖c++编译工具，所以也需要单独安装Visual Studio。</li>
<li>执行下面的命令安装c++编译工具：</li>
</ul>
<div class="cnblogs_code">
<pre>npm install --global --production windows-build-tools</pre>
</div>
安装 cnpm
cnpm是国内淘宝为了解决npm安装过慢而产生的镜像，因为npm安装是通过外网下载的，很多时候容易安装失败，故建议用cnpm，当然不是必须的。
<div class="cnblogs_code">
<pre>npm i -g cnpm --registry=https://registry.npm.taobao.org</pre>
</div>
安装 @angular/cli
Angular CLI是Angular官方开发的一个类似与Vue CLI的脚手架开发工具，它帮我们集成了webpack打包、开发服务器、单元测试、自动编译、部署等功能。
<div class="cnblogs_code">
<pre>cnpm i -g @angular/cli</pre>
</div>
安装后在cmd中输入 ng --version 确认是否安装成功。
安装失败解决方案
<ul>
<li>在Windows平台上安装@angular/cli会报很多error，那是因为@angular/cli 在Windows平台上面依赖python和Visual Studio 环境，而很多开发者并不一定安装了这些。</li>
<li>以及node-sass模块被墙的问题，强烈推荐使用cnpm进行安装，可以非常有效地避免撞墙。</li>
<li>如果安装失败，请手动把全局的@angular/cli 删掉：
<div class="cnblogs_code">
<pre>cnpm uninstall -g @angular/cli</pre>
</div>
</li>
<li>如果node_modules删不掉，爆出路径过长之类的错误，请尝试用一些文件粉碎机之类的工具强行删除。</li>
<li>其实无论用什么开发环境，安装的过程中请仔细看错误日志。</li>
</ul>
<blockquote>
Angular的简单应用（创建项目+component+module+service+class）
</blockquote>
<ul>
<li>使用脚手架工具初始化创建项目</li>
</ul>
<div class="cnblogs_code">
<pre>ng new angular-demo（angular-demo：项目名称）</pre>
</div>
Angular CLI 将会自动帮我们把目录结构创建好，并且会自动生成一些目录文件。如下图所示：
<img src="https://img2020.cnblogs.com/blog/1487352/202012/1487352-20201223112443455-403350860.png">
 
 注意：这里自动下载第三方包的依赖文件时通过快捷键CTRL+C打断，不要自动下载，这样很可能会出错，我们通过cnpm手动去安装就好。
<div class="cnblogs_code">
<pre>cd angular-demo
cnpm install || cnpm i</pre>
</div>
<ul>
<li>启动angular应用程序（Server the application）</li>
</ul>
使用脚手架工具初始化项目完成之后，就可以启动开发模式了。
<div class="cnblogs_code">
<pre>ng serve

//或者npm start</pre>
</div>
注意：
<ul>
<li>在项目根目录下执行</li>
<li>是 serve 不是server，我就经常手误输错。</li>
<li>该命令默认会开启一个服务器占用4200端口，如果想要修改可以通过 --port 参数来指定，例如：</li>
</ul>
<div class="cnblogs_code">
<pre>ng server --port 5000</pre>
</div>
 
<img src="https://img2020.cnblogs.com/blog/1487352/202012/1487352-20201223114538689-825182925.png">
如上图所示，我们在进行项目编写的时候，所有的编写文件基本都在src目录文件下。
<ul>
<li>使用命令在 src/app/pages 目录下创建新组件（component）</li>
</ul>
<div class="cnblogs_code">
<pre>ng generate component NewComponentName
|| ng g component 组件名称
//NewComponentName 新组建名称</pre>
</div>
<ul>
<li>使用 Angular CLI 创建一个新模块(module)</li>
</ul>
 
<div class="cnblogs_code">
<pre>ng generate module 模块名称
|| ng g module 模块名称</pre>
</div>
 
<ul>
<li>
使用 Angular CLI 创建一个新服务(service)
</li>
</ul>
 
<div class="cnblogs_code">
<pre>ng generate service 服务名称
|| ng g service 服务名称</pre>
</div>
 
<ul>
<li>
使用 Angular CLI 创建一个简易的模型类(class)
</li>
</ul>
 
<div class="cnblogs_code">
<pre>ng generate class 类名称</pre>
</div>
 
<blockquote>
组件中主要文件的介绍
</blockquote>
 
<ul>
<li>main.ts </li>
<li>这个文件就是模块化启动入口，负责加载启动根模块。</li>
</ul>
<img src="https://img2020.cnblogs.com/blog/1487352/202012/1487352-20201223115002999-1881873172.png">
 主要是去加载app目录下的组件，如下图所示：
<img src="https://img2020.cnblogs.com/blog/1487352/202012/1487352-20201223115415040-2100921886.png">
<ul>
<li> component.ts文件</li>
<li>而我们主要关注的就是此核心文件 ----- 项目的根组件。在angular中组件就是一个类。</li>
<li>@component 组件的装饰器</li>
<li>selecor 用来定义组件渲染的标签名称，说白了就是组件的名字</li>
<li>templateUrl 用来指定组件的模板文件</li>
<li>styleUrls 一个数组，用来存放组件相关的样式文件</li>
</ul>
 <img src="https://img2020.cnblogs.com/blog/1487352/202012/1487352-20201223120406557-2063916712.png">
<ul>
<li> HTML文件</li>
</ul>
<img src="https://img2020.cnblogs.com/blog/1487352/202012/1487352-20201223120558711-1506124307.png">
 上图中{{ }}中的 title 对应的便是component.ts中的 title 。（图中的绿色部分）
<ul>
<li>moudle文件</li>
<li>项目的根模块。负责把组件、服务、路由、指令等组织到一起，设置启动组件为根组件。</li>
</ul>
目录结构
<img src="https://img2020.cnblogs.com/blog/1487352/202012/1487352-20201223134928231-1528911763.png">
 
 npm scripts 介绍
<img src="https://img2020.cnblogs.com/blog/1487352/202012/1487352-20201223135101868-579944182.png">
 
原文件如下图所示：
<img src="https://img2020.cnblogs.com/blog/1487352/202012/1487352-20201223135358608-852891997.png">
 
 以上内容只是一个简单的介绍，具体以angular官网文档为准：https://angular.cn/docs
  
来源：https://www.cnblogs.com/Chestnut-g/p/14177886.html

頁: [1]

琼殿技术论坛's Archiver

Angular 的安装和使用