Question

我对angular1很熟悉，但对angular2不熟悉。所以面对问题来理解angular2代码。所以引导我一点点理解angular2代码。

<div>Bootstrapping in Angular 1 using ng-app,</div> <div>

angular.element(document).ready(function() {
   angular.bootstrap(document, ['userApp']);
});


<div>Bootstrapping in Angular 2,</div> 

import { bootstrap } from 'angular2/platform/browser';
import { UsersComponent } from './product.component';

bootstrap(UserComponent);

请告诉我angular2 bootstrapping代码的含义。

Answer 1

第1步： - AppComponent.ts

第一步描述了Component如何将变量与DOM绑定

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

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent { name = 'Angular'; }

第2步：

第二步将定义您的模块，Angular2是模块化构造，意味着应用程序由构建模块构成

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

第3步：

应用程序开始的

第三步，Bootstrapping是Angular中必不可少的一个过程 - 它是Angular生效时加载应用程序的地方。引导Angular应用程序肯定不同于Angular 1.x，但仍然是一个简单的过程。让我们来看看这是如何完成的。

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule }              from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

参考表格https://angular-2-trainingbook.rangle.io/handout/bootstrapping/

Angular 2引导代码不清楚

1 个答案: