angular2系列教程hello world

Posted 2020-06-13

今天我们要讲的是angular2系列教程的第一篇，主要是学习angular2的运行，以及感受angular2的components以及模板语法。

例子

这个例子非常简单，是个双向数据绑定。

源代码

运行方法

npm install

npm run play

demo是个老外写的。我选了好久，最后觉得这个最简单，最容易入门，就拿它来讲第一篇了。后续我们需要自己写一些demo。

运行

没有比这个demo更容易运行的了，我们只需要用webpack将ts转换为es5就行了：

webpack.config.js

module.exports = {
  entry: "./src/hello",
  output: {
    path: __dirname + "/dist", publicPath: ‘dist/‘, filename: "bundle.js"
  },
  resolve: {
    extensions: [‘‘, ‘.js‘, ‘.ts‘]
  },
  module: {
    loaders: [{
      test: /\.ts/, loaders: [‘ts-loader‘], exclude: /node_modules/
    }]
  }
};

entry是入口文件，output是出口文件，path代表硬盘路径，publicPath用于cdn或者dev server创建的服务路径，什么意思呢？比如我们的webpack dev server建了一个端口为8080的服务，那么我们的出口文件就在localhost:8080/dist/。这跟path有什么区别呢？path是硬盘上的路径，当你不用dev server或者cdn的时候，就会输出文件到path。filename不言而喻就是文件名称。

更详细的webpack配置参考

转换ts到js时候，会自动寻找根目录下的tsconfig.json，里面定义了我们的ts编译配置信息，不仅webpack的ts-loader可以用，tsc命令行工具和ide都能用。

tsconfig.json

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "module": "commonjs",
    "removeComments": true,
    "sourceMap": false
  },
  "exclude": [
      "node_modules"
  ]
}

compilerOptions的前两个选项用于支持es7装饰器，这在angular中重度使用，所以必须为true。target是编译为es5，module是模块类型，这里是commonjs。removeComments顾名思义是去除所有的注释。sourceMap生成相关的.map文件，这里不生成。

更详细的tsconfig.json配置参考

最后在我们的index中，加入

<script src="/node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="dist/bundle.js"></script>

我们就可以运行我们的angular程序了。

angular2-polyfills.js是什么玩意？

这个文件是zone.js 和reflect-metadata 的混合体。

zone告诉angular2何时更新视图？还记的ng1的脏检查以及$apply吧，zone就是用来取代这些恶心的东西的！

reflect-metadata也是为了使用 ES7风格的装饰器准备的，就像@Component 和 @View 。这在ng2里面重度使用！

组件

其实这个程序就一个ts文件，还特别短！

src/hello.ts

import {Component} from ‘angular2/core‘;
import {bootstrap} from ‘angular2/platform/browser‘;

@Component({
    selector: ‘hello-app‘,
    template: `
        <h1>Hello, {{name}}!</h1>
        Say hello to: <input [value]="name" (input)="name = $event.target.value">
    `
})
export class HelloApp {
    name: string = ‘World‘;
}

bootstrap(HelloApp);

定义一个类，给它装饰一个组件，组件是什么？就是样子，看得见摸得着的东西。最后用bootstrap启动这个类就可以了！

这里我不得不夸一下ng2，实在改进太多了，所有的东西包括组件、服务、过滤器等都是一个类，然后用各自相关的@装饰器，装饰一下就可以了，非常简单明了！

模板语法

我们先来感受下ng2的模板语法，后面我会单独拿出来讲这个知识点。

值得高兴的是{{}}依然存在

<h1>Hello, {{name}}!</h1>

ng-model变成了[value]，属性绑定用了[value]

<input [value]="name" (input)="name = $event.target.value">

事件绑定变成了()，里面是所有html5的事件比如，click,hover,input等等。ng2终于拥抱html5原生方法了！

声明

本文中的打包运行方法不适合生产环境，最终生成的文件有4M之大。只用于学习angular2，因为配置方法很简单。如果想用于生产环境，强烈推荐这个：

AngularClass/angular2-webpack-starter

这个仓库里面的配置过于复杂，不适合入门，但是后续我们会一一讲解！

---

 

教程源代码及目录

如果您觉得本博客教程帮到了您，就赏颗星吧！

https://github.com/lewis617/angular2-tutorial