Angular笔记01--初探前端

最新推荐文章于 2024-11-02 12:42:04 发布

*MaybE

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量436

点赞数 1

分类专栏： Angular笔记文章标签： angular typescript javascript node.js

本文链接：https://blog.csdn.net/weixin_43903745/article/details/105840334

版权

Angular笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Angular笔记--01

前言：

不知不觉来公司实习已经半年了，在这之前自己一直是学的java，所以面试的岗位也是Java开发，可能是因为自己是刚出来实习吧，刚好公司前端也缺人，所以就稀里糊涂的干起了前端,而我的前端也就是简单的学过html+css+js而已。刚开始公司给我安排了一个前端的师傅带我，我也是一脸懵逼地看着师傅问他前端要学哪些东西。。。师傅让我先去看angular的官方文档，结合着目前正开发的项目代码，有不懂的就问他。
看着眼花缭乱的前端代码，小朋友我有很多问号啊!!!
下面是我头两天的几点体会。。。

我自己该如何搭建一个项目啊！
这个项目的目录结构我咋感觉有点懵逼啊！
这些花花绿绿的标签怎么比我之前了解的html标签复杂多了啊！
.ts文件是什么鬼？

岁月是把杀猪刀，在我被狠狠捅了半年后，现在对于我之前的几个问题也有了一点新的感悟并顺手做个记录。

Angular项目的搭建（我用的是webstorm）

1.在搭建项目之前首先要安装node.js (建议安装最稳定的)
这个可以直接去官网下载 https://nodejs.org/en/
安装完node.js后会自动安装npm，可以通过node -v和npm -v查看版本
在这里插入图片描述
安装完npm后我们会发现npm的速度很慢有的时候还会报错，所以这边推荐淘宝镜像cnpm，安装cnpm如下：

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

2.安装angular cli
可以使用npm也可以cnpm,我这边是用的cnpm

cnpm install -g @angular/cli

出现下面的样子说明说有的包都安装完了
在这里插入图片描述
然后我们输入ng v来看下版本

3.新建项目demo
我们可以通过命令ng new demo 来新建一个demo项目

然后它会问你是否添加路由，这里我选的n，然后会让你选择css样式，这边我选的less，接下来就开始自动创建项目所需的各种文件了（这个可能要等等，成功后就会出现successful）

成功后进入demo这个文件夹，然后cnpm install 安装依赖包（如果没进入demo会报错找不到package.json）

在这里插入图片描述

如果成功了会提示 All package installed
在这里插入图片描述
然后我们可以在demo中输入npm start启动，出现下面的页面点击链接

点击完页面后我们会发现项目正常创建和启动了

4.安装过程中出错的解决办法
在安装中出错一般会发生在cnpm install -g @angular/cli 或者 ng new demo或者cnpm install命令执行之后
一般常用的办法就是卸载、清缓存、重新安装，如果npm有问题就用cnpm，反之亦然。如果都不行那可能就是版本不兼容的问题，然后该卸载的卸载，该升级的升级。当然看报错原因永远是第一步，要灵活处理。
以安装脚手架出错为例：
卸载angular cli npm uninstall -g angular-cli
清理缓存和残留npm cache verify
重新安装npm install -g @angular/cli(如果想下载指定版本号的cli 指令：npm install -g @angular/cli@版本号 )

Angular项目目录结构详解

首先我们来看下项目demo的目录结构
在这里插入图片描述
首层目录

e2e                             端到端的测试目录，顾名思义测试用的
node_modules					第三方依赖包的存放目录
scr								我们平时的应用源代码目录
.editorconfig					给编辑器看的一个简单配置文件
.gitignore						git的配置文件
angular.json					angular cli的配置文件
browserslist					浏览器配置
karma.conf.js					给karam的单元配置测试
package.json					npm的配置文件
package-lock.json				用来锁定package.json中包的版本号
README.md						项目的说明文档
tsconfig.app.json				ts编辑器的配置文件，添加第三方依赖时会用到	
tsconfig.json					ts编辑器的配置文件
tsconfig.spec.json				ts编辑器的配置文件
tslint.json						tslint的配置文件，不用管

