Angular入门,开发环境搭建,使用Angular CLI创建你的第一个Angular项目
前言:
最近一直在使用阿里的NG-ZORRO(Angular组件库)开发公司后端的管理系统,写了一段时间的Angular以后发现对于我们.NET后端开发而言真是非常的友善。因此这篇文章主要是对这段时间使用Angular做一些小总结,希望可以帮到有需要的同学。
Angular学习前必备基础知识点:
TypeScript基本常识:
Angular中文文档:
GitHub地址:
Angular CLI命令参考手册:
Angular中的生命周期函数:
注意:constructor 构造函数(依赖注入,起到对应局部变量值初始化作用): 除了使用简单的值对局部变量进行初始化之外,什么都不应该做!!
钩子
|
用途及时机
|
ngOnChanges()
|
当 Angular(重新)设置数据绑定输入属性时响应。 该方法接受当前和上一属性值的 SimpleChanges 对象
在 ngOnInit() 之前以及所绑定的一个或多个输入属性的值发生变化时都会调用。
|
ngOnInit()
|
在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件。
在第一轮 ngOnChanges() 完成之后调用,只调用一次。[请求数据时使用]
|
ngDoCheck()
|
检测,并在发生 Angular 无法或不愿意自己检测的变化时作出反应。
在每个变更检测周期中,紧跟在 ngOnChanges() 和 ngOnInit() 后面调用。
|
ngAfterContentInit()
|
当 Angular 把外部内容投影进组件/指令的视图之后调用。
第一次 ngDoCheck() 之后调用,只调用一次。
|
ngAfterContentChecked()
|
每当 Angular 完成被投影组件内容的变更检测之后调用。
ngAfterContentInit() 和每次 ngDoCheck() 之后调用
|
ngAfterViewInit()
|
当 Angular 初始化完组件视图及其子视图之后调用。
第一次 ngAfterContentChecked() 之后调用,只调用一次。
|
ngAfterViewChecked()
|
每当 Angular 做完组件视图和子视图的变更检测之后调用。
ngAfterViewInit() 和每次 ngAfterContentChecked() 之后调用。
|
ngOnDestroy()
|
每当 Angular 每次销毁指令/组件之前调用并清扫。 在这儿反订阅可观察对象和分离事件处理器,以防内存泄漏。
在 Angular 销毁指令/组件之前调用。
|
Node.js(携带NPM包管理工具)安装配置:
安装Nodejs,NodeJS 是必须的:
node --version
node -v
切换npm安装镜像源,解决npm install缓慢问题:
临时切换使用:
npm --registry https://registry.npm.taobao.org install express
持久使用(推荐):
npm config set registry https://registry.npm.taobao.org # 恢复
npm config delete registry
配置后验证是否成功:
npm config get registry
或者
npm info express
安装Angular相关开发环境:
Angular-CLI构建工具(脚手架工具)安装说明:
全局安装脚手架工具:
npm install -g @angular/cli
或者
cnpm install -g @angular/cli --推荐使用速度较快
验证Angular环境是否安装成功:
Angular项目创建并运行:
通过Angular脚手架创建一个新的项目:
ng new MyAngularProject(项目名称)
ng serve --open
ng serve 命令会启动开发服务器、监视文件,并在这些文件发生更改时重建应用。
--open(或者只用 -o 缩写)选项会自动打开你的浏览器,并访问 http://localhost:4200/。
Angular入门,开发环境搭建,使用Angular CLI创建你的第一个Angular项目的更多相关文章
- python从零开始基础入门——开发环境搭建:Visual Studio Code
前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:山海皆可平z PS:如有需要Python学习资料的小伙伴可以加点击下方 ...
- python从零开始基础入门——开发环境搭建
前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:山海皆可平z PS:如有需要Python学习资料的小伙伴可以加点击下方 ...
- Axis2 webservice入门--开发环境搭建,概念理解
关于webservice的概念,网上有各种解释,但是不太好懂. 可以这样理解:1.一个webservice就是一个“功能”,只是这个功能是别人写好的,被放在别人的网站上. ...
- Angular CLI 创建你的第一个 Angular 示例程序
第一步:安装 Angular CLI 你要使用 Angular CLI 来创建项目.创建应用和库代码,并执行多种开发任务,比如测试.打包和发布. 全局安装 Angular CLI. 要想使用 npm ...
- Angular入门之环境搭建(VS code)(转载)
安装Visual Studio Code VS code和我们常用的VS压根不是一回事,它只是一个开源的轻量级编辑器,而不是IDE,因为支持typescript语法,且插件功能丰富,所以选择 官网下载 ...
- 如何学习web开发环境搭建和脚手架
Web前端的学习路线 第一阶段: HTML+CSS: HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础: Js基础教程.js内置对象常用方法.常见DO ...
- monkeyrunner之安卓开发环境搭建(二)
在上一篇文章-安卓开发环境搭建中,我们创建并启动了eclipse自带的安卓模拟器,该模拟器不仅启动慢,而且在使用过程中的反应速度也是出奇的差,经常出现卡机现象.为了解决这种现象,因此,我们又寻找到了更 ...
- hibernate学习系列-----(1)开发环境搭建
其实一两个月前就在了解hibernate方面的知识了,但一直以来,都没有好好的总结,而且一直使用的是myeclipse,感觉有些傻瓜式的操作就可以搭建起hibernate的开发环境,但这样一点都不好, ...
- Spring开发环境搭建(Eclipse)
开发环境搭建,主要包含2部分: Java安装 Eclipse安装 为易于学习,我们只安装这2个部分,对于一般开发学习也足够了.如果你有其他要安装的,酌情添加. Java安装 我们使用Java8: 下载 ...
随机推荐
- 如何使用ABBYY FineReader 处理无法识别的字符?
在识别PDF文档时,我们可能会遇到文档中存在多种语言.多种不同类型文字字符的情况.在ABBYY FineReader 15(Windows系统)OCR文字识别软件的默认语言数据下,可能无法识别PDF文 ...
- Codeforces Round #656 (Div. 3) 题解
A. Three Pairwise Maximums #构造 题目链接 题意 给定三个正整数\(x,y,z\),要求找出正整数\(a,b,c\),满足\(x=max(a,b), y=max(a,c), ...
- CARDS主题 & 导航栏样式修改
每个人对于主题样式的感觉是不一样的,譬如字体大小,间距,高宽,距离,颜色等,我们可以一定程度内很直观地去修改主题的某些样式. 首先,在浏览器中利用开发者工具进行调试,找到我们所要改动的那部分结构,写入 ...
- JVM(三)-java虚拟机类加载机制
概述: 上一篇文章,介绍了java虚拟机的运行时区域,Java虚拟机根据不同的分工,把内存划分为各个不同的区域.在java程序中,最小的运行单元一般都是创建一个对象,然后调用对象的某个 方法.通过上一 ...
- 变更mysql的数据类型兼容小数测试
来吧 我也没想到有一天要做这个测试: 想分为这几步吧: 1.先看看mysql本身支不支持数据的变更 2.再看看mybatis能不能用int接受double和decimal 先看下mysql: alte ...
- finalize和clean
弊端 1.执行的时间不确定,资源释放不能靠这2个方法.Cleaner规范指出:"清除方法在System.exit期间的行为是与实现相关的.不确保清除动作是否会被调用." 2#.如果 ...
- Free-Form Image Inpainting with Gated Convolution
Free-Form Image Inpainting with Gated Convolution pytorch 引言 和Generative Image Inpainting with Conte ...
- 训练yolo之前,anchor聚类问题
前期做数据可视化,发现标签数据存在一些孤立点(噪声点),影响kmeans聚类. 处理方法如下: 使用kmeans迭代10次得到聚类中心 计算所有数据到其聚类中心的欧式距离均值和方差 通过拟合正态分布, ...
- 「刷题笔记」DP优化-状压-EX
棋盘 需要注意的几点: 题面编号都是从0开始的,所以第1行实际指的是中间那行 对\(2^{32}\)取模,其实就是\(unsigned\ int\),直接自然溢出啥事没有 棋子攻击范围不会旋转 首先, ...
- 自定义orm字段
class MyCharField(models.Field): def __init__(self,max_length,*args,**kwargs): self.max_length = max ...