Angular 4.x 初识



Angular核心:组件


Angular新特性:

Q1:命令行工具:AngularCLI

                  + 生成新项目的骨架

                   + 生成组件的基础代码

                   + 作为一个开发服务器用来调试 编译 部署代码 运行单元化的自动测试

Q2:服务器端渲染:

                    + 提高页面加载速率

                    + 使一个单页应用针对每一个视图去做SEO (搜索引擎)优化,提高优化效率

Q3:移动和桌面兼容:

                     + 框架

                     + UI 组件


Angular架构


+ 整个应用就是一个组建树,

+ 用户看到的页面是这个组建树上几个被激活的组件所组成的,

+ 用户可以通过一些操作从一个组件路由到另一个组件,

+ 用户可以与某个组件进行交互,这种交互会由这个组件来负责处理,

+ 组件可以通过依赖注入的方式引入一些服务,并用这些服务来处理用户的操作或者与服务器进行通信


Angular基本概念


组件:Angular应用的基本构建块,可理解为一段带有业务逻辑和数据的Html  ||  一个具有特定功能的,可被反复使用的视图

+ Component

+ 组件必备元素:@Component()     Template     Controller

+ 组件元数据装饰器:@Component()

         - 用来告知 Angular 框架如何处理一个TypeScript类

        -  Component 的多个属性的值叫做元数据,Angular 会根据这些元数据的值来渲染组件并执行组件的逻辑

服务:服务是指那些能够被其它的组件或者指令调用的单一的,可共享的代码块【用来封装可重用的业务逻辑 】   ;  组件可以调服务,服务也可以调用服务

指令:指令主要用来对模板的标签或者元素附加一些新的特性或者功能,改变一个 DOM 元素的外观或行为,Ag4指令和组件十分类似,也有由模块,注解,元数据以及组件类组成,实际上组件继承于指令,不同的是指令没有模板的信息,主要存在两种类型的指令:

      结构型指令:会通过添加 / 删除 DOM 元素来更改 DOM 树布局

      属性型指令:指令改变一个元素的外观或行为。

管道:本质是一个方法,用来实现对于数据的筛选 过滤 格式化

模块:将应用中不同的部分组织成一个Angular框架可以理解的单元

+Template

+ 通过组件自带的模版来定义组件的外观

+ 模版以Html的形式存在,告诉Angular如何来渲染组件

+ 可以在模版中使用Angular的数据绑定语法来呈现控制器中的数据

组件,服务,指令 是用来完成功能的

模块是用来打包和分发这些功能的

控制器

+ Controller() {   }

+ 控制器就是一个普通的TypeScript类

+ 会被装饰器装饰

+ 控制器包含组件所有的属性和方法

+ 控制器通过数据绑定与模板进行通信,模版展现控制器的数据,控制器处理模板上发生的事件

数据绑定:让模版的各个部分与控制器的各个部分相互作用的一个机制

+ 绑定方式:{{}}  ,属性绑定  ,  事件绑定  ,双向绑定

依赖注入:将我们需要用到的东西 注入 到当前的对象中去用,是通过提供器的设置来实现的

件元数据装饰器:

+ 输入属性:@Inputs()

     - 用于接受外部传入的数据

     - 使得父组件可以直接传值给子组件

+ 提供器:providers

     -  用来做依赖注入的

+ 样式表:styles

+ 动画:Animations

+ 输出属性:@Outputs

单例模式:在angular中 服务就是单例模式的类;单例模式指的在一个应用程序中,这个对象只保留单个实例。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,843评论 6 502
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,538评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,187评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,264评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,289评论 6 390
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,231评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,116评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,945评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,367评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,581评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,754评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,458评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,068评论 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,692评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,842评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,797评论 2 369
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,654评论 2 354

推荐阅读更多精彩内容

  • Angular 2架构总览 - 简书http://www.jianshu.com/p/aeb11061b82c A...
    葡萄喃喃呓语阅读 1,485评论 2 13
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,652评论 18 139
  • Angular 2是一个帮助我们使用HTML和JavaScript构建客户端应用的框架。这个框架包含几个互相协作的...
    JasonQiao阅读 7,114评论 1 48
  • 白浅终于跳下诛仙台了! 等了那么久,众生都在等着白浅上神涅槃重生,连杨幂都怀疑自己可能演了一部假电视剧。 重生之后...
    绫罗姑娘阅读 618评论 0 4
  • 连续98天灵修经文 【诗31:14】耶和华啊,我仍旧倚靠你。我说:“你是我的神。” 《感动》感恩宣告耶和华你是我的...
    报佳音阅读 193评论 0 0