全局脚本

有的时候,我们需要加载全局脚本,例如 jQuery 脚本库,第三方的控件库等等。比如 jQuery 可以直接加载到 window 对象上,这就需要我们使用 Angular 中的全局脚本来处理。

使用全局脚本

通过在 angular-cli.json 配置文件的 apps[0].scripts 属性中添加脚本文件可以应用于全局范围。这相当于您在 index.html 中添加 <script> 标记来精确加载它们。

这对于遗留的库或者脚本片段来说特别有用。

"scripts": [
"global-script.js",
],

重命名和延迟加载

可以使用对象格式实现重命名和延迟加载。

"scripts": [
"global-script.js",
{ "input": "lazy-script.js", "lazy": true },
{ "input": "pre-rename-script.js", "output": "renamed-script" },
],

在应用中使用全局库

一旦您通过scripts 导入一个库,您不需要在 TypeScript 代码中通过 import 再次导入它(例如 import * as $ from 'jquery';)。如果这样做了,您会得到两个不同的库:一个全局导入,一个作为模块导入。

这对于使用插件的库来说,尤其是个坏消息,比如 jQuery,因为每个复制品都有不同的插件。

相反,在项目中下载全局库的相应类型定义(npm install @types/jquery),遵循安装第三方库的步骤,您将可以访问库所导出的全局变量。

如果您使用的第三方库还没有类型定义,可以在 src/typings.d.ts 中手工定义为 any。

declare var libraryName: any;

在使用扩展其它库的脚本库时,例如 jQuery 的插件实例(例如 $('.test').myPlugin(); ) ,因为安装的类型 @types/jquery 可能没有包含 myPlugin 的定义,您可能需要在 src/typings.d.ts 中添加一个类似如下的接口。

interface JQuery {
myPlugin(options?: any): any;
}

否则,在您的 IDE 中,您可能会看到类似 [TS][Error] Property 'myPlugin' does not exist on type 'JQuery' 错误。

See also

https://github.com/angular/angular-cli/wiki/stories-global-scripts

Angular CLI: 全局脚本的更多相关文章

  1. angular cli全局版本大于本地版本 把本地版本升级方式

    查看 angular 版本  ng version 如出现提示 Your global Angular CLI version (xxx) is greater than your local ver ...

  2. 迈向angularjs2系列(8):angular cli和angular2种子项目

    文章目录 1.angular cli快速搭建项目 2.angular2-seed 3.手动配置 题外话:如何更好的阅读本篇文章 一: angular cli的安装 Angular-cli(命令行界面, ...

  3. 使用Angular CLI进行Build (构建) 和 Serve

    第一篇文章是: "使用angular cli生成angular5项目" : http://www.cnblogs.com/cgzl/p/8594571.html 第二篇文章是: & ...

  4. .Net Core + Angular Cli / Angular4 开发环境搭建

    一.基础环境配置 1.安装VS 2017 v15.3或以上版本 2.安装VS Code最新版本 3.安装Node.js v6.9以上版本 4.重置全局npm源,修正为 淘宝的 NPM 镜像: npm  ...

  5. 从Java角度理解Angular之入门篇:npm, yarn, Angular CLI

    本系列从Java程序员的角度,带大家理解前端Angular框架. 本文重点介绍Angular的开发.编译工具:npm, yarn, Angular CLI,它们就像Java在中的Maven,同时顺便介 ...

  6. (转载)从Java角度理解Angular之入门篇:npm, yarn, Angular CLI

    本系列从Java程序员的角度,带大家理解前端Angular框架. 本文是入门篇.笔者认为亲自动手写代码做实验,是最有效最扎实的学习途径,而搭建开发环境是学习一门新技术最需要先学会的技能,是入门的前提. ...

  7. Protrator 官网和下载工具稍慢 , 但能使用. Angular CLI 内置 官方推荐 TS的 demo 不明显 , 而且依赖无法安装

    npm uninstall -g protractor  && cnpm install -g protractor && protractor --version 复 ...

  8. .Net Core+Angular Cli/Angular4开发环境搭建教程

    一.基础环境配置1.安装VS2017v15.3或以上版本2.安装VSCode最新版本3.安装Node.jsv6.9以上版本4.重置全局npm源,修正为淘宝的NPM镜像:npminstall-gcnpm ...

  9. Angular CLI的简单使用(2)

    刚才创建了myApp这个项目,看一下这个项目的文件结构.    项目文件概览 Angular CLI项目是做快速试验和开发企业解决方案的基础. 你首先要看的文件是README.md. 它提供了一些如何 ...

随机推荐

  1. java中字符串"1999-10-01T00:00:00+08: 00" 转化为Date格式

    String oldStr = "1999-10-01T00:00:00+08: 00": SimpleDateFORMAT sdf = new SimpleDateFORMAT ...

  2. initWithFrame方法的使用

    1. initWithFrame方法是什么? initWithFrame方法用来初始化并返回一个新的视图对象,根据指定的CGRect(尺寸). 当然,其他UI对象,也有initWithFrame方法, ...

  3. numpy鸢尾花

    import numpy from sklearn.datasets import load_iris #从sklearn包自带的数据集中读出鸢尾花数据集data iris_data = load_i ...

  4. 简述linux操作系统启动流程

    Linux启动流程 POST-->BootSequence(BIOS)->Bootloader(MBR,grub)-->kernnel(ramdisk,initrd)-->ro ...

  5. Python基础:八、python基本数据类型

    一.什么是数据类型? 我们人类可以很容易的分清数字与字符的区别,但是计算机并不能,计算机虽然很强大,但从某种角度上来看又很傻,除非你明确告诉它,"1"是数字,"壹&quo ...

  6. Sublime3安装及配置

    1.官网下载 2.安装后输入密钥 ----- BEGIN LICENSE -----sgbteamSingle User LicenseEA7E-11532598891CBB9 F1513E4F 1A ...

  7. Kali无法启动、无法安装

    好久未用Kali,换了个电脑后拷贝过去,发现打开登录界面无限循环,后删除下载新的vm镜像,发现无法开机,界面如下: 后经过各种尝试,发现为vmware版本太低的原因造成,升级vmware到版本14,可 ...

  8. [R] [Johns Hopkins] R Programming -- week 4

    #Generating normal distribution (Pseudo) random number x<-rnorm(10) x x2<-rnorm(10,2,1) x2 set ...

  9. 在经过身份验证的服务中不支持跨域 javascript 回调

    在 asp.net web forms 站点中做了一个 wcf restful service 接口,开启了webforms 身份认证. 当 webforms 站点用户登录之后,访问 restful ...

  10. Win10无法访问网上邻居电脑共享的文件夹怎么办

    Win10无法访问网上邻居电脑共享的文件夹怎么办 现在许多电脑上装的都是Win系统,Win10无法访问网上邻居电脑共享的文件夹怎么办呢?下面小编为大家介绍下解决的方法吧! 1点击桌面上的“此电脑”图标 ...