Angular2入门系列教程2-项目初体验-编写自己的第一个组件
上一篇 使用Angular-cli搭建Angular2开发环境
Angular2采用组件的编写模式,或者说,Angular2必须使用组件编写,没有组件,你甚至不能将Angular2项目启动起来
紧接着上一篇 环境搭建 的文章,我们这一篇来讨论Angualr2的项目结构和几本组件的编写模式
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的组件了
我们打开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的一些东西,简单编写了一个组件而已,在后面的学习过程中会用到很多其他的概念,模板语法,依赖注入等,遇到的时候会解释一下
下一篇应该讲 多个组件了吧
更新ing。。。