详解如何为你的angular app构建一个第三方库
Angular 团队 在 angular6 中,使得创建 Angular 第三方库变得更为简单。如果你以前尝试过操作,你会发现其实不是很简单!
那么流程是什么呢?
首页我们构建一个搭建一个简单的环境,环境里面包含一些组件和服务以及一些接口。
创建项目
1.按照官方教程,使用 ng new
命令初始化项目:
ng new lib-demo --prefix ld
在 angular-cli 第6个之后版本。配置文件的方式发生了相当大变化, angular.json
现在代表 angular 工作空间,
你可以可以使用 ng generate application [my-app-name]
命令添加更多项目
你也可以通过 ng generate 指令创建一个公共库。
ng generate library tvmaze --prefix tm
当然你可以使用简写命令
ng g lib tvmaze --prefix tm
具体参照
使用 generate
在我们 angular.json 中添加一个项目。
在库中创建一个服务
我们会发现tvmaze有它自己的 package.json
, tsconfig.json
, tslint.json
和 karma.conf.js
,这样建立是有原因的,因为这个项目独立与主应用建立而成,它本身也有组件、服务、模块。稍后我们添加其他的内容。现在我们添加一些逻辑:
这里说明下 provideIn: root
是 angular6 之后的新属性,详情见官网;如果是为了打包优化。
在库中创建一个组件
我们使用 angular-cli 来创建一个组件
# 使用--project 指定创建在那个工程中 ng generate component poster --project=tvmaze
然后这样编辑
将组件注册到 TvmazeModule
中,并且 exports 中是的外部能够访问,还得添加 CommonModule
, HttpClientModule
两个模块。
构建一下
在我们使用之前,我们先构建一下,我们 ng build
构建,指定项目。
ng build tvmaze
使用库
接下来,我们来使用刚刚构建好的库,一般我们采用第三方库都是使用 import
来导入。
我们会发现库不存在。因为这种方式,它是从 node_modules 寻找,所以我们要在根目录下 tsconfig.json
添加 paths
接下来我们在主项目中运用:使用 <tm-poster>
标签,即可完成
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
Angular如何引入第三方库的方法详解
最近在学习Angular方面的知识,今天学习了Angular中使用第三方的库,分享给大家 如果我们想在Angular中使用第三方的库,比如jquery或bootstrap等,该如果做呢? 首先我们先来看看package.json这个文件,在目录介绍那篇博客中我们已经知道,package.json这个文件列出了项目所使用的第三方依赖包.我们在创建新项目的时候默认会给我们下载一些包,这些是Angular自带的,存放在node_modules目录中. 需要注意的是: package.json中有dep
-
Angular 如何使用第三方库的方法
Angular 的组件与模块看似好像与现有各种第三方类库(例如:lodash.moment 等)使用上有点格格不入,这很大的原因是 TypeScript 造成的假象.三足鼎立的前端其实都是雷同的,不管是哪种前端框架都可以使用到这些第三方类库. 以下我将从另一个视角解释 Angular 如何使用第三方类库的一种经验做法. 一.写在前面 在开始之前,需要先了解一下 TypeScript 模块系统 --模块是指在其自身作用域里执行,而不是在全局作用域里:模块间是依靠 export 和 import 建
-
Angular5中调用第三方库及jQuery的添加的方法
package.json这个文件列出了项目所使用的第三方依赖包.我们在创建新项目的时候默认会给我们下载一些包,这些是Angular自带的,存放在node_modules目录中. 需要注意的是: package.json中有dependencies对象和devDependencies. devDependencies 里面的插件只用于开发环境,不用于生产环境,而 dependencies 是需要发布到生产环境的. 添加依赖有2种方法: npm install name –save 就是将要安装的依
-
详解Angular-Cli中引用第三方库
最近在学习angular(AngularJS 2),根据教程使用angular-cli新建项目,然而在添加JQuery和Bootstrap第三方库时遇到了问题... 初试 我最初的想法是直接将相对路径写到index.html即可,如下: <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="external nofollow&qu
-
详解如何为你的angular app构建一个第三方库
Angular 团队 在 angular6 中,使得创建 Angular 第三方库变得更为简单.如果你以前尝试过操作,你会发现其实不是很简单! 那么流程是什么呢? 首页我们构建一个搭建一个简单的环境,环境里面包含一些组件和服务以及一些接口. 创建项目 1.按照官方教程,使用 ng new 命令初始化项目: ng new lib-demo --prefix ld 在 angular-cli 第6个之后版本.配置文件的方式发生了相当大变化, angular.json 现在代表 angular 工作空
-
详解angularjs获取元素以及angular.element()用法
本文介绍了详解angularjs获取元素以及angular.element()用法 ,分享给大家,具体如下: addClass()-为每个匹配的元素添加指定的样式类名 after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点 append()-在每个匹配元素里面的末尾处插入参数内容 attr() - 获取匹配的元素集合中的第一个元素的属性的值 bind() - 为一个元素绑定一个事件处理程序 children() - 获得匹配元素集合中每个元素的子元素,选择器选择性筛选
-
详解Android中的ActivityThread和APP启动过程
ActiviryThread ActivityThread的初始化 ActivityThread即Android的主线程,也就是UI线程,ActivityThread的main方法是一个APP的真正入口,MainLooper在它的main方法中被创建. //ActivityThread的main方法 public static void main(String[] args) { ... Looper.prepareMainLooper(); ActivityThread thread = ne
-
详解基于vue的移动web app页面缓存解决方案
现在移动web app越来越热门了,许多公司开始尝试使用angular.react.vue等MVVM框架来开发单页架构的web app.但在开发web app时,如果希望页面的导航体验也接近原生应用,那一般都会遇到这两个问题: 识别前进后退行为 后退时恢复之前的页面 笔者开发了一个基于vue与vue-router的导航库vue-navigation,来帮助开发者来解决这些问题,下面是问题的解决思路. 识别前进后退 先说第一个问题.和原生app不一样,浏览器中主要有这几个限制: 没有提供前进后退的
-
详解Android运行时权限及APP适配方法
Android 6.0起,Android加强了权限管理,引入运行时权限概念.对于: 1. Android 5.1(API 22)及以前版本,应用权限必须声明在AndroidManifest.xml中,应用在安装时,Android会列出其所需的所有权限供用户确认安装. 2. Android 6.0(API 23)及以后版本,应用权限必须声明在AndroidManifest.xml中,但权限分为普通权限(Normal Permissions)和危险权限(Dangerous Permissions),
-
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
一个基于vue-cli webpack2模板创建的项目.项目中使用到了vue+vue-router+axios+muse-ui+iview 现在构建一次需要的时间大概是40s左右.真心受不了.虽然在开发过程中,我们不太需要关心构建时间.但是如果在开发hybridApp时,构建的次数就会增多. 一般我们可以把项目分为三部分. 分类 说明 变动频率 vendor_library 核心库 低 vendor 一般项目依赖 中等 code 业务逻辑 高 vendor_library:比如vue,vue-r
-
详解vue为什么要求组件模板只能有一个根元素
我是在知乎上看到的这个问题,转念一想,用了大半年的vue,好像真的没有了解过: '为什么只能有且只有一个根元素' 于是我花了二十多分钟去找了一下答案......竟然没有找到答案.... 好的现在我来说说我的理解,如果有不对的地方欢迎指出. 我觉得这个问题需要从两个方面来说起: 1.new Vue({el:'#app'}) 2.单文件组件中,template下的元素div 一.当我们实例化Vue的时候,填写一个el选项,来指定我们的SPA入口: let vm = new Vue({ el:'#ap
-
详解PHP使用Redis存储session时的一个Warning定位
1. 问题现象 系统页面刷新的时候,偶尔会报错下面的Warnning,但是不经常出现: Warning: Unknown: Failed to write session data (Redis). Please verify that the current setting of session.save_path is correct (tcp://x.x.x.x:6379?auth=yyy) in Unknown on line 0 看网络有人说是redis版本的问题.但是没有具体结论,那
-
详解Yii2高级版引入bootstrap.js的一个办法
在frontend/assets/AppAsset.php 代码示例 namespace frontend\assets; use yii\web\AssetBundle; /** * Main frontend application asset bundle. */ class AppAsset extends AssetBundle { public $basePath = '@webroot'; public $baseUrl = '@web'; public $css = [ 'css
-
使用typescript+webpack构建一个js库的示例详解
目录 入口文件 tsconfig配置 webpack配置文件 webpack入口文件配置 webpack为typescript和less文件配置各自的loader webpack的output配置 运行webpack进行打包 测试验证 输出esm模块 已经输出了umd格式的js了, 为什么还要输出esm模块? ----TreeShaking 用tsc输出esm和类型声明文件 package.json中添加exports配置声明模块导出路径 完善package.json文件 用api-extrac
随机推荐
- js给dropdownlist添加选项的小例子
- php ftp文件上传函数(基础版)
- Python中unittest模块做UT(单元测试)使用实例
- asp下实现格式化文件大小以MB显示的函数
- php文本操作方法集合比较第1/2页
- 如何实现电子邮件的自动发送?
- Lesson03_02 样式规则选择器
- 元宵和汤圆的区别
- SQLServer 2005数据库连接字符串 连接sql2005必备资料
- SpringBoot+MyBatis简单数据访问应用的实例代码
- 微信分享调用jssdk实例
- Bootstrap CSS组件之按钮组(btn-group)
- 利用IP地址欺骗突破防火墙
- 分享一份nginx重启脚本
- 基于C语言实现简单的12306火车售票系统
- java中实现四则运算代码
- ThinkPHP空模块和空操作详解
- 解决Android MediaRecorder录制视频过短问题
- C#实现在图像中绘制文字图形的方法
- C++简单输出钻石菱形图效果