angular前期准备

最新推荐文章于 2024-06-13 08:00:00 发布

ysesa

最新推荐文章于 2024-06-13 08:00:00 发布

阅读量616

点赞数 3

分类专栏： angular 文章标签： angular node angular常用命令 node安装及自定义

本文链接：https://blog.csdn.net/yinCheng_qian/article/details/98999341

版权

angular 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Angular基础教程

写在前面

现在大家都说的是前端三大框架vue、react、angular。不过在我看来前端并没有大家所说的那样三大框架。真正能用框架这个词的只有angular。其它两个只能说是js库而已。angular提供以我的愚见来说是非常和后端端的mvc模式相锲合的，而且使用的是TypeScript语言拥有了类型。在编程的时候不用去推断参数是什么类型。相比于var这种不严谨的方式来说，以Java出身的我遇到这个前端框架真的非常的喜欢。喜欢它的严谨，喜欢它的组件化方式。喜欢它让每一个模块的代码控制的让人可以接受的方式。谁又会喜欢动不动就看几千行代码呢？没有任何类型都是var代码一多变量一多想要一个新的人去接手那要花费多大的人力成本。再则，angular拥有的一站式开发，开箱即用的特点也是一个亮点，脚手架会会将我们常用的依赖配置好，在我之前使用vue的时候直接下载vue.js就可以使用了，但你要使用它的路由功能你又要单独去下载，使用公共状态管理又要去下载。所以这个是很麻烦的。但为什么现在使用在国内使用vue的人这么多呢？我觉得吧很大一部的原因是因为真的从事前端开发的人员不懂一门后台语言。对于angular的一些模式是很难理解的，这也就无形之中增加了学习的成本。还有就是angular在国内的资料真的很少。好像是被和谐掉了，之前angular6还能在国内找到官网但现在我之前使用的已经失效了。在我写这个博客的使用angular已经到8了。我在无意间看了一下angular的源码，6和8其实已经发生了很大的变化。所以大家在从6，7升级到8的时候一定要注意。最好是了解清楚，对项目风险之后在考虑升不升级。第一次写博客将自己对angular的一些常用操作和自己的理解分享给大家。与诸君共勉！

环境搭建

安装node环境
下载地址：https://nodejs.org/dist/v4.4.3/node-v4.4.3-x64.msi选择当前版本
安装：
1、下载完成后，双击“node-v6.9.2-x64.msi”，开始安装Node.js

在这里插入图片描述
点击【Next】按钮

勾选复选框，点击【Next】按钮

在这里插入图片描述
修改好目录后，点击【Next】按钮

在这里插入图片描述

安装完后点击【Finish】按钮完成安装

至此Node.js已经安装完成，可以先进行下简单的测试安装是否成功了，后面还要进行环境配置
在键盘按下【win+R】键，输入cmd，然后回车，打开cmd窗口

在这里插入图片描述

安装完后的目录如下图所示：

此处说明下：新版的Node.js已自带npm，安装Node.js时会一起安装，npm的作用就是对Node.js依赖的包进行管理，也可以理解为用来安装/卸载Node.js需要装的东西
五、环境配置
说明：这里的环境配置主要配置的是npm安装的全局模块所在的路径，以及缓存cache的路径，之所以要配置，是因为以后在执行类似：npm install express [-g] （后面的可选参数-g，g代表global全局安装的意思）的安装语句时，会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中，占C盘空间。
例如：我希望将全模块所在路径和缓存路径放在我node.js安装的文件夹中，则在我安装的文件夹【D:\Develop\nodejs】下创建两个文件夹【node_global】及【node_cache】如下图：
在这里插入图片描述
创建完两个空文件夹之后，打开cmd命令窗口，输入
npm config set prefix “D:\Develop\nodejs\node_global”
npm config set cache “D:\Develop\nodejs\node_cache”

接下来设置环境变量，关闭cmd窗口，“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”
在这里插入图片描述
进入环境变量对话框，在【系统变量】下新建【NODE_PATH】，输入【D:\Develop\nodejs\node_global\node_modules】，将【用户变量】下的【Path】修改为【D:\Develop\nodejs\node_global】

六、测试
配置完后，安装个module测试下，我们就安装最常用的express模块，打开cmd窗口，
输入如下命令进行模块的全局安装：
npm install express -g # -g是全局安装的意思
在这里插入图片描述
安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org

安装webpack（打包专用）
cnpm install webpack -g

3. 安装angular-cli(angular脚手架)
npm install -g --save @angular/cli@7.1.4指定版本安装（不指定默认安装最新版本）
可能受到网的影响需要耐心的等待一下。。。。。。。
4.测试
ng version
在这里插入图片描述

基本命令

ng help : 查看可以使用的指令
ng generate --help
ng serve 启动angular项目
ng generate (ng g)
· appShell
· application
· class 创建类（类似Java）
· component 创建组件
· directive 创建指令
· enum 创建枚举类型
· guard 创建守卫（权限验证使用）
· interface 创建接口
· library 包
· module 模块（模块路由使用）
· pipe 管道（做页面翻译）Y—>是
· service 服务用于与后端交互做数据处理
· serviceWorker 做页面缓存
· universal