Angular2入门系列教程2-项目初体验-编写自己的第一个组件

时间:2023-12-26 08:13:13

  上一篇 使用Angular-cli搭建Angular2开发环境

  Angular2采用组件的编写模式,或者说,Angular2必须使用组件编写,没有组件,你甚至不能将Angular2项目启动起来

  紧接着上一篇 环境搭建 的文章,我们这一篇来讨论Angualr2的项目结构和几本组件的编写模式

  Angular2入门系列教程2-项目初体验-编写自己的第一个组件

  Angular-cli.json里面配置了项目的几本信息,包括版本名字之类的

  package.json 是npm包配置

  tslint你可以自行百度下,是一种标准化代码检查的东西

  其他的不用特别去关心,我们项目的核心在于src文件夹,里面包括了我们初始化的东西,下面我们简单介绍下

  index.html 我想不用过多解释,首页

  polyfills.ts 这里面放项目所必须的第三方js,angular-cli监理的项目里面包括了一些东西,不用关系,之后要用到的其他js库可以直接在这里面添加

  main.ts 项目的启动,这里面的代码也不用特别关心

  在app文件夹下有一系列代码,其中就有app.module.ts;angular-cli建立的项目是由这里指定启动的组件的

  Angular2入门系列教程2-项目初体验-编写自己的第一个组件

  这里我们就可以开始接触Angular2的组件了

  我们打开app.component.ts

  

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
}

  @Component是一个Angualr2的装饰器,它告诉Angular下面的类是一个Angular2的组件,

  selector选择器表示你之后再html代码里将以什么名字使用这个组件

  templateUrl表示组件的html代码,这里也可以使用template:`<div>123</div>`来使用内联模板

  styleUrls是样式地址数组,也可以使用 styles:['h1{font-size:28px;}']

  而下面的类就是就是组件的类,可以定义组件的行为等

  我们来编写一个简单的组件

  重新编写app.component.ts

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = '论楼主';
words:Array<string>=[
'哦,听说楼主很帅?',
'是吗,没见过啊',
'真的真的,那天去软件园看到的'
]; }

重新定义了一个words的属性,类型为Array<string>(这列建议先去了解一下TypeScript,不了解也没太大关系,有一点儿基础就能看懂吧)  

app.componnet.html

<h1>
{{title}}
</h1>
<div class="container">
<ul>
<li *ngFor="let word of words">
<p>{{word}}</p>
</li>
</ul>
</div>

这里用到了angular指令*ngFor 效果是遍历属性,然后下面{{}}为插值表达式,将属性值显示出来 *ngFor的效果就是 ES6的for of 语法效果,

这里强烈建议大家连接一下Angular2模板语法 

 app.component.css

ul{
list-style-type: none;
}
p{
padding:10px;
}
.container{
margin:0px auto;
max-width: 1280px;
text-align: center;
}
h1{
text-align: center;
}

  Angualr2的组件样式只会应用到相应的组件上面,不会对其他的组件样式产生影响

  下面看看效果图

Angular2入门系列教程2-项目初体验-编写自己的第一个组件

  结束语:这一篇我们只是简单介绍了下Angular2的一些东西,简单编写了一个组件而已,在后面的学习过程中会用到很多其他的概念,模板语法,依赖注入等,遇到的时候会解释一下

下一篇应该讲 多个组件了吧

更新ing。。。