ts文件下载 Angular学习笔记（一）(2)

NgModule（一个带@NgModule装饰器的类）是 Angular 的基础特性之一。

JavaScript 也有自己的模块系统，用来管理一组 JavaScript 对象。 它与 Angular 的模块系统完全不同且完全无关。

JavaScript 中，每个文件是一个模块，文件中定义的所有对象都从属于那个模块。 通过export关键字，模块可以把它的某些对象声明为公共的。 其它 JavaScript 模块可以使用import 语句来访问这些公共对象。

import { NgModule }     from '@angular/core';
import { AppComponent } from './app.component';

export class AppModule { }

这两个模块化系统是互补的，我们在写程序时都会用到。

Angular 提供了一组 JavaScript 模块。可以把它们看做库模块。

每个 Angular 库的名字都带有@angular前缀。

You install them with thenpmpackage manager and import parts of them with JavaScriptimportstatements. 用npm包管理工具安装它们，用 JavaScript 的import语句导入其中某些部件。

例如，象下面这样，从@angular/core库中导入Component装饰器：

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

还可以使用 JavaScript 的导入语句从 Angular库中导入 Angular模块：

import { BrowserModule } from '@angular/platform-browser';

在上面那个简单的根模块的例子中，应用模块需要BrowserModule的某些素材。要访问这些素材，就得把它加入@NgModule元数据的imports中，就像这样：

imports:      [ BrowserModule ],

这种情况下，你同时使用了 Angular 和 JavaScript 的模块化系统。

这两个系统比较容易混淆，因为它们共享相同的词汇 “imports” 和 “exports”。不过没关系，先放一放，随着时间和经验的增长，自然就清楚了。

组件负责控制屏幕上的一小块区域，我们称之为视图。

例如，下列视图都是由组件控制的：

带有导航链接的应用根组件。

英雄列表。

我们在类中定义组件的应用逻辑，为视图提供支持。 组件通过一些由属性和方法组成的 API 与视图交互。

例如，HeroListComponent有一个heroes属性，它返回一个英雄数组，这个数组从一个服务获得。HeroListComponent还有一个当用户从列表中点选一个英雄时设置selectedHero属性的selectHero()方法。

src/app/hero-list.component.ts (class)

export class HeroListComponent implements OnInit {
  heroes: Hero[];
  selectedHero: Hero;

  constructor(private service: HeroService) { }

  ngOnInit() {
    this.heroes = this.service.getHeroes();
  }

  selectHero(hero: Hero) { this.selectedHero = hero; }
}

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/bofangqi/article-55834-2.html