Angular2.0快速上手（二）

在第一小节中，我们已经创建了一个ng2的项目（hello-world），这一小节我们将简单分析一下项目的代码结构及实现。

一、剥丝抽茧，看重点

初次接触前端的小伙伴，也许打开hello-world项目的文件夹会蒙圈。不过不用着急，慢慢的你都会了解。好了，先看下主体骨架。

|-e2e
  |...
|-node_modules
  |...
|-src
  |-源文件
|-.editorconfig
|-.gitignore
|-angular-cli.json
|-karma.conf.js
|-package.json
|-protractor.conf.js
|-README.md
|-tslint.json

小伙伴们今天只要关注src这个文件就可以，那接着我们一起来掀起她的红盖头。看看src里面的目录结构。

|-app
  |-app.component.css
  |...
|-assets
|-environments
|-favicon.ico
|-index.html
|-main.ts
|-polyfills.ts
|-styles.css
|-test.ts
|-tsconfig.json

以上就是最基本的一个项目目录结构，看的可还清晰？不妨动手打开自己的项目一一对比一下。对了，在这里src文件夹是重点。

二、穿针引线，捋线索

学习一项新技能，难免会感觉无从下手。但是只要掌握了正确的学习姿势，不管学习什么都能如鱼得水，游刃有余。不信，我们一起接着往下看。

2.1 解读index.html页面

  
  
  

  
  


  Loading...

这个页面中的代码除了自定义的标签之外，其它一切正常。那这个自定义的标签作用是什么呢？哪些文件和它有关联？我们接着看app.component.ts（根组件）文件。

2.2一路追踪app-root

首先我们要打开app文件夹，然后找到app.component.ts文件。这是一个ts文件，如果不知道ts，那你肯定知道js。让我们来看一下他们之间的渊源。TypeScript是JavaScript类型的超集，它可以编译成纯JavaScript。可以在任何浏览器、任何计算机和任何操作系统上运行，并且是开源的。有兴趣的小伙伴可以，点击官网学习。http://www.typescriptlang.org/

//引入angular核心文件
import { Component } from '@angular/core';

//@Component是装饰器函数
@Component({
  //在app-root标签中，展示该组件
  selector: 'app-root',
  //模板地址
  templateUrl: './app.component.html',
  //css样式地址 
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  //为属性赋值
  title = 'app works!';
}

• Every component begins with an @Component function that takes a metadata object. The metadata object describes how the HTML template and component class work together.

• The selector property tells Angular to display the component inside a custom tag in the index.html.

以上两段解释也很简单，本文就不多讲。接下来，我们将以**title
**属性为线索，查找取值的地方。

2.3不识代码真面目，只缘身在最外层

好奇的我们应该打开app.component.html文件看一下，原来title是在这边展示的。到此你应该能理解一点这个开发套路了。

  {{title}}

2.4跃跃欲试，试一试又不会怀孕

如果在这个页面上添加一个输入框，会怎么样？h1标签里的值，可以跟随input里面的值变化而变化么？

  {{title}}

以上代码中已经添加了输入框，但是发现运行结果好像不是那么一回事。有图有真相。

残酷的现实

聪明的你是不是已经知道为什么了呢？请继续往下看。以下是我们理想中的实现效果。使用ngModel指令进行双向数据绑定就能简单完成目标。

  {{title}}

继续看看效果，如下图：

成功实现效果

PS：很好，你已经成功的入坑了。祝小伙伴，能够学习到更多的知识。