图片 1

一律、简单操作

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并无会见活动打开浏览器。

图片 2

b)
创建一个零部件

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

图片 3

零件的着力有为装饰器(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属性并于构造函数初始化

图片 4

随着于模板被以是特性,语法为{{name}}。

图片 5

d)
数组的下。

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

图片 6

试行了生把let换成var就挺了,let声明的变量作用域被界定以了块级,比var安全,可能这的沙盘语法废弃了var吧。

e)
组件的采用

前面创建的user-item组件中的name属性只是利用了默认的值‘Felipe’。实际应用着,组件是只是复用的,属性的值当由表指定。

倘若以user-list组件中采取user-item,可以如此修改user-list的模版:

图片 7

[name]=***这么的写法是当往user-item组件传递值。

修改后底user.item.components.ts如下,导入了Input,并当性前面加上@Input(),这样即使好起父模板传入值了。

图片 8

图片 9

 

老二、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中之具体内容有:

图片 10

@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

 

 

相关文章

网站地图xml地图