[Angular2]创建简单的Angular2 Components

悟箜 · 发表于 2016-7-20 17:10:21

本帖最后由悟箜于 2016-7-30 14:31 编辑

距离上次我们快速搭建Angular2开发环境已经好几天了，不知道大家有没有轻松加愉快的搭建起开发环境，既然一切都已就绪，那就让我动手写点东西吧~~~

今天我们就写几个简单的components，我们先来看看目录结构变化，我们主要创建了两个文件夹：footer 和 header（主要存放我们的两个components），还有就是一个Angular2的LOGO

structure1.PNG (20.14 KB, 下载次数: 2)

2016-7-20 16:43 上传

点击文件名下载附件

我们先看一下Header component，直接上代码：可以发现其实很简单，只需要指定简单的template与style的路径, selector 就是我们的header将要存在的地方，替换<wk-header>标签

import {Component} from '@angular/core';
@Component({
moduleId: 'app/common/components/header/',
selector: 'wk-header',
templateUrl : `header.html`,
styleUrls: ['header.css']
})
export default class HeaderComponent {}

复制代码

header.html:

<header>
<div class="header">
<img src="app/common/assets/img/angular.png">
</div>
</header>

复制代码

header.css:

header {
display: block;
min-height: 60px;
padding: 8px 20px 0px 20px;
background: #0273D4;
border: 0;
}
.header {
width: 100%;
padding: 10px 0 12px 0;
}
img {
width: 66px;
height: 66px;
}

复制代码

然后Header组件是怎么加入到入口文件的呢？？？下面我们来看看app.component.ts文件里我们都做了什么：
首先我们import我们的两个组件footer, header
然后用component的selector标签写到你想组件出现的地方（什么地方都可以哦~~，只要你的组件是可以重用的，是不是很爽~~~）

import {Component} from '@angular/core';
import HeaderComponent from './header/header.component';
import FooterComponent from './footer/footer.component';
@Component({
selector: 'wk-app',
template : `<wk-header></wk-header>
<main>
<h1>Hello Angular2 !</h1>
</main>
<wk-footer></wk-footer>`,
styles: [`
main {
height: 300px;
text-align: center;
}
`],
directives: [HeaderComponent, FooterComponent]
})
export default class AppComponent {}

复制代码

如果仔细观察会发现，这里组件里用了不同的方式引入template和style，当我们用url的方式引入的时候会牵扯到相对路径的问题，你可以选择用绝对路径的方式引入（不推荐），另一种就是用moduleId的方式，也是官方推荐的方式，但是它跟你用什么方式去编译有关系，如果是用Typescript编译，我们可以直接写成 moduleId: module.id（官方推荐），如果你用SystemJS，你可以写成moduleId: _moduleName，如果你是用Webpack，你可以用require()的方式引入资源，如果你是用Dart，你可以完全不用特殊处理。。。所以方法是有很多的，大家可以自由选择。

好~回归正题，通过上面的方式我们就简单得把我们的页面拆分成了三个简单的components了，顶部（Header），内容（main），底部（Footer），是不是觉得其实SO Easy~~~

最后上我们的战利品，现在我们的页面看上去是这样的~~~~

hello.PNG (12.62 KB, 下载次数: 1)

悟箜 · 发表于 2016-7-21 21:29:45

本帖最后由悟箜于 2016-7-21 22:37 编辑

代码已经稍做整理并上传到Github，地址如下：https://github.com/WuKongW/Angular2_POC

yuanyang536 · 发表于 2016-7-29 15:19:55

32赞，还有吗

悟箜 · 发表于 2016-7-30 12:08:17

yuanyang536 发表于 2016-7-29 15:19
32赞，还有吗

慢慢来，可以有