脚本宝典收集整理的这篇文章主要介绍了

《Angular2 从开发到部署系列》之「第一个 Angular2 应用」

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h1 id="articleHeader0">前言</h1> <blockquote> <p>抱歉隔了很久才更新。。。</p> <p>在学习之前,我给大家推荐点学习资料</p> <p><a href="https://angular.io/" rel="nofollow noreferrer" target="_blank">Angular2官网</a> 官网的文档写的其实很详细了,而且<a href="https://angular.cn/" rel="nofollow noreferrer" target="_blank">中文文档</a>也同步进行翻译,想要学好 <a href="http://www.js-code.com/tag/angular" title="Angular" target="_blank">Angular</a>2 就一定要多看文档,这次 <a href="http://www.js-code.com/tag/angular" title="Angular" target="_blank">Angular</a>2 团队下了很大功夫在文档方面,写的相当详细和全面。</p> <p><a href="https://www.ng-book.com/2/" rel="nofollow noreferrer" target="_blank">ng-book 2</a> 这本书介绍的很全面,比较适合入门,但是是英文版的,目前 <a href="http://www.js-code.com/tag/angular" title="浏览关于“Angular”的文章" target="_blank" class="tag_link">Angular</a>2 中文官网的雪狼大叔组织了一批同学正在翻译这本书,相信很快便能在书店买到了。</p> <p><a href="https://github.com/AngularClass" rel="nofollow noreferrer" target="_blank">@AngularClass</a> 这是一个一帮牛人组成的队伍,专门教学 Angular 的一些课程,他们在 github 上有很多的开源,我们这篇的 webpack 打包,就是参考他们的 <a href="https://github.com/AngularClass/angular2-webpack-starter" rel="nofollow noreferrer" target="_blank">angular2-webpack-starter</a>。</p> <p>...网上还有很多的资料,学习要善用 <a href="https://www.google.com" rel="nofollow noreferrer" target="_blank">Google</a> 和 <a href="http://stackoverflow.com/" rel="nofollow noreferrer" target="_blank">stackoverflow</a>。</p> </blockquote> <h1 id="articleHeader1">第一个 Angular2 应用</h1> <p>在 Angular2 中,很重要的一个方法就是 <a href="https://angular.io/docs/ts/latest/api/core/index/Component-decorator.html" rel="nofollow noreferrer" target="_blank"><code>@component</code></a>,你或许会觉得它很像 Angular1 中的 <code>directive</code>,其实他就是一个 <a href="https://angular.io/docs/ts/latest/api/core/index/Directive-decorator.html" rel="nofollow noreferrer" target="_blank"><code>@Directive</code></a> 加上一个 view。接下来跟着我一步步写一个 Angular2 的应用吧。</p> <h2 id="articleHeader2">第一个 Angular2 组件</h2> <p>进入我们之前搭建好的项目目录,然后建立一个 src 文件夹,并在里面再建立一个 app 文件夹,这里面用来存放我们的全部 Angular2 代码。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="cd awesome-start mkdir -p src/app" title="" data-original-title="复制"></span> </div> </p></div> <pre class="shell hljs"><code class="shell">cd awesome-start mkdir -p src/app</code></pre> <p>在 src 目录下,我们要建立几个文件。</p> <ul> <li> <p><code><a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>dex.html</code> 入口页</p> </li> <li> <p><code>ma<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>.ts</code> 应用启动文件</p> </li> <li> <p><code>polyfills.ts</code> 添加一些浏览器不支持 api 的填充</p> </li> <li> <p><code>ven<a href="http://www.js-code.com/tag/do" title="do" target="_blank">do</a>r.ts</code> 引入第三方引入库</p> </li> <li> <p><code>app/app.module.ts</code> 应用根模块</p> </li> <li> <p><code>app/app.component.ts</code> 应用根组件</p> </li> <li> <p><code>app/app.component.html</code> 应用根组件模板</p> </li> <li> <p><code>app/app.component.css</code> 应用根组件样式</p> </li> </ul> <p>是不是觉得这么多文件,看着都迷糊。别怕,其实这样写是方便我们组织我们的项目,使每个文件的用途更加清晰,也更利于后期的维护。另外,在文件的命名上,我们发现有 <code>.component.ts</code>、<code>.module.ts</code> 这样的命名,这是一种<a href="https://angular.cn/docs/ts/latest/guide/style-guide.html#" rel="nofollow noreferrer" target="_blank">以特性来命名的方式</a>,这样的好处就是你能清楚地知道这个文件是干什么的。是不是你看一眼<code>app.component.ts</code>这个文件就知道他里面应该是一个组件呢?这也是官方推崇的一种命名方式,建议大家使用这样的命名方式来开发你的应用。</p> <p>Ok,接下来,我们就要开始写组件了。</p> <p>打开 <code>app/app.component.ts</code> 文件,加入下面的代码</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent {} " title="" data-original-title="复制"></span> </div> </p></div> <pre class="typescript hljs"><code class="typescript"><span class="hljs-keyword">import</span> { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">'@angular/core'</span>; <span class="hljs-meta">@Component</span>({ <a href="http://www.js-code.com/tag/select" title="浏览关于“select”的文章" target="_blank" class="tag_link">select</a>or: <span class="hljs-string">'app-root'</span>, templateUrl: <span class="hljs-string">'./app.component.html'</span>, styleUrls: [<span class="hljs-string">'./app.component.css'</span>] }) <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-keyword">class</span> AppComponent {} </code></pre> <p>这里都是些什么鬼?</p> <p>其实正如你所见,一个 component,就是一个 <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>,不过稍微有些不同的是,这个 <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a> 是带有一个 <code>@Component</code> <a href="https://www.typescriptlang.org/docs/handbook/decorators.html" rel="nofollow noreferrer" target="_blank">装饰器</a>的。装饰器是一个 <a href="http://www.js-code.com/tag/es6" title="es6" target="_blank">es6</a> 的新特性,这里我们其实可以看做一个将要传给 AppComponent 这个 class 的元数据。</p> <p><code><a href="http://www.js-code.com/tag/select" title="select" target="_blank">select</a>or</code> 就是我们组件的名字,你可以使用 css 选择器的方式来命名你的组建,例如</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="// 选择带有不带有 attr 属性的 a 标签 selector: 'a:not([attr])'" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-comment">// 选择带有不带有 attr 属性的 a 标签</span> selector: <span class="hljs-string">'a:not([attr])'</span></code></pre> <p><code>templateUrl</code> 存放组建的模板 url<br /><code>styleUrls</code> 存放组建样式 url,注意这是一个<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="数组" target="_blank">数组</a></p> <p>接下来为我们的组件加点内容,打开 <code>app/app.component.html</code></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" class="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="<main></p> <h1>哎呦~不错哦!</h1> <p></main>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-tag">&lt;<span class="hljs-name">ma<a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a></span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>哎呦~不错哦!<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">main</span>&gt;</span></code></pre> <p>好了,这样我们的第一个组件写好了,是不是并不复杂。接下来我们就在入口页面里面引用它,打开 <code>index.html</code></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" class="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="<!doctype html><br /> <html><br /> <head><br /> <base href=&quot;<%= webpackConfig.metadata.baseUrl %>&quot;></p> <p> <meta charset=&quot;UTF-8&quot;><br /> <meta name=&quot;viewport&quot; content=&quot;width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0&quot;><br /> <meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;></p> <p> <title><%= webpackConfig.metadata.title %></title></p> <p> <meta <a href="http://www.js-code.com/tag/name" title="name" target="_blank">name</a>=&quot;description&quot; content=&quot;<%= webpackConfig.metadata.title %>&quot;><br /> </head><br /> <body></p> <p> <!-- 组件入口 --><br /> <app-root>Loading...</app-root></p> <p> <% if (webpackConfig.metadata.isDevServer &amp;&amp; webpackConfig.metadata.HMR !== true) { %><br /> <!-- Webpack Dev Server reload --><br /> <script src=&quot;/webpack-dev-server.js&quot;></script><br /> <% } %><br /> </body><br /> </html>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-meta">&lt;!<a href="http://www.js-code.com/tag/do" title="浏览关于“do”的文章" target="_blank" class="tag_link">do</a>ctype html&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">base</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"&lt;%= webpackConfig.metadata.baseUrl %&gt;"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr"><a href="http://www.js-code.com/tag/char" title="浏览关于“char”的文章" target="_blank" class="tag_link">char</a>set</span>=<span class="hljs-string">"UTF-8"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr"><a href="http://www.js-code.com/tag/name" title="浏览关于“name”的文章" target="_blank" class="tag_link">name</a></span>=<span class="hljs-string">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">"X-UA-Compatible"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"ie=edge"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">%=</span> <span class="hljs-attr">webpackConfig.metadata.title</span> %&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"description"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"&lt;%= webpackConfig.metadata.title %&gt;"</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> <span class="hljs-comment">&lt;!-- 组件入口 --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">app-root</span>&gt;</span>Loading...<span class="hljs-tag">&lt;/<span class="hljs-name">app-root</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">%</span> <span class="hljs-attr"><a href="http://www.js-code.com/tag/if" title="浏览关于“if”的文章" target="_blank" class="tag_link">if</a></span> (<span class="hljs-attr">webpackConfig.metadata.isDevServer</span> &amp;&amp; <span class="hljs-attr">webpackConfig.metadata.HMR</span> !== <span class="hljs-string"><a href="http://www.js-code.com/tag/true" title="浏览关于“true”的文章" target="_blank" class="tag_link">true</a>)</span> { %&gt;</span> <span class="hljs-comment">&lt;!-- Webpack Dev Server reload --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/webpack-dev-server.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">%</span> } %&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></pre> <p>你可能会很迷惑,怎么这么多乱起八糟的,别怕,那些东西你都不需要关心,只需要关心 <code>body</code> 标签里的 <code>app-root</code> 就行,因为他就是我们所写的组件,angular 会找到他,然后把它渲染出来。</p> <p>OK,入口文件也写好了,是不是可以运行了?一般这种设问句的答案99%都是否定的。虽然我们写好了组件(AppCompnent),并且使用了它(&lt;app-root&gt;),但是我们的应用依然不能运行,因为我们还需要一个引导方法启动我们的程序(如果它能自己启动,那就相当智能了...)。</p> <h2 id="articleHeader3">写一个 NgModule</h2> <p>使用过 Angular1 的会知道,在 Angular1 中有一个模块化的方法 <code>angular.module</code>,同样在2中也有一个类似的方法 <a href="https://angular.cn/docs/ts/latest/guide/ngmodule.html" rel="nofollow noreferrer" target="_blank"><code>NgModule</code></a>。Angular2 的各个模块都封装在这样一个个 NgModule 中,例如我们熟悉的一些模板指令 <code>ngIf</code>、<code>ngFor</code> 这些都存放在 <code>commonModule</code> 里面,如果想要使用这些指令的时候,我们首先就要先引入 commonModule 这个模块,不然 Angular2 会不认识(虽然是亲生的)这些指令,并抛给你一堆错误。接下来我们看看怎样写一个 NgModule。</p> <p>打开 <code>app.module.ts</code></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="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 { }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="typescript hljs"><code class="typescript"><span class="hljs-keyword">import</span> { NgModule } <span class="hljs-keyword">from</span> <span class="hljs-string">'@angular/core'</span>; <span class="hljs-keyword">import</span> { BrowserModule } <span class="hljs-keyword">from</span> <span class="hljs-string">'@angular/plat<a href="http://www.js-code.com/tag/form" title="浏览关于“form”的文章" target="_blank" class="tag_link">form</a>-browser'</span>; <span class="hljs-comment">/* import 根组件 */</span> <span class="hljs-keyword">import</span> { AppComponent } <span class="hljs-keyword">from</span> <span class="hljs-string">'./app.component'</span>; <span class="hljs-meta">@NgModule</span>({ imports: [ BrowserModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) <span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> AppModule { }</code></pre> <p><code>BrowserModule</code> 这个模块,是所有在浏览器启动的 Angular2 应用所必须的。</p> <p><code>declarations</code> 在这 module 里面,我们引入了之前写的 AppComponent,并且在 <code>declarations</code> 里面声明了它,这是必要的,如果我们不提前声明我们的组件,那么 Angular2 会不认识我们写的组件,这样就不会把他渲染出来。不止组件,我们写的 <code>@Pipe</code> <code>@Directive</code> 这些都需要提前在 declarations 里面声明出来。</p> <p><code>bootstrap</code> 在这里面把我们需要启动的根组件声明出来,Angular2 会从启动 bootstrap 里面的组件。</p> <h2 id="articleHeader4">启动应用</h2> <p>就快完成了,再坚持一下,打开 <code>main.ts</code></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="/** * @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);" title="" data-original-title="复制"></span> </div> </p></div> <pre class="typescript hljs"><code class="typescript"><span class="hljs-comment">/** * @import 启动模块 */</span> <span class="hljs-keyword">import</span> { plat<a href="http://www.js-code.com/tag/for" title="浏览关于“for”的文章" target="_blank" class="tag_link">for</a>mBrowserDynamic } <span class="hljs-keyword">from</span> <span class="hljs-string">'@angular/platform-browser-dynamic'</span>; <span class="hljs-keyword">import</span> { enableProdMode } <span class="hljs-keyword">from</span> <span class="hljs-string">'@angular/core'</span>; <span class="hljs-comment">/** * @import 根模块 */</span> <span class="hljs-keyword">import</span> { AppModule } <span class="hljs-keyword">from</span> <span class="hljs-string">'./app/app.module'</span>; <span class="hljs-keyword">if</span> (process.env.ENV === <span class="hljs-string">'production'</span>) enableProdMode(); platformBrowserDynamic().bootstrapModule(AppModule);</code></pre> <p>这个文件就是我们应用的启动文件了,它会引导启动我们的应用。</p> <p>好了,一切准备就绪,接下来我们就可以运行我们的应用了。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm start" title="" data-original-title="复制"></span> </div> </p></div> <pre class="shell hljs"><code class="shell" style="word-break: break-word; white-space: initial;">npm start</code></pre> <p>打开 <a href="http://localhost:3000" rel="nofollow noreferrer" target="_blank">http://localhost:3000</a>,恭喜你,我们的应用成功启动了。</p> <p>好吧,很丑,不建议的话,可以在 <code>app.component.css</code> 里面给我们的应用润色一下。自己动手尝试一下吧,写几个组件练练手。这会比你一直看效果更好。</p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

《Angular2 从开发到部署系列》之「第一个 Angular2 应用」

全部内容,希望文章能够帮你解决

《Angular2 从开发到部署系列》之「第一个 Angular2 应用」

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过