[Angular 2] Start with Angular2
Angular with start Angular2
2023-09-14 08:59:19 时间
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 中依赖注入
- angular组件的基本使用
- 关于 SAP Spartacus Angular HTTP Interceptor 的拦截顺序
- Angular HTTP 请求自定义 timeout 值的一种实现思路
- 前端面试题angular_Vue前端面试题
- 关于 Angular Universal 应用执行时需要 Browser API 的问题
- 使用 Angular Universal 进行服务器端渲染避免 window is not defined 的错误消息
- Angular forRoot 方法的使用场合介绍
- 关于 Angular 工程文件 angular.json 里的 inlineCritical 属性
- 关于 Angular 编程中的 shim 概念
- Angular 4.0发布,致力于减小代码体积详解编程语言
- Angular和jQuery的区别
- Oracle 中的 WITH 语句使用技巧(oracle with用法)
- MySQL查询优化使用WITH子句的限制与替代方案(mysql不能用with)
- Oracle中利用WITH子句的使用(oracle中的with)