在第一小节中，我们已经创建了一个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页面
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
这个页面中的代码除了自定义的<app-root>标签之外，其它一切正常。那这个自定义的标签作用是什么呢？哪些文件和它有关联？我们接着看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 <app-root> tag in the index.html.
以上两段解释也很简单，本文就不多讲。接下来，我们将以**title
**属性为线索，查找取值的地方。
2.3不识代码真面目，只缘身在最外层
好奇的我们应该打开app.component.html文件看一下，原来title是在这边展示的。到此你应该能理解一点这个开发套路了。
<h1>
<!--{{}}这是告诉angular，请从组件中读取title并渲染出来；
是单向的数据绑定“插值表达式”形式-->
{{title}}
</h1>
2.4跃跃欲试，试一试又不会怀孕
如果在这个页面上添加一个输入框，会怎么样？h1标签里的值，可以跟随input里面的值变化而变化么？
<h1>
{{title}}
</h1>
<!--添加一个input输入框-->
<input type="text" name="title" id="title" value="{{title}}"/>
以上代码中已经添加了输入框，但是发现运行结果好像不是那么一回事。有图有真相。
残酷的现实
聪明的你是不是已经知道为什么了呢？请继续往下看。以下是我们理想中的实现效果。使用ngModel指令进行双向数据绑定就能简单完成目标。
<h1>
{{title}}
</h1>
<input type="text" [(ngModel)]="title"/>
继续看看效果，如下图：
成功实现效果
PS：很好，你已经成功的入坑了。祝小伙伴，能够学习到更多的知识。
网友评论