文档章节

Angular基础(二) 组件的使用

zhixin9001
 zhixin9001
发布于 2017/08/16 21:59
字数 893
阅读 26
收藏 0

 

一、简单操作

a) 使用Angular CLI可以快速创建项目框架,先运行 $ npm install –g @angular/cli@1.0.0安装CLI,为CLI的位置设置环境变量,然后就可以全局使用ng命令了。

执行ng new –ng4 angular-hello-world可以创建Angular4项目,会自动生成基础的文件夹和文件,还会自动进行npm i操作,下载并安装所需的依赖。

然后执行ng serve就可以编译并启动这个程序了,但ng并不会自动打开浏览器。

b) 创建一个组件

组件是Angular的核心,运行ng generate componenthello-world可以生成hello-world组件,如果VSCode安装了Angular Files插件,也通过可以方便地右键-添加组件,会为一个组件自动创建四个文件。

组件的基本组成部分为装饰器(Component Decorator)和组件定义类(ComponentDefinition class)。

上图右侧的hello-world.component.ts文件中,import引入两个依赖Component和OnInit;@Component部分便是装饰器了,这部分代码将HelloWorld类装饰成了一个组件。因为selector属性的值为“app-hello-world”,<app-hello-world>标签就可以在html中使用了。templateUrl定义了模板的路径,还可使用template并使用倒引号(`…`)直接在ts文件中嵌入模板内容;styleUrl指定当前组件专属的CSS文件路径。

如此,一个组件就创建好了,在app.component.html中加入<app-hello-world>标签就可以使用这个组件了。

c) 在组件中使用数据。

用插件的功能添加一个user-item组件,会自动创建所有的文件,并已将组件添加到了app.component.html。

在组件的ts文件添加name属性并在构造函数初始化

随后在模板中使用这个属性,语法为{{name}}。

d) 数组的使用。

数组的遍历使用*ngFor,这与razor中的遍历类似,会自动创建包含数组成员的标签。在ts文件中定义字符串数组,可以用string[]或Array<string>的写法。然后*ngFor的使用方式为:

试了下把let换成var就不行了,let声明的变量作用域被限制在了块级,比var安全,可能这儿的模板语法废弃了var吧。

e) 组件的使用

前面创建的user-item组件中的name属性只是使用了默认的值‘Felipe’。实际使用中,组件是可复用的,属性的值应该从外部指定。

要在user-list组件中使用user-item,可以这样修改user-list的模板:

[name]=***这样的写法是在向user-item组件传递值。

修改后的user.item.components.ts如下,导入了Input,并在属性前面加上@Input(),这样就可以从父模板传入值了。

 

二、Angular的启动过程

a) 每个程序都有启动入口,在执行ng serve后,ng会在.angular-cli.json中查找入口,.angular-cli.json指向main.ts文件,而main.ts便是程序的入口。在main.ts中platformBrowserDynamic().bootstrapModule(AppModule)语句表示启动程序会执行AppModule,AppModule在app.module.ts中定义。

b) app.module.ts中的具体内容有:

@NgModule装饰器包含四个属性:declarations、imports、providers和bootstrap。

declaration属性声明了当前AppModule模块包含的组件,创建的新组件会自动添加到这里。

imports属性导入了AppModule依赖的模块。关于imports与头部的import的区别作者后面会细说。

prividers属性用于进行依赖注入,现在不懂了。

bootstrap属性指定了运行该模块时,加载的第一个组件。

 

学习资料:The Complete Book on Angular by Nate Murray, Felipe Coury, AriLerner , Carlos Taborda

 

 

© 著作权归作者所有

zhixin9001
粉丝 6
博文 103
码字总数 87823
作品 0
西安
私信 提问
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
2018/11/09
0
0
AngularJS 和 Polymer 的角色,是否有竞争关系

AngularJS 2.0 一个关键的特性就是支持 Web Components。而 Google 的 Polymer 就是一个 Web Component 技术的实现,同时也是一个基于 Web Components 的框架。那么 AngularJS 和 Polymer 之...

oschina
2014/07/26
9.4K
18
开放才能进步!Angular和Wijmo一起走过的日子

Angular已成为广受欢迎的前端框架。去年9月份,期待已久的Angular2的正式版发布之后,Angular又迎来了新一轮热潮。伴随着Angular这一路走来,Wijmo一直都是第一个全面支持各种版本Angular的J...

葡萄城技术团队
2017/02/16
2
0
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.1K
26
【前端】—聊聊我认识的Angular

前言 最近接触的项目前端用到了Angular框架,之前略有耳闻,从vue换到Angular,感觉东西差不多,还是要系统学习的,先来了解下。 正文 1、Angular 的发展 AngularJS 是一款来自Google的前端J...

zt15732625878
2018/05/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Jenkins系列_插件安装及报错处理

进入Jenkins之后我们可以进行插件的安装,插件管理位于以下模块: 发现上面报了一堆错误,是因为插件的依赖没有安装好,那么这一节,就先把这些错误解决掉吧。解决完成后,也就基本会使用插件...

shzwork
今天
2
0
mysql mysql的所有查询语句和聚合函数(整理一下,忘记了可以随时看看)

查询所有字段 select * from 表名; 查询自定字段 select 字段名 from 表名; 查询指定数据 select * from 表名 where 条件; 带关键字IN的查询 select * from 表名 where 条件 [not] in(元素...

edison_kwok
昨天
9
0
多线程同时加载缓存实现

import com.google.common.cache.Cache;import com.google.common.cache.CacheBuilder;import java.util.concurrent.ExecutionException;import java.util.concurrent.ExecutorServi......

暗中观察
昨天
3
0
利用VisualVM 内存查看

准备工作,建几个测试类。等下就是要查看这几个类里面的属性 package visualvm;public class MultiObject { private String str; private int i; MultiObject(String str...

冷基
昨天
2
0
组装一台工作游戏两用机

一、配置清单如下: 分类 项目 价格(元) 主板 华硕(ASUS)TUF Z370-PLUS GAMING II 电竞特工 Z370二代 支持9代CPU 1049 CPU 英特尔(Intel) i7 8700K 酷睿六核 盒装CPU处理器 2640 风扇 九...

mbzhong
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部