Angular4中调用js代码

Angular4中调用js代码

引言：Angular2开始采用TypeScript进行编码。本文讲述如何在Angular4项目中调用原生的 js 代码。

本文代码：
http://git.oschina.net/mingyueyixi/angular4-usejs

代码使用环境：webstrom

---

调用过程可以归纳为：

• 引入 js 文件到项目中
• 编写 TypeScript 声明文件
• 在 .angular-cli.json 或 index.html 中配置 js 文件（可以没有）

然后，就可以调用到原生的 js 代码了。

其中，第三步可以没有的原因是，有的 js 代码编写符合各种规范（AMD，UMD等），在编写好声明文件之后，可以直接通过 import的方式使用。import方式，js 代码会被一块打包到一个文件中。

什么是TypeScript 声明文件？

TypeScript 声明文件是以 .d.ts 结尾的 ts 文件，是 TypeScript 和 JavaScript 之间的桥梁。

TypeScript 号称 JavaScript 的超集，这么说，TypeScript 是兼容 JavaScript 的，但令人遗憾的是，直接将 .js 文件改为 .ts 文件，大多数情况下会产生很多错误。而如果 js 的内容比较少，也不复杂，还是比较容易改的。一些简单的 js ，只要把 var 改为let 就能够正常编译和运行了。

许多第三方 js 库，动辄几千行代码，总不能使用 TypeScript 去重写一遍，这时候就需要编写 TypeScript 声明文件。

虽然许多常用 js 库已经自带.d.ts 文件，但实际上，有时候我们还是无法避免要编写声明文件。比如一些偏僻的 js 代码；比如自己写的 js 代码。

.angular-cli.json 的作用

angular-cli 的配置文件，可以配置项目的目录结构，构建方式等。

.angular-cli.json的script属性

这个属性用于配置全局的 js，类似于html中的标签。

直接在index.html中引入js

当不通过模块加载器加载（import），也不配置.angular-cli.json的script属性时，能通过index.html引入js吗？

按道理说是可以的。但 js 所在必须在构建时被原样导出，否则项目构建后js 不在 build 路径（dist）下，从而导致引用失败。符合这个条件的如 src/asset 文件夹。

需要注意的是，asset文件夹是专门装载资源文件的，比如图片什么的，任何文件都会被复制过去，用来放置 js 代码库，虽然也可以，但总觉得有一点点奇怪。

这个问题，我们可以通过在 .angular-cli.json 中再配置一个具有assets特性的目录来解决。不过，angular-cli.json的script标签能够解决js的引入，似乎在html中直接引入就不是必须的了。

题外话：

Ionic 项目虽然大量使用了Angular，但它没有使用Angularcli进行构建，所以，Ionic 中在 index.html使用<script>标签引入 js ，需要另行配置。可以参考我的下一篇文章。

.angular-cli.json 更多配置，参考它的官网：
https://www.npmjs.com/package/angular-cli

---

创建Angular 4 项目

在cmd命令界面中执行命令：

ng new myApp

这将会使用 AngularCli （Angular命令行工具）创建一个名为 myApp 的Angular项目。

如果没有安装过 AngularCli，使用以下命令安装：

npm install -g @angular/cli

注意，@angular/cli 和 angular-cli 是不同的，一些文章的命令不带@，不带@的 cli 版本落后，是 1.0 正式版之前的版本。

如果总是安装失败，可能需要检查网络是否通畅，Python2安装（使用cnpm安装时，似乎并非必须），TypeScript，nodejs版本。

最后到 npm 的node_module 删除Angular 残余文件，重新安装。

网络不通的解决方法：

1、翻墙
2、配置代理
3、使用cnpm代替npm

其中代理配置有两种方法，一种是使用命令配置：

npm config set registry https://registry.npm.taobao.org

执行完毕后，会在用户目录下生成npmrc文件。在其中存在代理配置。

另一种是直接到npm的安装目录（一般在nodejs的安装目录下，或者在C:\Users\xxx\AppData\Roaming\npm\node_modules中）

在npmrc文件中添加：

registry https://registry.npm.taobao.org

这种方式是全局的，会使npm的每一次下载都通过代理——淘宝npm代理（https://registry.npm.taobao.org）完成。

---

通过 import 的方式配置

在ts文件中使用import的方式导入。

（1） 在项目中引入 moment.js 文件

以日期格式化库——moment.js为例，将此 js 复制到src/libs 目录中。

moment.js下载地址： https://raw.githubusercontent.com/moment/moment/develop/moment.js

没有就创建。

---

（2） 编写TypeScript 声明文件——moment.d.ts

在src/libs目录下创建moment.d.ts文件。并根据moment.js 的代码，为其编写声明代码。

声明文件内容：

https://raw.githubusercontent.com/moment/moment/develop/moment.d.ts

这里使用写好的声明文件。自己写任务艰巨，同时并不是那么好写的。但是对于为自己的 js 代码编写 .d.ts 文件来说，这些知名的第三方库的 .d.ts 文件很成熟，具有很大的参考价值。（TypeScript 官网的文档说的并不是那么清晰、详细）

TypeScript官网声明文件的书写：

https://www.tslang.cn/docs/handbook/declaration-files/introduction.html

建议同时参考其他知名 js 库的 .d.ts 文件来学习。因为实际的编写往往比较复杂。

（3） 使用 moment 库

在AppComponent组件中，导入moment库：

import * as moment from '../../libs/moment';

然后使用它：

export class AppComponent implements OnInit {

  title = 'app';
  ngOnInit(): void {
    const formatDate = moment().format('YYYY年MM月DD日');
    console.log(formatDate);
  }
}

ng serve -o，在控制台中就能看到今天的日期了。

2. 使用 .angular-cli.json的方式配置

（1） 添加doglog.js文件

在src/libs中创建doglog.js文件，内容如下：

var dogLog = {
    erha: function (mess) {
        console.log("二哈" + mess);
    },
    chaiquan: function (mess) {
        console.log("柴犬" + mess);
    },
    hudiequan: function (mess) {
        console.log("蝴蝶犬" + mess);
    },
    demu: function (mess) {
        console.log("德牧" + mess);
    },
    tugou: function (mess) {
        console.log("土狗" + mess);
    }
};

(2) 编写声明文件——doglog.d.ts文件

src/libs中创建doglog.d.ts文件，内容如下：

declare let dogLog: {
    erha: (mess: string) => void;
    chaiquan: (mess: string) => void;
    hudiequan: (mess: string) => void;
    demu: (mess: string) => void;
    tugou: (mess: string) => void;
};

(3) .angular-cli.json 中配置doglog.js

在script属性中添加doglog.js 所在的路径：

...

 "scripts": [
        "./libs/doglog.js"
      ],
...

然后就可以正常使用 doglog.js 中定义的东西了。

比如:

    dogLog.erha(': 卧槽二哈');
    dogLog.tugou(': 阿黄');

项目构建会Angularcli会自动将doglog.js 写入一个js中。

一个完整的 .angular-cli.json 形如:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "rsa-angular"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ],
      "scripts": [
        "./jslibs/test1.js",
        "./jslibs/test2.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

---

其他说明

comment.js 库可以直接在npm配置文件package.json配置依赖，并使用npm install 命令安装。然后正常使用。

这里为了行文方便，使用它来说明如何编写.d.ts 文件，配置和调用。

——end