风雨砥砺，岁月如歌——Angular框架核心内容初探索

小编最近刚刚接触Angular框架，很多核心的地方不太理解，于是就认真的查了一下，加入到注释里，希望能给初次接触的亲们一个点点帮助：

app.module.ts里的核心内容：

// 一个模块也是一个带着装饰器的ts类
// 引入这个模块需要的东西
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { FooterComponent } from './footer/footer.component';
import { SearchComponent } from './search/search.component';
import { CarouselComponent } from './carousel/carousel.component';
import { ProductComponent } from './product/product.component';
import { StarsComponent } from './stars/stars.component';
import { ProductDescComponent } from './product-desc/product-desc.component';
import { SellerInfoComponent } from './seller-info/seller-info.component';
import { ProductDetailComponent } from './product-detail/product-detail.component';
import { HomeComponent } from './home/home.component';
import {RouterModule, Routes} from '@angular/router';

const routeConfig:Routes=[
  {path:'',component:HomeComponent },
  {path:'product/:prodTitle',component:ProductDetailComponent}

]
// 用这个装饰器声明了一个模块
@NgModule({
  // 用这个属性声明了模块中有什么东西，只有一个组件"AppComponent"
  // 在这个元数据里只能声明组件、指令和管道
  declarations: [
    AppComponent,
    NavbarComponent,
    FooterComponent,
    SearchComponent,
    CarouselComponent,
    ProductComponent,
    StarsComponent,
    ProductDescComponent,
    SellerInfoComponent,
    ProductDetailComponent,
    HomeComponent,
  ],
  // 声明了要让程序正常运转还需要什么东西
  imports: [
    // 这是三个Angular框架提供的模块
    // 浏览器的模块
    BrowserModule,
    // 处理表单的模块
    FormsModule,
    // 提供HTTP服务的模块
    HttpModule,
    // 以为appmodule是应用的主模块，所以需要用forRoot来注入路由配置，多模块项目的子路由需要用forChild来注入
    RouterModule.forRoot(routeConfig)
  ],
  // 用来声明模块中提供了什么服务，默认为空，只能声明服务
  providers: [],
  // 声明了模块的主组件是什么
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts里的核心内容：

// 从Angular的核心模块里引入一个叫"Component"的装饰器
import { Component } from '@angular/core';

// 所有的组件都必须用一个"@Component"来注解
// 用这个装饰器（@Component）定义了一个组件，以及组件的元数据，装饰器是附加元数据的,装饰器的属性就是元数据
@Component({
  // CSS的选择器，这个组件可以通过"app-root"这个HTML标签，来调用
  selector: 'app-root',
  // 指定了一个HTML文件，作为组件的模板
  // 模板，是组件的必备属性，定义了用户最终看到的页面的布局和内容
  templateUrl: './app.component.html',
  // 指向了一组CSS文件，用来编写这个组件模板中药用到的样式
  styleUrls: ['./app.component.css']
})
// AppComponent是一个标准的ts类，这是告诉Angular AppComponent是一个组件，需要把元数据附加到这个类上
// 元数据会告诉Angular如何把一个ts类处理成一个Angular组件
// 定义了这个组件的控制器（只有一个属性：title),控制器是指一个被"Componment"装饰器装饰的ts类，它包含于模板相关的所有的属性和方法，
// 与页面相关的大部分逻辑都是编写在控制器里的
export class AppComponent {
  // 属性的值最终会被展示到浏览器的页面中
  title = 'app works!';
}

感谢您的阅读！