Angular 2 应用程序入门
介绍
先决条件
从 Angular 1 过渡？
所以，你浏览了几行新版 Angular 2.0，然后开始想，“嗯？”相信我，我理解你的痛苦。当我第一次看到它时，我以为我失去了控制。我对 Angular 1 的做事方式很满意，但这似乎完全不同。
然而，现在我已经改变了主意，我会告诉你之前可能已经听说过的事情：Angular 2.0 比它的前身好得多。
适应新技术很难，但这可能是必要的。另外，一旦你熟悉了 Angular 2，你就不会记得为什么一开始不喜欢它。
有一种快速、简单的方法可以将应用程序从 Angular 1s 迁移到 Angular 2。如果您想了解如何将应用程序迁移到 Angular 2 的详细信息，请从此处开始。
演示应用程序
正如我在简介部分中所说，我们将使用他们的 API构建一个应用程序，用于从Giphy网站搜索（并显示）gif 。最后，我们还将把我们的应用程序部署到Github 页面。
您可以在此处试用该应用程序，也可以在Github上 fork 完整的源代码。
Angular CLI
从安装和配置设置方面来看，从头开始设置 Angular 2 应用程序实际上可能是一项艰巨的工作。Ember 的员工有一个很大的优势：一个名为ember-cli的工具。此工具可引导应用程序并帮助完成一些常见的项目操作和搭建。
当然，我们之前有Yeoman及其Angular 生成器，但它们并没有成为广为人知的惯例，而且它们绝对不是像 Ember 那样的事实上的工具。
现在，进入Angular CLI。虽然这个项目目前处于测试阶段，但我们可以使用它来：
- 使用一个简单的命令（ ng new）创建具有适当目录结构和包含测试的脚手架应用程序。
- 生成组件、路由、服务和管道。CLI 还将为所有这些创建简单的测试 shell。
- 轻松将您的应用程序投入生产（ng serve）。
- 通过 GitHub Pages ( ng github-pages:deploy )部署应用程序。
- 运行单元测试或端到端测试。
- 执行官方 Angular2 linter ( ng lint )。
安装 angular-cli
它就像运行一样简单：
npm 安装-g angular-cli
如果您运行以下命令，则可以确认安装顺利：
ng--帮助
您会知道安装进展顺利，因为您会获得大量输出和有关各种 angular CLI 命令的帮助。
仅供参考（以防您稍后按照本指南操作，并且发现其中的内容与我在此处输出的不同），截至撰写本文时，我的版本（ ng --version ）是angular-cli: 1.0.0-beta.9。
使用 Angular CLI 启动新应用
我们将应用程序命名为GiphySearch。使用 angular-cli 启动一个新应用程序：
ng 新 GiphySearch
你应该得到类似这样的输出：
# nikola in ~/DEV/Angular2 [13:57:55]
→ ng new GiphySearch
Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ember-cli.com/user-guide/#watchman for more info.
installing ng2
create .editorconfig
create README.md
create src/app/app.component.css
create src/app/app.component.html
create src/app/app.component.spec.ts
create src/app/app.component.ts
create src/app/environment.ts
create src/app/index.ts
create src/app/shared/index.ts
create src/favicon.ico
create src/index.html
create src/main.ts
create src/system-config.ts
create src/tsconfig.json
create src/typings.d.ts
create angular-cli-build.js
create angular-cli.json
create config/environment.dev.ts
create config/environment.js
create config/environment.prod.ts
create config/karma-test-shim.js
create config/karma.conf.js
create config/protractor.conf.js
create e2e/app.e2e-spec.ts
create e2e/app.po.ts
create e2e/tsconfig.json
create e2e/typings.d.ts
create .gitignore
create package.json
create public/.npmignore
create tslint.json
create typings.json
Successfully initialized git.
⠸ Installing packages for tooling via npm
├── es6-shim (ambient)
├── angular-protractor (ambient dev)
├── jasmine (ambient dev)
└── selenium-webdriver (ambient dev)
Installed packages for tooling via npm.
此命令完成后，让我们进入项目并运行它：
cd GiphySearch
ng serve
你应该得到：
# nikola in ~/DEV/Angular2/GiphySearch on git:master ● [14:05:03]
→ ng serve
Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ember-cli.com/user-guide/#watchman for more info.
Livereload server on http://localhost:49154
Serving on http://localhost:4200/
Build successful - 889ms.
Slowest Trees | Total
----------------------------------------------+---------------------
BroccoliTypeScriptCompiler | 484ms
vendor | 332ms
Slowest Trees (cumulative) | Total (avg)
----------------------------------------------+---------------------
BroccoliTypeScriptCompiler (1) | 484ms
vendor (1) | 332ms
当你通过链接https://localhost:4200/访问该应用程序时，浏览器应该会显示字符串app works! 。
如果您对上面的“无法启动 watchman”输出感到好奇。您可以在此处了解更多信息。简而言之，本文解释了如果您使用的是 Mac，如何使用brew install watchman 。
文件夹结构
让我们在你选择的编辑器中打开这个项目（我使用 Sublime Text 3），你应该看到类似这样的内容：
正如我所说，这是一个入门教程，旨在让您快速入门，因此这次我不会介绍任何具体细节。这里我们只关注src文件夹。该文件夹的内容应如下所示：
这个 Typescript 是什么？
现在，你可能想知道，这些.ts文件都是什么？这些都是 TypeScript 文件，尽管你不需要在Angular 2 中使用 TypeScript，但几乎每个人都需要。
那么，什么是 TypeScript？他们在网站上声明：“TypeScript 是 JavaScript 的超集，可以编译为干净的 JavaScript 输出。”
你可能之前已经看过这张图片：
由此我们可以看出，这个 TypeScript 包含 ES6（EcmaScript6），而 ES6 又包含 ES5（EcmaScript5），这又意味着 TypeScript 包含 ES5。
由于当今大多数浏览器无法运行 ES6 甚至 TypeScript，我们使用所谓的转译器将 TypeScript 或 ES6 代码转换为 ES5 代码，ES5 代码是您可能最熟悉的“普通” JavaScript，基本上当今所有的浏览器都可以理解它。
TypeScript 带来的一些功能包括：
- 类型
- <a href="https://translate.google.com/website?sl=en&tl=zh-
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~