Angular入门教程
骑士李四记录:
1.Augular介绍:
Angular 是一个用 HTML 和 TypeScript 构建客户端应用的平台与框架。 Angular 本身就是用 TypeScript 写成的。它将核心功能和可选功能作为一组 TypeScript 库进行实。
Angular 的基本构造块是 NgModule,它为组件提供了编译的上下文环境。 NgModule 会把相关的代码收集到一些功能集中。
Angular 应用就是由一组 NgModule 定义出的。 应用至少会有一个用于引导应用的根模块,通常还会有很多特性模块。(每个 Angular 应用都有一个根模块,通常命名为 AppModule。根模块提供了用来启动应用的引导机制。 一个应用通常会包含很多特性模块。)
AngularJS 通过指令 ng-directives 扩展了 HTML。
2.NgModule 简介
Angular 应用是模块化的,它拥有自己的模块化系统,称作 NgModule。
每个 Angular 应用都至少有一个 NgModule 类,也就是根模块,它习惯上命名为 AppModule,并位于一个名叫 app.module.ts 的文件中。引导这个根模块就可以启动你的应用。
NgModule 和 JavaScript 的模块:
NgModule 系统与 JavaScript(ES2015)用来管理 JavaScript 对象的模块系统不同,而且也没有直接关联。 这两种模块系统不同但互补。你可以使用它们来共同编写你的应用。
javaScript 中,每个文件是一个模块,文件中定义的所有对象都从属于那个模块。 通过 export 关键字,模块可以把它的某些对象声明为公共的。 其它 JavaScript 模块可以使用import 语句来访问这些公共对象。
3.Angular的生命周期
生命周期函数通俗的讲就是组件创建、组件更新、组件销毁的时候会触发的一系列的方法。
当 Angular 使用构造函数新建一个组件或指令后,就会按下面的顺序在特定时刻调用这些 生命周期钩子方法。
每个接口都有唯一的一个钩子方法,它们的名字是由接口名再加上ng前缀构成的,比如OnInit接口的钩子方法叫做ngOnInit。
生命周期钩子的作用及调用顺序
ngOnChanges - 当数据绑定输入属性的值发生变化时调用
ngOnInit - 在第一次 ngOnChanges 后调用
ngDoCheck - 自定义的方法,用于检测和处理值的改变
ngAfterContentInit - 在组件内容初始化之后调用
ngAfterContentChecked - 组件每次检查内容时调用
ngAfterViewInit - 组件相应的视图初始化之后调用
ngAfterViewChecked - 组件每次检查视图时调用
ngOnDestroy - 指令销毁前调用
待完成。。
Angular入门教程相关推荐
- Angular 入门教程系列:37:使用ng-alain快速开发
ng-alain在ng-zorro-antd上再封一程,可以更快加速开发速度,目前在github上已经超过1800个star.这篇文章来简单看一下如何使用. 创建应用框架 因为alain缺省使用使用l ...
- Angular 入门教程系列:39:使用ng-alain进行开发
在前面的文章中介绍过ng-alain,当时在使用的时候还显得不是很方便,最简单的一个demo运行的都不是非常流畅.而目前的版本已经做有较大的改进,再这个基础上进行二次开发,尤其是一些后端的平台或者监控 ...
- Angular 入门教程系列:24:Angular 6 + NG-Zorro
NG-Zorro发行到1.0版本后,理论上说兼容性考虑地会好一些,可以考虑引入了.因为其需要Angular 6的版本,而Angular 6在本年度5月份左右刚刚发布,而且考虑到rxjs等相关的变化,低 ...
- Angular 入门教程系列:36:Restful的增删改查
上篇文章中讲解了增删改查中的查,这篇来看一下如何进行增删改. 删除 使用delete进行删除,一般页面设计的时候也基本都是在列表页进行操作的.首先为删除的链接添加一个函数,因为一般删除都需要传入可定位 ...
- 【前端】Angular8入门教程笔记+Angular material安装与使用
一. Angular介绍 Angular是谷歌开发的一款开源的web前端框架,诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Goo ...
- eBPF Tracing 入门教程与实例
2019独角兽企业重金招聘Python工程师标准>>> 原文链接 Learn eBPF Tracing: Tutorial and Examples 译者 弃余 在 LPC'18(L ...
- Angular2入门教程-1
2019独角兽企业重金招聘Python工程师标准>>> Angular2入门教程-1 今天,Angular2终于正式发布了2.0.0的正式版,所以已经可以开始正式使用了. Angul ...
- ionic入门教程第十六课-在微信中使用ionic的解决方案(按需加载加强版)
对于微信端来说,其实使用ionic是一个比较大的前端框架. 有更多比较轻量化的前端框架可以选择. 但是使用ionic有一个明显的优点就是,能够做到一端开发,三端同步上线. 这个梗说了好多遍了,但确实是 ...
- .NET Core快速入门教程 2、我的第一个.NET Core App(Windows篇)
一.前言 本篇开发环境? 1.操作系统: Windows 10 X64 2.SDK: .NET Core 2.0 Preview 二.安装 .NET Core SDK 1.下载 .NET Core 下 ...
最新文章
- 【视频课】如何掌握好深度学习之视频分类与行为识别?这一门课足矣!
- Linux的secureCRT设置字体大小
- mpu 配置内存空间_PCIE的内存地址空间、I/O地址空间和配置地址空间
- redhat6.8链路聚合
- python制作查询网页_peewee数据查询之分页返回——python学习笔记
- C#LeetCode刷题-脑筋急转弯
- java语言基础02
- 发烧游戏机型的计算机制配单,万元主机配置发烧级游戏设计渲染配置单
- 大麦支持选座位、定时等功能
- 精细化运营的用户分层方法论——RFM
- 串口是怎样传输数据的
- js获取不同时区时间
- Linux软件包管理工具-yum
- python爬虫+数据分析完整流程--豆瓣电影分类排行榜
- 我为什么要离开传智再去创业?
- Python--print(xx)内容为空,打印不出内容;原因是文件句柄对象在迭代后,对象内的数据会逐渐清空
- 网络+C#各个网上转载
- 【验证工具类-ValidateUtil-java】
- 成品app直播源码,java编写字母顺序矩阵
- 【量化】实战获取Fama-French三因子模型的数据源