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. POJ 1274 The Perfect Stall

    题意:有n只牛,m个牛圈(大概是),告诉你每只牛想去哪个牛圈,每个牛只能去一个牛圈,每个牛圈只能装一只牛,问最多能让几只牛有牛圈住. 解法:二分图匹配.匈牙利裸题…… 代码: #include< ...

  2. 转载： Vim 练级攻略

    转自:http://coolshell.cn/articles/5426.html  酷壳 vim的学习曲线相当的大(参看各种文本编辑器的学习曲线),所以,如果你一开始看到的是一大堆VIM的命令分类, ...

  3. PICT实现组合测试用例（一）

    最近阅读了史亮老师的<软件测试实战:微软技术专家经验总结>一书,其中“测试建模”一章让我受益匪浅.想想以前的测试有多久没有花过心思放在测试用例的设计上了,一直强调“测试思想”的培养也都只是 ...

  4. 将矩阵转化为LibSvm需要的格式

    function svmtransform(A)[m,n]=size(A); fid = fopen('A.txt','w');%写入文件路径for i=1:m    temp1 = A(i,2:n) ...

  5. bzoj 2132 圈地计划（黑白染色，最小割）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=2132 [题意] 给定n*m个区域,建工业区价值A,建商业区价值B,如果(i,j)有k个 ...

  6. zabbix统一脚本监控方式

    几周的zabbix使用之后几点心得,暂时记在这儿 简单命令监控,直接配置Userparameter参数,以应用来分类conf文件,将不同应用的配置写在不同的conf文件里,并将之放到统一的配置引入目录 ...

  7. 新手指导：教你如何查看识别hadoop是32位还是64位

    问题导读: 1.从哪些地方可以识别hadoop是32位还是64位?2.hadoop本地库在什么位置? 来源:about云 本文链接:http://www.aboutyun.com/thread-127 ...

  8. phonegap WebApp

    打开网页浏览器,进入Android SDK网站(http://developer.android.com/sdk/index.html). 我们可以看到,Google官方提供了包括Windows平台在 ...

  9. log4j2使用总结

    一.Log4j有三个主要的组件:Loggers,Appenders和Layouts,这里可简单理解为日志级别,日志要输出的地方和日志格式 1. Logger Logger的日志级别有6级,分别是TRA ...

  10. 多线程和Boost::Asio

    线程安全 一般的,高并发使用不同的对象是安全的,在高并发中使用单一的对象是不安全的,io_service类型提供了单对象高并发的强安全保证. 线程池 多线程可能调用io_service::run()来 ...