我尝试进行Angular 2的快速入门

1 年 ago
清, 扬
2 minutes

首先

因为感觉自己在JS框架方面有些跟不上，所以这次决定尝试一下AngularJS。

我认为考虑到未来，SPA（单页应用程序）几乎可以确定会成为主流，虽然目前使用Rails+CoffeeScript+jQuery基本上已经可以应对大部分情况（Rails也使用Turboinks，可以说也算是SPA。Rails 5的Turboinks对SPA有相当的意识）。

我以前觸碰過BackboneJS，但在看到大量的代碼時感到很困擾。（BackboneJS太過僵硬了……）

我不知道这次的AngularJS是什么样的，但无论如何我决定试用一下。

在这篇文章中，我尝试进行Angular2快速入门。

由于我的英语不太好，所以我会凭感觉阅读网站。如果有任何地方需要纠正，请指出来。

文件的安排 de

按照快速入门指南所写的

mkdir angular2-quickstart
cd    angular2-quickstart

进行操作。
然后尝试创建JS文件和HTML文件。

import {bootstrap, Component} from 'angular2/angular2';
@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
class AppComponent { }
bootstrap(AppComponent);

似乎是用TypeScript编写的，我本以为是JS文件，但通过查看扩展名可以确定是ts文件。

我第一次接触TypeScript时，感到非常惊讶，因为它和CoffeeScript的作用差不多，但当我看到下面的代码时，更加震惊。

<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.44/angular2.dev.js"></script>
    <script>
      System.config({
        transpiler: 'typescript',
        typescriptOptions: { emitDecoratorMetadata: true }
      });
      System.import('./app.ts');
    </script>
  </head>
  <body>
    <my-app>loading...</my-app>
  </body>
</html>

在HTML内部，直接导入了一个由TypeScript代码组成的System.import(‘./app.ts’)。
在CoffeeScript中，通常会使用编译后的JS文件作为主要代码，但在这里直接调用了TypeScript的代码。
这是令人惊讶的地方。

当然，直接打开这个文件只会显示”loading…”。

实时服务器

需要安装静态文件服务器才能运行这个环境。因此，我会安装它。

$ npm install -g live-server

我以为已经安装了node.js，但实际上没有安装，所以从那里开始。

$ brew install node
$ npm install -g live-server

安装完成后，请启动服务器。

$ live-server

当我在浏览器中访问localhost:8080时，显示了我的第一个Angular 2应用程序。

尝试改变内在的内容

尝试改变app.ts文件的内容后，它自动加载了数据。
我本以为只会切换部分内容，但是整个页面都被重新加载了。

虽然我不了解机制，但是由于发送了101切换协议的请求，可能是live-server在监视这个请求。

另外，当同时在Chrome和Firefox中打开时，其中一个浏览器会显示”loading…”。

因为我想要快速开始，所以我会忽略这里并继续前进。

使用Ctrl+c停止live-server。

改变构成

看起来，这个配置似乎不太好，所以我会改变配置。

$ mkdir -p src/app

我們將進行以下結構的更改。

angular2-quickstart
└── src
    ├── app
    │   └── app.ts
    └── index.html

命令如下所示。

$ mv app.ts src/app/
$ mv index.html src/

然后，安装软件包。

$ npm init -y

这个似乎是为了像Gemfile、pom.xml等一样进行包管理的package.json。Bower是用于前端的管理软件，不知道这次是怎样的呢？不用担心，我们继续前进吧w

npm i angular2@2.0.0-alpha.44 systemjs@0.19.2 --save --save-exact

package.json文件中添加了以下内容，并创建了node_modules文件夹。

  "dependencies": {
    "angular2": "2.0.0-alpha.44",
    "systemjs": "0.19.2"
  }

接下来会继续安装live-server。

$ npm i typescript live-server --save-dev

另外，还增加了以下的内容。

  "devDependencies": {
    "live-server": "^0.9.0",
    "typescript": "^1.7.3"
  }

因为在 “快速入门” 中写着要将脚本部分改写为以下内容，所以我们需要修改 package.json 文件的内容。

{
  "scripts": {
    "tsc": "tsc -p src -w",
    "start": "live-server --open=src"
  }
}

更改文件路径

由于架构的改变，需要对文件进行修改。

<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <script src="../node_modules/systemjs/dist/system.src.js"></script>
    <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
    <script>
      System.config({
        packages: {'app': {defaultExtension: 'js'}}
      });
      System.import('app/app');
    </script>
  </head>
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

现在可以查看所有本地文件了。
另外，还可以加载js文件了。

由于无法加载TypeScript，将tsconfig.json文件放置在src目录下。

{
  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

你是在问编译信息吗？

只要以下的结构做好了就可以了。

angular2-quickstart
├── node_modules
├── src
│    ├── app
|    │    └── app.ts
│    ├── index.html
│    └── tsconfig.json
└── package.json

JavaScript的编译

进行JS编译。
以下命令需要在根目录下执行。

$ npm run tsc

运行后会进入编译监视状态。
因此，查看src/app/中可以看到app.js已经生成，当修改app.ts时，app.js也将被修改。

由于在 `tsc -p src -w` 和 `package.json` 中进行了设置，所以它似乎是一个常驻程序（如果移除 `-w` 则不会常驻）。

使用Ctrl+C退出。

执行

那么，我们来实际执行一下。

$ npm start

這樣在本地運行了。
然而，編譯不會運行，所以即使更改了app.ts，也不會反映出來。

而且，如果访问根目录，会显示文件夹信息。

最后

暂时先不管各种问题，我已经完成了快速入门。（最后的奖励还没做。）

虽然仅凭这些还无法经受实际运营，但我对大概的构想有了理解。
我计划继续进行教程来加深理解。

如果不能使用REST从数据中提取信息并动态切换页面，那么Angular就无法发挥其优势…（或许只是因为我还没有理解…）

✖
广告
将在 10 秒后关闭
bannerAds