首页 > 代码库 > [Angular 2] 0. RC6: Start with Angular2

[Angular 2] 0. RC6: Start with Angular2

Create a index.html:

<!DOCTYPE html><html><head>    <title>Really Understanding Angular 2 - The Fundamentals</title>    <meta name="viewport" content="width=device-width, initial-scale=1">    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>    <link href="//fonts.googleapis.com/css?family=Roboto:400,300,500,400italic,700" rel="stylesheet"  type="text/css">    <link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">    <link rel="stylesheet" href="https://angular-academy.s3-us-west-1.amazonaws.com/styles/angular-academy-lessons-theme-v1.css">    <!-- Polyfill(s) for older browsers -->    <script src="https://npmcdn.com/core-js/client/shim.min.js"></script>    <script src="https://npmcdn.com/zone.js@0.6.12?main=browser"></script>    <script src="https://npmcdn.com/reflect-metadata@0.1.3"></script>    <script src="https://npmcdn.com/systemjs@0.19.27/dist/system.src.js"></script>    <script src="/system.config.js"></script>    <script>        document.SYSTEMJS_CONFIG.map.app = .;        document.SYSTEMJS_CONFIG.packages.app = {main: hello_world.ts, defaultExtension: ts};        System.config(document.SYSTEMJS_CONFIG);        System.import(app).catch(function (err) {            console.error(err);        });    </script></head><body>    <header class="l-header v-center-parent">        <img class="v-center" src="//material.angularjs.org/latest/img/icons/angular-logo.svg">    </header>    <main class="l-main">        <div class="l-course-logo"></div>        <div class="l-course-title">Really Understanding Angular 2 - The Fundamentals</div>        <div class="l-lesson-title">MVC Hello World Component - Controllers and Templates</div>        <div class="l-course-content card card-strong lesson-1">            <!-- Insert your module here -->        </div>    </main></body></html>    

Index.html works as an App Shell, which render meanful pixel onto the screen. And our module will be rendered when the data binding is ready.

 

Create first Module:

This module will bootstrap our application, normally this only happen once. This is the main entry point of the whole application.

import {Component, NgModule} from "@angular/core";import {platformBrowserDynamic} from "@angular/platform-browser-dynamic";import {BrowserModule} from "@angular/platform-browser";@Component({    selector: ‘app‘,    template: `<h1>Hello Angular 2</h1>`})export class App{}/** Declare the NgModule* */@NgModule({    declarations: [App],       // tell which component will be include into this module    imports: [BrowserModule],  // if building web app, we need to use BrowserModule, native mobile app use other module    bootstrap: [App]           // App component will be the entry point of the whole application})export class AppModule{}// Bootstrap the AppModuleplatformBrowserDynamic().bootstrapModule(AppModule);

 

Last insert out App into html:

        <div class="l-course-content card card-strong lesson-1">            <app></app>        </div>

 

[Angular 2] 0. RC6: Start with Angular2