《Angular2 从开发到部署系列》之「第一个 Angular2 应用」
前言
第一个 Angular2 应用在 Angular2 中,很重要的一个方法就是 第一个 Angular2 组件进入我们之前搭建好的项目目录,然后建立一个 src 文件夹,并在里面再建立一个 app 文件夹,这里面用来存放我们的全部 Angular2 代码。 cd awesome-start mkdir -p src/app 在 src 目录下,我们要建立几个文件。
是不是觉得这么多文件,看着都迷糊。别怕,其实这样写是方便我们组织我们的项目,使每个文件的用途更加清晰,也更利于后期的维护。另外,在文件的命名上,我们发现有 Ok,接下来,我们就要开始写组件了。 打开 import { Component } from '@angular/core'; @Component({ selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css'] }) export class AppComponent {} 这里都是些什么鬼? 其实正如你所见,一个 component,就是一个 class,不过稍微有些不同的是,这个 class 是带有一个
// 选择带有不带有 attr 属性的 a 标签 selector: 'a:not([attr])'
接下来为我们的组件加点内容,打开 <main> <h1>哎呦~不错哦!</h1> </main> 好了,这样我们的第一个组件写好了,是不是并不复杂。接下来我们就在入口页面里面引用它,打开 <!doctype html> <html> <head> <base href="<%= webpackConfig.metadata.baseUrl %>"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title><%= webpackConfig.metadata.title %></title> <meta name="description" content="<%= webpackConfig.metadata.title %>"> </head> <body> <!-- 组件入口 --> <app-root>Loading...</app-root> <% if (webpackConfig.metadata.isDevServer && webpackConfig.metadata.HMR !== true) { %> <!-- Webpack Dev Server reload --> <script src="/webpack-dev-server.js"></script> <% } %> </body> </html> 你可能会很迷惑,怎么这么多乱起八糟的,别怕,那些东西你都不需要关心,只需要关心 OK,入口文件也写好了,是不是可以运行了?一般这种设问句的答案99%都是否定的。虽然我们写好了组件(AppCompnent),并且使用了它(<app-root>),但是我们的应用依然不能运行,因为我们还需要一个引导方法启动我们的程序(如果它能自己启动,那就相当智能了...)。 写一个 NgModule使用过 Angular1 的会知道,在 Angular1 中有一个模块化的方法 打开 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; /* import 根组件 */ import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule ],declarations: [ AppComponent ],bootstrap: [ AppComponent ] }) export class AppModule { }
启动应用就快完成了,再坚持一下,打开 /** * @import 启动模块 */ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { enableProdMode } from '@angular/core'; /** * @import 根模块 */ import { AppModule } from './app/app.module'; if (process.env.ENV === 'production') enableProdMode(); platformBrowserDynamic().bootstrapModule(AppModule); 这个文件就是我们应用的启动文件了,它会引导启动我们的应用。 好了,一切准备就绪,接下来我们就可以运行我们的应用了。 npm start 打开 http://localhost:3000,恭喜你,我们的应用成功启动了。 好吧,很丑,不建议的话,可以在 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |