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. ch02-HTML的基本概念

    HTML的基本概念 Ch02: HTML的基本概念 1, 标记: 每一组HTML标记,都会被放在"<>"里面,用于控制里面的文字显示效果及其它一些用途. 语法: 开始标 ...

  2. [Irving]WPF Invalid character in the given encoding. Line xx, position xx.' XML is not valid.

    WPF开发中发现Xaml界面中突然抽风似的提示错误 Invalid character in the given encoding. Line xx, position xx.' XML is not ...

  3. 【更新sql server数据项的长度】////【复制数据到另一张表中】

    由于设计时没考虑周全,之后发现长度不够,手动修改又不可以... 重新新建也不行啊>>>>>>>>>里面的数据怎么办 so:直接用代码了.... a ...

  4. 恒天云技术分享系列5 – 虚拟化平台性能对比（KVM & VMware）

    恒天云技术分享系列:http://www.hengtianyun.com/download-show-id-14.html 概述 本性能测试报告将详细陈述各虚拟化平台基准性能测试的主要结论和详细结果. ...

  5. <Araxis Merge>快速一览文件的比较与合并

    重要的文件比较与合并特性在下面都指出了.对每个特性的说明性内容在下面可以找到. 注意:只有双向的比较/合并被展示了,专业版的Merge还支持三向的比较/合并. 1.文件夹比较按钮 单击这个工具栏按钮会 ...

  6. KVM背靠Linux好乘凉

    虚拟化是走向云的第一步,同理,开源虚拟化是走向开源云的第一步.云计算所提供的产品与方案都是围绕着IT资源的新交付与消费模式.云的形式多样,私有云.公有云与混合云,无论哪种云都具有三个关键特征:虚拟化. ...

  7. C++11 能好怎？

    0. 摘要 近期读了一些关于C++11标准的材料. 本篇博客将从新标准的优点.与旧版本的区别和使用方法三个角度,大致介绍我对C++11的认识. C++11标准,原名C++0x, 是03版旧标准的更新. ...

  8. Cygwin的包管理器：apt-cyg

    参考<Cygwin的包管理器:apt-cyg> cygwin下安装每次需要启动set_up,比较蛋疼,还是debian的apt方便,在网上看到应该cygwin 下的apt,觉得不错. 从h ...

  9. JS代码格式化修改表格的数值的格式

    今天在cognos中第一次需要用到JS,主要是报表页面展示的时候是可能得到如下的数据 ,我需要对其中类型中有金额字样的,后面的数值,精确2位小数:有百分比字样的,数值显示成百分比.如下. 我先尝试了自 ...

  10. thymeleaf学习

    一.简单表达格式:   thymeleaf的官方参考文档 1.变量的表达式:${...} 2.选择变量表达式:*{...} 3.信息表达:#{...} 4.链接URL表达式:@{...} 二.字面值 ...