从安装认识Angular 2

organicwolf 发布于4天前 阅读20次
0 条评论

关于介绍,只说一句:Angular 2是一个强大、全面、庞大的MVVM框架。

安装

安装,也算是一个坎,因为你需要安装一大堆东西,却不知道每个东西是做什么的,尽管有Angular-cli全家桶,但是个人觉得:一开始学就安装全家桶,就像你直接用自动挡学开车一样,虽然上手快,但还是有些弊端的……

总之,我个人更倾向从底层学起。

首先,要确认安装了NodeJS,并且创建了目录并执行npm init初始化。

npm i -S @angular/core @angular/common @angular/compiler @angular/platform-browser @angular/platform-browser @angular/platform-browser-dynamic rxjs core-js zone.js@^0.7.2

想必看见上面的那么多包会一脸懵逼,没关系,我第一眼看见这些的那刻,和你现在的表情一样,下面在适当的时候我会逐个解释的,你只需要相信我:上面的包都是跑Hello World所必须的,缺一不可。我们先尽快跑起可爱的Hello World。

我是2017年3月20日安装的,各版本号如下:

需要额外说明一下的是zone.js这个库,这对于Angular 2来说是个比较重要的库,可以看到我上面的安装命令里的最后一项,zone.js@^0.7.2, 它是取代脏检查的一个很重要的库,用于解决异步操作,这里就不详述了。

Anyway,如果安装这个库的时候不带版本号,它会报出以下错误。有心折腾的小伙伴尽管试试~

npm WARN @angular/core@2.4.10 requires a peer of zone.js@^0.7.2 but none was installed.

OK,我们安装完运行时依赖了,现在安装开发依赖。

npm i -D webpack webpack-dev-server typescript ts-loader @types/core-js@0.9.36

看上面的@types/core-js@0.9.36,是的,这是另一个坑,我默认安装的最新版0.9.37会报错,必须降低版本,在Github这里给出了答案。愿意折腾的小伙伴尽管试试。

写配置文件

OK,我们现在开始编写配置文件

我们现在根目录配置webpack.config.js,没有它就没法打包了!

// webpack.config.js
module.exports = {
  // 入口文件
  entry: './src/main.ts',
  // 输出目录 
  output: {
    filename: 'dist/bundle.js'
  },
  // 声明解析上述格式的组件
  module: {
    loaders: [
      { test: /\.ts$/, loader: 'ts-loader' }
    ]
  }
};

然后是typescript的配置,毕竟我们的程序是用ts写的。这个配置文件就不讲解了,因为基本每个项目的配置都完全一样。

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "typeRoots": [
      "./node_modules/@types/"
    ]
  },
  "compileOnSave": true,
  "exclude": [
    "node_modules"
  ]
}

我们再加一个index.html文件,你总要有个页面看效果是不是?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Angular 2</title>
</head>
<body>
    <hello-world>加载中……</hello-world>
    <script src="dist/bundle.js"></script>
</body>
</html>

编写Hello World

我们先创建一个文件夹叫src, 源码都会被放进这个文件夹里,现在我们再创建一个main.ts文件,粘贴以下代码,这是Typescript的写法,看不懂的话就用心看注释:

import 'core-js';
import 'zone.js';
import {Component, NgModule} from '@angular/core';

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserModule} from '@angular/platform-browser';

@Component({
    selector: 'hello-world',
    template: `<h3>Hello World</h3>`
})
class AppComponent { }

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule],
    bootstrap: [AppComponent]
})
class AppModule { }

platformBrowserDynamic()
    .bootstrapModule(AppModule);
    

现在需要创建的文件都创建完了,怕路径搞错了,来贴张图:

OK,我们来逐行讲解

首先是import的导入部分。

core-js - 为全局上下文(window)打的补丁,提供了ES2015(ES6)的很多基础特性。主要是提供es6-shim,虽然Typescript是ES6的超集,但毕竟ES6才是Javascript的正根,Typescript还是不得不向着ES6靠拢,如Promise及Generator这种ES6的专有特性,ts无法转译。

zone.js - 用来帮助处理浏览器异步事件的工具库,Angular2的变化检测机制基于这个库实现的。