src目录
在这里插入图片描述

app						存放应用的组件和模块	
assets					存放静态资源
environment				环境配置的目录
favicon.ico				书签图标
index.html				程序启动访问的页面
main.ts					angular项目主入口，通过这个文件启动项目的
polyfills.ts			主要是用来导入一些必要库，为了让Angular能正常运行在老版本下
styles.less				存放全局样式
test.ts					测试用的

app目录
在这里插入图片描述

app.component.html				html模板
app.component.less				样式文件
app.component.spec.ts			单元测试
app.component.ts				组件
app.module.ts					根模块

assets和environment
在这里插入图片描述

assets     					存放静态资源比如图片
environment					环境配置（包括开发、测试、生产）
	environment.prod.ts 	生产环境
	environment.ts			开发环境
	environment.test.ts 	测试环境

Angular组件库

当我第一次看公司前端项目的代码时我发现好多自己不认识的标签和属性，比如下面的一串简单的代码当初我是真的看的蒙蔽，nz-form是啥，nz-form-item，nz-form-item，nz-form-control，nz-input又是啥，[nzSpan],nzFor等等，我问师傅的时候他也是很无语，问我angular的文档看了没，我说看了里面没有，结果他点开一个东西叫ng-zorro组件库让我去里面找。。。。。。

<form nz-form>
  <nz-form-item>
    <nz-form-label [nzSpan]="6" nzFor="email">E-mail</nz-form-label>
    <nz-form-control [nzSpan]="14">
      <input nz-input name="email" type="email" id="email">
    </nz-form-control>
  </nz-form-item >
</form>

我们打开angular的官方文档会发现有四个组件库，目前我所在的公司用的是ng-zorro组件库（关于ng-zorro的学习过段时间更新）
在这里插入图片描述
那么问题也来了，组件库是啥，为啥要使用组件库？
就我目前开发中我对组件库的理解：
我们平时都有玩过积木吧，当我们打开一套新的积木后会发现里面有各种形状的积木。当我们需要某个形状的积木的时候可以直接拿来和其他积木进行拼接从而搭出房子、车子等各种物件。我们现在看下这些积木的特点：

每个形状的积木都是相互独立的并且可以重复使用（复用性）
当某块积木坏掉的时候可以拿出来单独对其进行修补和维护（可维护性）
每个积木都是按照同一套标准生产的从而可以相互拼接（标准性）
使用各种不同的积木可以拼出不同的物品（可组合性）

组件库的使用可以让我们在开发中避免出现因为一个小小的改动从而去改动整个系统的现象，同时组件库还对我们常用的一些功能进行了组件的封装，可以明显地提高我们的开发效率，降低我们的维护成本，另外因为组件库中组件是使用同一套标准的，所以可以方便我们进行多人员的开发。

TypeScript----JavaScript的超集

1.TypeScript和JavaScript的差异

js的特点：

无需编译，只要嵌入html代码中浏览器就可以逐行加载
可以创建和使用对象，但是对象（object）则是依靠构造器（constructor）利用原型（prototype）构造出来的，而在基于类的面向对象方式中，如java，对象（object）依靠类（class）来产生。
弱类型语言
仅在浏览器端执行不会访问硬盘数据
具有动态性，JavaScript 是事件驱动的，只根据用户的操作做出相应的反应处理。
可以跨平台
兼容性好

ts的特点:

TypeScript 是 Microsoft 推出的开源语言，使用 Apache 授权协议
TypeScript 增加了静态类型、类、模块、接口和类型注解
TypeScript 可用于开发大型的应用
TypeScript 易学易于理解

差异：

JavaScript 代码可以在无需任何修改的情况下与 TypeScript 一同工作，同时可以使用编译器将 TypeScript 代码转换为 JavaScript。
TypeScript 通过类型注解提供编译时的静态类型检查。
TypeScript 中的数据要求带有明确的类型，JavaScript不要求。
TypeScript 为函数提供了缺省参数值。
TypeScript 引入了 JavaScript 中没有的“类”概念。
TypeScript 中引入了模块的概念，可以把声明、数据、函数和类封装在模块中。

2.TypeScript比JavaScript的优点