json 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并不会自动打开浏览器。

json 2

b)
创立一个零件

零件是Angular的为主,运行ng
generate
componenthello-world可以生成hello-world组件,即便VSCode安装了Angular
Files插件,也透过方可便宜地右键-添加组件,会为一个零部件自动创设三个公文。

json 3

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

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

诸如此类,一个组件就创办好了,在app.component.html中投入<app-hello-world>标签就可以运用那个组件了。

c)
在组件中采纳数据。

用插件的法力丰盛一个user-item组件,会自动创制所有的文件,并已将组件添加到了app.component.html。

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

json 4

紧接着在模板中动用这几个特性,语法为{{name}}。

json 5

d)
数组的应用。

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

json 6

试了下把let换成var就非常了,let声明的变量成效域被界定在了块级,比var安全,可能那儿的模板语法屏弃了var吧。

e)
组件的利用

前方创立的user-item组件中的name属性只是使用了默许的值‘Felipe’。实际运用中,组件是可复用的,属性的值应该从外表指定。

要在user-list组件中利用user-item,可以如此修改user-list的模板:

json 7

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

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

json 8

json 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中的具体内容有:

json 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地图