Angular 2从零开始 - 00.概述&HelloWorld2017-02-06

本系列将会从零开始构建一个完整的Angular项目,最终实现一个简易版的twitter,不依赖任何seed或starter,也不使用Angular cli,这样做的目的是让自己对Angular应用开发的每一个环节都有一定的了解

最终的示例会包含以下特性:

希望对大家能有所帮助

 

序章

基础知识

以上内容是我认为在开始动手之前必须要有一定了解的,不必精通,浏览一遍各自的文档,理解其核心概念即可

那么这里为什么没有提TypeScript呢?因为根据我的实践经验,有ES6的基础的话,不必系统学习TypeScript,开发中遇到其特有的功能时进行针对性的查阅就行了

创建项目

环境

我们采用npm来管理依赖,NodeJS运行环境当然是必不可少的,所以第一步就是安装NodeJS https://nodejs.org/

另外介于国内的网络环境,推荐使用淘宝的npm镜像:https://npm.taobao.org/,请按照网站上的说明进行配置

初始化

mkdir angular-twitter
cd angular-twitter
npm init #可按照提示填写项目基本信息,或直接一路回车
# Angular
npm install @angular/common @angular/compiler @angular/compiler-cli @angular/core @angular/forms @angular/http @angular/platform-browser @angular/platform-browser-dynamic @angular/platform-server @angular/router rxjs zone.js core-js --save

# Webpack
npm install webpack --save-dev

# TypeScript
npm install typescript --save-dev

# TypeScript loader for webpack
npm install awesome-typescript-loader --save-dev

注意这些并不是最终全部的依赖,随着开发的进展,后面会陆续添加其他依赖

anuglar-twitter/
├── src/ 
    ├── app/
    ├── index.html
    ├── tsconfig.json
├── webpack.config.js
├── package.json

其中:

Hello world!

接下来我们先实现一个hello world,首先创建app的入口模块及根组件(假设你已经阅读了Angular官方的快速起步和开发指南,没有的话请移步https://angular.cn),在./src/app/目录下创建如下文件:

文件名 说明
app.module.ts 入口模块
app.component.ts 根组件
app.template.html 根组件模板
app.styles.css 根组件样式
//app.module.ts

import {NgModule} from "@angular/core";
import {AngularTwitterAppComponent} from "./app.component";
import {BrowserModule} from "@angular/platform-browser";
@NgModule({
  imports: [
    BrowserModule
  ],
  declarations: [
    AngularTwitterAppComponent
  ],
  providers: [],
  bootstrap: [AngularTwitterAppComponent]
})
export class AppModule {

}
//app.component.ts

import {Component} from "@angular/core";
@Component({
  selector: 'angular-twitter-app',
  templateUrl: './app.template.html',
  styleUrls: ['./app.styles.css']
})
export class AngularTwitterAppComponent {

}
<!-- app.template.html -->
<h1>Hello World !</h1>
/* app.styles.css */
h1 {
  font-weight: normal;
}

然后在./src创建app的启动文件main.ts

import 'core-js'; // es6+es7 polyfills
import 'zone.js/dist/zone.js'; // Angular所依赖的zone.js,必须在core-js之后加载

import {AppModule} from "./app/app.module";
import {platformBrowserDynamic} from "@angular/platform-browser-dynamic";
platformBrowserDynamic().bootstrapModule(AppModule);

修改./src/tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "es6",
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "lib": [
      "dom",
      "es6"
    ],
    "typeRoots": [
      "../node_modules/@types"
    ],
    "types": [
      "node"
    ]
  }
}

tsconfig.json中各个字段的说明:

字段名 说明
target es5 编译目标,将ts文件编译成符合es5规范的js代码
module es6 编译目标采用es6的模块管理方式,目的是能够利用webpack和es6模块导入的特性来做tree-shaking
experimentalDecorators true 使用实验性的装饰器,这个是必须的设置,因为Angular的源码中使用了它
moduleResolution node 由于我们使用了node的包管理工具npm来下载依赖,所以这里也是必须的设置,
否则在ts中导入node_modules目录下的模块时,ts编译器会找不到它
lib ["dom","es6"] 同样是必须的设置,否则用到es6的地方编译会报错
typeRoots ["../node_modules/@types"] 参考
https://www.tslang.cn/docs/handbook/tsconfig-json.html#types-typeroots-and-types
types ["node"] require等方法提供类型支持,需要先安装@types/node
(在项目根目录下执行npm install @types/node --save)

 

修改webpack.config.js

module.exports = {
  entry: {
    'app': './src/main.ts' //入口文件
  },

  output: {
    path: './src', //生成打包文件的目录
    filename: '[name].bundle.js' //打包文件的名字,本例中将是`app.bundle.js`
  },

  resolve: {
    extensions: ['.js', '.ts'] //这样配置在import的时候,就可以省略.js和.ts的后缀了
  },

  module: {
    rules: [
      {
        test: /\.ts$/,
        use: [
          {
            loader: 'awesome-typescript-loader', //编译ts的loader
            options: {
              configFileName: './src/tsconfig.json' //配置tsconfig.json的路径
            }
          },
          'angular2-template-loader' 
          // angular2-template-loader会把Angular组件中的templateUrl和styleUrls替换成template和styles,
          // 并添加require,参考<https://github.com/TheLarkInn/angular2-template-loader>
          // 当然需要先安装它:在项目根目录下执行`npm install angular2-template-loader --save-dev`
        ]
      },
      {
        test: /\.(css|html|htm)$/, 
        use: 'raw-loader' 
        // 对于css、html、htm直接取得其文本内容,在之后的文章里会分别替换成less和pug
        // 在项目根目录下执行`npm install raw-loader --save-dev`
      }
    ]
  }
};

修改./src/index.html

<!doctype html>
<html>
<head>
  <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>Angular Twitter Demo</title>
</head>
<body>
  <angular-twitter-app>Loading...</angular-twitter-app>
  <!--注意下面引用的是webpack打包生成的文件-->
  <script type="text/javascript" src="app.bundle.js"></script>
</body>
</html>

最后,我们通过npm scripts来写一段脚本执行打包和启动一个静态服务器(更多关于npm scripts的信息请参考https://docs.npmjs.com/files/package.json以及https://docs.npmjs.com/misc/scripts

修改./package.json:

{
  "name": "angular-twitter",
  ...
  "scripts": {
    "webpack": "webpack --config ./webpack.config.js --bail --progress",
    "server": "static-server ./src",
    "start": "npm run webpack && npm run server"
  },
  ...
}

其中scripts.webpack中的命令参数说明:

参数 说明
--config 指定配置文件路径
--bail 当打包时遇到第一个错误就立刻中断打包
--progress 显示打包进度

更多的参数说明请参考https://webpack.js.org/api/cli/

scripts.server中用到了一个新的node模块static-server,所以我们需要在项目根目录下执行npm install static-server --save-dev

好啦!现在我们可以在项目根目录下执行npm start来试试看了!

执行npm start之后若看到如下的提示,就说明已经打包成功并且启动了静态服务:

* Static server successfully started.
* Serving files at: http://localhost:9080
* Press Ctrl+C to shutdown.

现在用浏览器打开http://localhost:9080

screenshot1

序章到此就结束了,下一章将引入pugless,以及通过webpackfile-loader来处理模板和样式中对图片等静态资源的引用。

本文示例源码:https://github.com/indooorsman/angular-twitter/tree/helloWorld

EOF

分享

评论