[Angular 2] Start with Angular2

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>

 

posted @   Zhentiw  阅读(319)  评论(0)  编辑  收藏  举报
编辑推荐：
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示
AI IDE Trae