Angular 2与TypeScript概览

在2014年底，Google宣布Angular 2将会对AngularJS进行完全地重写，他们甚至还创建了一门新的语言，名为“AtScript”，他们本来希望使用这门语言来编写Angular 2应用。

但是，随后Microsoft同意在它们的TypeScript语言（JavaScript的一个严格超集）上添加对装饰符（decorator，又称为注解）的支持，所以，它就成为了开发Angular 2框架本身所使用的语言，并且还是使用AngularJS框架开发应用的推荐语言。

另外，我们还可以使用JavaScript（ECMAScript 5和6均可）和Dart来编写Angular 2应用。

除此之外，Angular团队还集成了Microsoft的另外一个产品到Angular 2框架之中，这就是反应型JavaScript扩展（reactive JavaScript extension）的RxJS库。

Angular 2并不是一个MVC框架，而是基于组件（component）的框架。在Angular 2中，应用是松耦合组件所组成的树。

例如，如下的截屏中展现了一个简单的在线拍卖应用的首页面，它最初的原型是由一组Navbar、Search、Carousel、Product和Footer组件所构成的。
030.jpg
按照上面的图片所示，我们渲染了三个Product组件。自动渲染是通过将模板与服务器端获取到的组件数组进行绑定来完成的。每个产品的名称都会是一个链接，指向相关产品的详情页面。因为我们想把这个拍卖应用设计为单页应用（single page application，SPA），所以我们不希望刷新整个页面来展现产品详情。我们会重用当前轮播（carousel）和产品列表已经占据的区域，所以它会渲染产品的详情，同时保持页面的其他内容不变。这项任务通过几个简单的步骤就能完成：

使用Angular的router-outlet指令，它允许我们将当前轮播和产品列表占据的区域声明为，这样的话，它就能基于用户的导航变换内容；
将Carousel和Product封装到Home组件中；
创建一个新的ProductDetail组件；
配置Angular的Router在特定的区域要么显示Home组件，要么显示ProductDetail组件。

关于组件，我们已经讨论了很多，但是到目前为止，还没有对其进行定义。在TypeScript中，组件就是带有@Component的简单类：

@Component({
  selector: 'auction-home',
  template: `
    HTML或其他标记内联在此处
  `
})
export default class HomeComponent {

 // 应用逻辑放在此处
}

031.jpg
@Component注解用来定义组件及其相关的元数据。在本例中，selector属性的值指明了要展现本组件的HTML标签名称。template属性是一个HTML（或其他）标记的占位符。

回到我们的拍卖应用首页，顶层ApplicationComponent组件的模板可能会如下所示：

这个模板是由标准的和自定义的HTML标签所组成的，自定义标签代表了对应的组件。在本例中，我们使用的是内联HTML。如果你更喜欢将标签存储在单独的文件中的话（比如在application.html文件中），那么我们将会使用templateURL属性来代替template，ApplicationComponent的代码将会看起来如下所示：

import {Component} from 'angular2/core';
import {Route, RouteConfig, RouterOutlet} from 'angular2/router';
import HomeComponent from '../home/home';
import NavbarComponent from '../navbar/navbar';
import FooterComponent from '../footer/footer';
import SearchComponent from '../search/search';
import ProductDetailComponent from "../product-detail/product-detail";

@Component({
  selector: 'auction-application',
  templateUrl: 'app/components/application/application.html',
  directives: [
    RouterOutlet,
    NavbarComponent,
    FooterComponent,
    SearchComponent,
    HomeComponent
  ]
})
@RouteConfig([
  {path: '/', component: HomeComponent, as: 'Home'},
  {path: '/products/:id', component: ProductDetailComponent, as: 'ProductDetail'}
])
export default class ApplicationComponent {}

ApplicationComponent类使用了@Component和@RouteConfig（对于依赖URL的内容）注解。selector属性的值将会用来指定用户定义的HTML标签。templateURL属性指定了标记所在的位置。directives区域包含了RouterOutlet以及所有的子组件。

@RouteConfig注解为客户端导航配置了两个route：

对于名为Home的route，其内容将会由HomeComponent来渲染，并且映射到了URL片段“/”。
对于名为ProductDetail的route，其内容将会由ProductDetailComponent来渲染，并且映射到了URL片段“/product:id”。

当用户点击一个特定产品的标题时，默认的Home route的内容将会替换为ProductDetail route的内容，它会提供参数id的值并将产品的详情展现在区域。例如，导航至ProductDetail route的链接会将产品id的值 1234作为参数，它看起来会如下所示：

<a [routerLink]="['/ProductDetail', {'prodId': 1234}]">{{ product.id }}</a>

依赖注入

组件使用服务（service）来实现业务逻辑。服务是由Angular实例化并注入到组件中的类。

export class ProductService {
  products: Product[] = [];
  getProducts(): Array {
    // 获取产品的代码放在这里
    return products;
  }
}

现在，如果在HomeComponent的构造器中指定一个ProductService类型的参数，那么将会自动实例化该服务并将其注入到组件中：

@Component{
 ...
}
export default class HomeComponent {
  products: Product[] = [];

  constructor(productService: ProductService) {
    this.products = productService.getProducts();
  }
}

Angular的依赖注入模块是很灵活的，它很易于使用，因为对象只能通过构造器来实现注入。注射器（injector）形成了层级的结构（每个组件都会有一个注射器），可注入的对象并不一定必须要在应用级别保持单例，不过，这是Spring默认的做法

标签: none

评论已关闭