大佬教程收集整理的这篇文章主要介绍了《Angular2 从开发到部署系列》之「第一个 Angular2 应用」，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
在 Angular2 中，很重要的一个方法就是 @component，你或许会觉得它很像 Angular1 中的 directive，其实他就是一个 @Directive 加上一个 view。接下来跟着我一步步写一个 Angular2 的应用吧。
进入我们之前搭建好的项目目录，然后建立一个 src 文件夹，并在里面再建立一个 app 文件夹，这里面用来存放我们的全部 Angular2 代码。
cd awesome-start mkdir -p src/app
在 src 目录下，我们要建立几个文件。
index.html 入口页
vendor.ts 引入第三方引入库
app/app.module.ts 应用根模块
app/app.component.ts 应用根组件
app/app.component.html 应用根组件模板
app/app.component.css 应用根组件样式
是不是觉得这么多文件，看着都迷糊。别怕，其实这样写是方便我们组织我们的项目，使每个文件的用途更加清晰，也更利于后期的维护。另外，在文件的命名上，我们发现有 .component.ts、.module.ts 这样的命名，这是一种以特性来命名的方式，这样的好处就是你能清楚地知道这个文件是干什么的。是不是你看一眼app.component.ts这个文件就知道他里面应该是一个组件呢？这也是官方推崇的一种命名方式，建议大家使用这样的命名方式来开发你的应用。
Ok，接下来，我们就要开始写组件了。
打开 app/app.component.ts 文件，加入下面的代码
import { Component } from '@angular/core'; @Component({ SELEctor: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css'] }) export class AppComponent {}
这里都是些什么鬼？
其实正如你所见，一个 component，就是一个 class，不过稍微有些不同的是，这个 class 是带有一个 @Component 装饰器的。装饰器是一个 es6 的新特性，这里我们其实可以看做一个将要传给 AppComponent 这个 class 的元数据。
SELEctor 就是我们组件的名字，你可以使用 css 选择器的方式来命名你的组建，例如
// 选择带有不带有 attr 属性的 a 标签 SELEctor: 'a:not([attr])'
templateUrl 存放组建的模板 urlstyleUrls 存放组建样式 url，注意这是一个数组
接下来为我们的组件加点内容，打开 app/app.component.html
<main>
<h1>哎呦~不错哦！</h1>
</main>
好了，这样我们的第一个组件写好了，是不是并不复杂。接下来我们就在入口页面里面引用它，打开 index.html
<!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>
你可能会很迷惑，怎么这么多乱起八糟的，别怕，那些东西你都不需要关心，只需要关心 body 标签里的 app-root 就行，因为他就是我们所写的组件，angular 会找到他，然后把它渲染出来。
OK，入口文件也写好了，是不是可以运行了？一般这种设问句的答案99%都是否定的。虽然我们写好了组件（AppCompnent），并且使用了它（<app-root>），但是@R_106_9616@依然不能运行，因为我们还需要一个引导方法启动我们的程序（如果它能自己启动，那就相当智能了...）。
使用过 Angular1 的会知道，在 Angular1 中有一个模块化的方法 angular.module，同样在2中也有一个类似的方法 NgModule。Angular2 的各个模块都封装在这样一个个 NgModule 中，例如我们熟悉的一些模板指令 ngIf、ngFor 这些都存放在 commonModule 里面，如果想要使用这些指令的时候，我们首先就要先引入 commonModule 这个模块，不然 Angular2 会不认识（虽然是亲生的）这些指令，并抛给你一堆错误。接下来我们看看怎样写一个 NgModule。
打开 app.module.ts
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 { }
BrowserModule 这个模块，是所有在浏览器启动的 Angular2 应用所必须的。
declarations 在这 module 里面，我们引入了之前写的 AppComponent，并且在 declarations 里面声明了它，这是必要的，如果我们不提前声明我们的组件，那么 Angular2 会不认识我们写的组件，这样就不会把他渲染出来。不止组件，我们写的 @Pipe @Directive 这些都需要提前在 declarations 里面声明出来。
bootstrap 在这里面把我们需要启动的根组件声明出来，Angular2 会从启动 bootstrap 里面的组件。
就快完成了，再坚持一下，打开 @H_994_5@main.ts
/** * @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);
这个文件就是我们应用的启动文件了，它会引导启动@R_106_9616@。
好了，一切准备就绪，接下来我们就可以运行@R_106_9616@了。
npm start
打开 http://localhost:3000，恭喜你，@R_106_9616@成功启动了。
好吧，很丑，不建议的话，可以在 app.component.css 里面给@R_106_9616@润色一下。自己动手尝试一下吧，写几个组件练练手。这会比你一直看效果更好。
以上是大佬教程为你收集整理的《Angular2 从开发到部署系列》之「第一个 Angular2 应用」全部内容，希望文章能够帮你解决《Angular2 从开发到部署系列》之「第一个 Angular2 应用」所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。