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. 关于DatePicker控件在IsEnabled为False视觉效果没有明显辨识度的处理方法

    DatePicker控件在IsEnabled为False时界面没有让人看上去不可用(背景为灰色等)的效果.容易让用户迷惑. 可以用下面的代码增加设置透明度的触发器来解决(XAML以及C#方式): &l ...

  2. JS触发ASP.NET服务器端控件的方法

    <asp:Button ID="Button_regId" runat="server" Font-Bold="False" OnCl ...

  3. Android中空格及换行

    空两个字符          换行  \n

  4. Storm实战常见问题及解决方案

    该文档为实实在在的原创文档,转载请注明: http://blog.sina.com.cn/s/blog_8c243ea30101k0k1.html 类型 详细 备注 该文档是群里几个朋友在storm实 ...

  5. Android UI开发详解之Fragment

    Fragment是Android自从3.0之后新加入的一个组件,我相信很多人都已经听说过这个组件了,但这个组件到底是个什么,如何去使用他呢,且听我讲来. 以下部分资料来自官网(官网才是王道,其他都是浮 ...

  6. codeforces 687C - The Values You Can Make 简单dp

    题意:一个数组a[i],你可以挑出若干个数(只能挑一次)加起来等于k, 针对每一种方案,你可以选出这若干个数的子集来组合新数 最后所有的方案能组合出多少种数 分析:一看数据范围n,k<=500 ...

  7. BITED数学建模七日谈之二：怎样阅读数学模型教材

    今天进入我们数学建模七日谈的第二天:怎样阅读数学建模教材? 大家再学习数学建模这门课程或准备比赛的时候,往往都是从教材开始的,教材的系统性让我们能够很快,很深入地了解前人在数学模型方面已有的研究成果, ...

  8. [LeetCode] #1# Two Sum : 数组/哈希表/二分查找/双指针

    一. 题目 1. Two SumTotal Accepted: 241484 Total Submissions: 1005339 Difficulty: Easy Given an array of ...

  9. LNMP最新源码安装脚本（定期更新）

    Linux+Nginx+MySQL+PHP+Pureftpd+User manager for PureFTPd,脚本中用到的软件包大多最新版本,修复了User manager for PureFTP ...

  10. log4j2使用总结

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