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. ASP.NET缓存策略经验谈

    要提升ASP.NET应用程序的性能,最简单.最有效的方式就是使用内建的缓存引擎.虽然也能构建自己的缓存,但由于缓存引擎已提供了如此多的功能,所以完全不必如此麻烦.在很大程度上,ASP.NET开发者在W ...

  2. 判断DataSet是否有数据

    if (data1.Tables[0].Rows.Count>0)        {            MessageInfoText.Text = data1.Tables[0].Rows ...

  3. hdu 1175(广搜)

    题意:容易理解... 思路:我开始的思路不好实现,而且有漏洞,时间复杂度也高,后来在网上学了下别人的方法,真心感觉很牛B,不仅代码好实现,而且时间复杂度比较低,具体看代码实现吧!! 代码实现: #in ...

  4. HDU5790 Prefix 字典树+主席树

    分析:这个题和spoj的d_query是一个题,那个是求一段区间里有多少个不同的数字,这里是统计有多少个不同的前缀 用字典树进行判重,(和查询不同的数字一样)对于每个不同的前缀,只保留它最后一次出现的 ...

  5. Tableau学习笔记之五

    计算用户自定义字段,虽然在Tableau软件中已经加入了很多的数值操作运算,比如平均值,最大值等,但是可以自定义自己需要的数值操作运算. 数值操作可以有以下:预定义函数,百分比,总计,分级等等 1.直 ...

  6. mvc bundle功能（1）

    现如今都提倡敏捷开发,快速开发,但是再要求速度的同时,还得保证质量!前端我是没办法,毕竟是直接要面向用户的,但是后台,解决方案那就多了,诸如extjs,bootstrap,kendoui,都可以解决. ...

  7. shell下解码url

    http://aaronw.me/static/779.html 封装了一下,有需要的拿走 function url_decode() { local url=$ echo $url | awk 'B ...

  8. 【转】强大的vim配置文件，让编程更随意

    原文地址:http://www.cnblogs.com/ma6174/archive/2011/12/10/2283393.html 花了很长时间整理的,感觉用起来很方便,共享一下. 我的vim配置主 ...

  9. uc/os学习入门：在32位pc机上搭建编译环境

    由于学习ucos的入门资料中所使用的编译器大多都是Borland c ++ 3.1或者Borland c++4.5,为了降低学习的难度最好所用的编译器与书本上的一致.由于4.5版本稍高,所以最终决定用 ...

  10. thymeleaf中的模板布局

    一.包括模板片段: 1:定义和引用片段,我们经常会想要包含在模板片段来自其他模板.常见的用途是页脚.标题.菜单…; 为了做到这一点,Thymeleaf需要我们定义包含可用的片段,我们可以通过使用th: ...