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 AppModule

platformBrowserDynamic().bootstrapModule(AppModule);

Last insert out App into html:

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

            <app></app>

        </div>

[Angular 2] Start with Angular2的更多相关文章

  1. 跟我学Angular2（1-初体验）

    0.导言 Angular1作为最流行的前端MV*框架,给前端开发带来了极大的便利性.但是,仍然有许多不好的地方已经很难再改变了.Angular团队根据WEB发展的趋势和Angular1中积累的经验来开 ...

  2. Angular 2 要来了，Wijmo 已准备好迎接

    Angular 是一款优秀的前端JS框架,已被用于Google的多款产品中,其核心特点是:MVVM.模块化.自动化双向数据绑定.语义化标签.依赖注入等.6年过去了,Angular 迎来了2.0版本. ...

  3. 翻译：Angular 2 - TypeScript 5 分钟快速入门

    原文地址:https://angular.io/docs/ts/latest/quickstart.html Angular 2 终于发布了 beta 版.这意味着正式版应该很快就要发布了. 让我们使 ...

  4. TypeScript 5 Angular 2

    TypeScript 5 分钟快速入门 翻译:Angular 2 - TypeScript 5 分钟快速入门 原文地址:https://angular.io/docs/ts/latest/quicks ...

  5. 开放才能进步！Angular和Wijmo一起走过的日子

    Angular 已成为广受欢迎的前端框架.去年9月份,期待已久的 Angular2 的正式版发布之后,Angular 又迎来了新一轮热潮.伴随着 Angular 这一路走来,Wijmo 一直都是第一个 ...

  6. Angular 小试牛刀[1]:Getting Started

    首先,Angular2 与 Angular1.x 版本没有多大关系,甚至可以说是两个完全不一样的框架,故 Angular 指的是 Angular2 及以上的版本.而 Angular 与 TypeScr ...

  7. [转]Angular2 Material2 封装组件 —— confirmDialog确定框

    本文转自:https://www.jianshu.com/p/0c566fc1730d 环境: Angular 4.0.0 Angular2 Material2 2.0.0-beta.3 node v ...

  8. Angular.js浅谈

    至今博主对于MVVM框架比较了解的就只能算有Angular了,首先给大家明确一个概念,Angular1.x才能叫Angular.js,而Angular2.4.5都直接叫Angular了,因为从2开始已 ...

  9. angular2的生命周期钩子的使用情况

    angular 2 Directive Lifecycleangular2 中组建继承于指令,并扩展了与ui视图相关的属性.angular2 指令的生命周期是用来记录指令从创建,应用及销毁的过程.an ...

随机推荐

  1. HDU 5776 sum (BestCoder Round #85 A) 简单前缀判断+水题

    分析:就是判断简单的前缀有没有相同,注意下自身是m的倍数,以及vis[0]=true; #include <cstdio> #include <cstdlib> #includ ...

  2. IOS UIView（UIButton）通过显示动画移动的时候 响应点击的解决方案

    今天在做一个UIButton显示动画的时候,遇到一个问题,就是在移动的时候 ,需要相应它的点击时间(click) 通过CAKeyframeAnimation 来移动UIButton的layer ,效果 ...

  3. [Web API] 如何让 Web API 统一回传格式以及例外处理[转]

    [Web API] 如何让 Web API 统一回传格式以及例外处理 前言 当我们在开发 Web API 时,一般的情况下每个 API 回传的数据型态或格式都不尽相同,如果你的项目从头到尾都是由你一个 ...

  4. 利用flashback query 恢复表数据

    flashback query可以查询过去某个时间点对象的状态,从而可以利用此来进行恢复数据 1 准备测试数据 用普通用户创建一个表,表中插入部分数据: SQL> show user USER ...

  5. 为Elasticsearch添加中文分词

    Elasticsearch的中文分词很烂,所以我们需要安装ik.首先从github上下载项目,解压: cd /tmp wget https://github.com/medcl/elasticsear ...

  6. 查看Linux里某文件的前面/后面几行中的某一行

    如,我想看/etc/profile文件的前5行里的第5行. 则,   head -5 /etc/profile  |  tail -1  管道|啊,很简单,就是把左边命令的结果,作为右边的输入. 如, ...

  7. sass学习（2）——关于变量

    定义一个sass变量 可以说,变量是一个编程语言的基础.所以对于sass来说,变量肯定是浓墨重彩的其中一笔,当然函数也是.那我们如何声明定义一个sass的变量呢? 变量的符号$ 变量名称 变量的值 那 ...

  8. JSF 2 multiple select dropdown box example

    In JSF, <h:selectManyMenu /> tag is used to render a multiple select dropdown box – HTML selec ...

  9. JSF 2 dropdown box example

    In JSF, <h:selectOneMenu /> tag is used to render a dropdown box – HTML select element with &q ...

  10. 应用JConsole学习Java GC

    应用JConsole学习Java GC 关于Java GC的知识,好多地方都讲了很多,今天我用JConsole来学习一下Java GC的原理. GC原理 在我的上一篇中介绍了Java运行时数据区,在了 ...