{Component, NgModule} - 这两个是Angular 2自己定义好的修饰器,或者叫装饰器,Component是组件,一个或多个组件可以组成一个模块,模块就是NgModule

@angular/core - 我们看到组件和模块都是来自于这个包,angular/core是框架中的核心模块,每一个应用都需要它。 包括所有的装饰器、指令、变化监测、依赖注入、渲染等核心功能,以及组件生命周期钩子。

{platformBrowserDynamic} - 这是动态引导,用于将你写的所有程序编译的组件,编译完后才能启动应用并渲染界面,可以说是打包前的最后一步,该组件来自于angular/platform-browser-dynamic。此外,还有个静态引导,名曰{platformBrowser},来自于angular/platform-browser
二者的区别是:动态引导是在浏览器执行编译,静态引导则省掉了浏览器编译的这一步,体积更小、速度更快,直接可以启动应用。相当高深的说!

{BrowserModule} - 这是在浏览器运行时的一些工具库,将某些模块打包导出,总之是必不可少的。@angular/platform-browser - 与DOM和浏览器相关的每样东西,特别是帮助往DOM中渲染的那部分。

带有platform字样的包,包含的都是引导启动的相关工具。

呃……我们终于可以讲解正式的代码了。

@Component({
    selector: 'hello-world',
    template: `<h3>Hello World</h3>`
})
class AppComponent { }

这段代码的意思是:我现在要解析一个组件了。
它的名字叫hello-world,或者说叫<hello-world></hello-world>,这个组件是个类哦,它的类名叫AppComponent

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule],
    bootstrap: [AppComponent]
})
class AppModule { }

这段代码的意思是:我现在要解析一个模块了。
declarations - 导入本模块所依赖的组件——AppComponent;
imports - 导入本模块所需的其他模块,这里的BrowserModule就是每个应用的根模块都要导入的,当前它的名字叫AppModule
bootstrap - 标记出引导组件,也就是要渲染的那个。

platformBrowserDynamic().bootstrapModule(AppModule);最后一步,编译启动!

OK, 最后我们还需要配置一下package.json,找到scripts这一项:

"scripts": {
    "dev": "webpack-dev-server --inline --colors --progress --port 3000"
},

现在在终端输入命令:npm run dev

在浏览器打开本地3000端口,即可看到结果,不知道你有没有跑起来,反正我是跑起来了!(^__^)

额外的一些提醒

终端上的警告

回头看终端,会报出两个警告:

WARNING in ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js
71:15-36 Critical dependency: the request of a dependency is an expression

WARNING in ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js
87:15-102 Critical dependency: the request of a dependency is an expression

如果你心大,可以忽略它,如果想解决这两个警告,可以配置一下webpack自带的webpack.ContextReplacementPlugin插件!具体怎么做很容易谷歌到,我就不演示了。

没有用到的RxJS

我们再看看package.json,噢,好像有个叫rxjs的依赖包我们并没有用到哦,那是不是跑Hello World不需要它呢?

No, 你如果删掉它,会报错的哦!愿意折腾的同学尽管试试!

在网上看其他Angular 2 的教程,可能会看见配置项中有typings这样的东西,是的,它跟Typescript相关,但是在Typescript2.0之后已经不需要这个东西了。

关于写法

这次是为了简单,所以将组件和模块以及渲染写在同一个文件里,但几乎所有的Angular教程都不会这么做,因为这不是最佳实践,在实际的开发中,组件、模块和引导都是分开的。

关于体积

我们看一下终端的输出,哇塞,打包之后的JS文件才3M而已哦!

没办法,谁让人家组件多呢?本来体积就不小。

首先这是开发环境,打包出来大是正常的,如果你在package.json里添加一个命令:

"scripts": {
    "dev": "webpack-dev-server --inline --colors --progress --port 3000",
    "build": "webpack -p"
},

在终端执行npm run build

是不是就小了很多?这才是放进浏览器的代码,不过这也是挺大的,如果你不用gzip压缩,我真的不知道是否有别的办法进一步压缩它了。

希望通过这篇文章,能把你从一头雾水的状态,提升为略懂吧!

查看原文: 从安装认识Angular 2

共收到0条回复

需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。