ngx-markdown 是 Angular2+ 的一个第三方库,它的主要功能是将md文件转换为HTML格式,并且支持语法高亮. GITHUB地址:https://github.com/jfcere/ngx-markdown 安装 1. 安装 ngx-markdown 使用 npm 进行安装,在 `angular｀项目目录中执行: npm install ngx-markdown --save 在应用中引入 marked 的支持.引入: "scripts" : [ "../n…

在Angular中我们或许会用到部分外部插件的时候,像Bootstrap,Jquery这些当然我们可以通过Npm安装包的形式引入,但是还有一些其它的js库需要引入的话,我们又应该怎样操作呢? 在这里做一个简单的介绍,便于记录↓ 1.将自己下载好的js包文件放入项目指定文件夹中 2.然后在Angular.json中引入相关js文件 3.然后我们需要在 typings.d.ts文件中声明 下变量 declare var Aliplayer: any; 最后就可以使用了↓ createAliplaye…

由于Bootstrap官方目前并没有发布Angular的相关类库进行支持,当前Angular只能引用使用Bootstrap相关的样式.无法使用Bootstrap自带的脚本逻辑.以下以Angular7和Bootsrap4.2为例进行demo验证. 环境搭建 首先执行以下两个命令创建angular项目和组件 ng new AngularDemo //创建项目 ng g c bootstrapdemo // 创建组件 然后执行 npm install bootstrap // 安装最新的bootstr…

大多数同学在模仿慕课网的时候可能会遇到引入bootstrap和jquery样式部分失效以及$符号报错,这里为大家提供正确的解决方案. 可能大家在引入试过col-md之后觉得bootstrap是ok的,其实这个navbar-inverse不显示黑色的问题在于bootstrap3.0和4.0之间的更新, 属性发生了改变. 错误案例: 本来该变成黑色的导航条却还是白色. 解决方案: 1. 修改navbar-inverse为navbar-dark bg-dark 2. 或者在组件html页面直接引用如下…

Angular中使用bootstrap样式 Angular中引入bootstrap的方法   方法1:在Angular.json中的styles数组中添加bootstrap路径 如下所示: "styles": [ "src/styles.css", "./node_modules/bootstrap/dist/css/bootstrap.min.css" ] 这里需要注意路径问题,不同Angular版本下,Angular.json的位置可能有所不…

npm install --save jquery npm install @types/jquery --save 在对应的组件中引入 import * as $ from "jquery"; 在整个项目中一次声明,不用重复引入的方式: .angular-cli.json文件中添加 { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "project&q…

1.Cookie介绍 Cookie总是保存在客户端中,按在客户端中的存储位置,可分为内存Cookie和硬盘Cookie.内存Cookie由浏览器维护,保存在内存中,浏览器关闭后就消失了,其存在时间是短暂的.硬盘Cookie保存在硬盘里,有一个过期时间,除非用户手工清理或到了过期时间,硬盘Cookie不会被删除,其存在时间是长期的.所以,按存在时间,可分为非持久Cookie和持久Cookie. 主要因为HTTP协议无状态性,服务器需要知道用户在之前的页面做了哪些操作,所欲引入Cookie,是一种解…

Deferred在jQuery和Angular中的使用与简单实现 Deferred是在jQuery1.5版本中加入的,并且jQuery使用它完全重写了AJax,以前也只是偶尔使用.但是上次在使用Angular做一个小应用的时候,遇到一个问题, 我将我的AJax请求放在了自己定义的factory中,并在factory编写回调函数,返回处理后的对象,然后将这个factory注入到controller中,然后我在controller中就开始对这个对象进行操作,进行一些和View上的数据绑定. 当我这样…

一.ng-bing-html指令问题 需求:我需要将一个变量$scope.x = '<a href="http://www.cnblogs.com/web2-developer/">王大鹏</a>'绑定到angular的视图上,希望视图上显示的一个链接. 1.如果,我采用ng-bind="x",或者{{x}},我在视图看到的结果就是上面那个字符串,就说里面的都被转义了. 2.如果,我在用ng-bind-html,视图上什么都没有,并且会抛出一…

以下内容摘自http://www.ngnice.com/posts/126ee9cf6ddb68 promise不是angular首创的,作为一种编程模式,它出现在……1976年,比js还要古老得多.promise全称是 Futures and promises.具体的可以参见 http://en.wikipedia.org/wiki/Futures_and_promises . 而在javascript世界中,一个广泛流行的库叫做Q 地址是https://github.com/kriskowa…

在开始介绍angular原理之前,我们有必要先了解下mvvm模式在angular中运用.虽然在angular社区一直将angular统称为前端MVC框架,同时angular团队也称它为MVW(Whatever)框架,但angular框架整体上更接近MVVM模式.下面是Igor Minar发布在Google+ https://plus.google.com/+IgorMinar/posts/DRUAkZmXjNV的文章内容: MVC vs MVVM vs MVP. What a controver…

在使用js类库和框架的时候,大家都习惯于编写自己的使用示例,如果能将示例中的html,js和css 进行展示, 并进行高亮显示,效果会很棒,例如在html高亮显示jquery代码 上面的示例是使用rainbow实现的,rainbow的使用方式很简单,第一步在head中引入rainbows 对应的css以及js文件 第二步将对应的展示代码放入<pre><code></code></pre>标签之中即可. 但是,当一切准备OK,在angular中使用rainbo…

在vue组件中加入markdown,模板使用的是webpack 我是这样做的: 因为是npm引入的,所以markdown是遵循CommonJS规范的,需要在webpack.base.conf.js里引入, var webpack = require("webpack") // 在module.exports的最后加入 plugins: [ new webpack.optimize.CommonsChunkPlugin('common.js'), new webpack.ProvideP…

angular js的强大之处之一就是他的数据双向绑定这一牛B功能,我们会常常用到的两个东西就是ng-bind和针对form的ng-model.但在我们的项目当中会遇到这样的情况,后台返回的数据中带有各种各样的html标签.如: $scope.currentWork.description = “hello,<br><b>今天我们去哪里?</b>” 我们用ng-bind-html这样的指令来绑定,结果却不是我们想要的.是这样的 hello, 今天我们去哪里? 怎么办呢?…

首先在官网下载最新版的fancyBox(一定要去最新网站,以前依赖的jquery版本偏低),附上链接:http://fancyapps.com/fancybox/3/ 然后在项目中引用jquery,然后在引用jquery.fancybox.min.css和jquery.fancybox.min.js. 如果需要动画和鼠标滚轮滚动效果还可以引入他提供的相关工具文件. 1.你可以通过链接.css和.js在你的html文件来安装fancyBox .确保您也加载了jQuery库.以下是用作示例的基本HT…

在Medium看到一篇Angular的文章,深入对比了 Constructor 和 ngOnInit 的不同,受益匪浅,于是搬过来让更多的前端小伙伴看到,翻译不得当之处还请斧正. 本文出处:The essential difference between Constructor and ngOnInit in Angular 难以译出原意的术语都在圆括号里给出原词了.下面开始正文! *** 在stackoverflow上被问得很多的一个关于Angular的问题就是Difference betwe…

在系列一中,我们提到Zone.js,Zones是一种执行上下文,它允许我们设置钩子函数在我们的异步任务的开始位置和结束位置,Angular正是利用了这一特性从而实现了变更检测. Zones.js非常适合Angular 事实证明,Zones解决的问题非常适合Angular在我们的应用程序中执行变更检测所需的内容.你有没有问过自己Angular何时以及为何进行变化检测?什么时候告诉Angular: 兄弟,我的应用程序中可能发生了一个变化.你能检查一下吗?在我们深入研究这些问题之前,让我们首先考虑一下…

Angular get 请求数据 Angular5.x 以后 get.post 和和服务器交互使用的是 HttpClientModule 模块. import {HttpClientModule} from '@angular/common/http'; 2.在用到的地方引入 HttpClient 并在构造函数声明 import {HttpClient} from "@angular/common/http"; constructor(public http:HttpClient) {…

angular中的服务 angular中的服务相当于一个状态管理,可以将数据放在服务里面进行获取以及编辑. 服务的安装命令: ng g service count 安装好后,会在服务的ts文件中引入一个Injectable模块,这是一个服务装饰器,可以通过@Injectable()将一个类装饰成一个服务. Injectable分为全局和局部: 局部创建: @Injectable({ provideIn:root; }) provideIn有两个值: root:表示只会在跟节点创建一个实例. nu…

Angular中ui-grid的使用 在项目开发的过程中,产品经理往往会提出各种需求,以提高用户体验.最近,项目中用到的表格特别多,而且表格的列数和行数也超多.为了让用户浏览更爽,产品经理提出,当表格上下滚动时,表头固定,左右滚动时,表头随动.就这样一个看似十分easy的需求,我研究了一周时间,终于给实现了. 刚开始我研究bootstrap-table,这个插件可以实现表头固定的效果.由于我们的项目用的是angular 开发的,在项目中引入bootstrap-table和其它的文件冲突了,所以就…

Angular 个人深究[Angular中的Typescript 装饰器] 最近进入一个新的前端项目,为了能够更好地了解Angular框架,想到要研究底层代码. 注:本人前端小白一枚,文章旨在记录自己的学习过程,如有大神发现错误,也请评论指正. Angular 中的装饰器 当安装好Angular后,打开 文件[/my-app/src/app/app.module.ts] 与文件 [/my-app/src/app/app.component.ts] //app.component.tsimport…

最近太忙了,项目中使用的弹框老板嫌太丑,让我们优化一下,我在网上找了一下,找到了sweetalert弹框,算是比较好看的弹框了.所以我就想办法将sweetalert用到项目中,在项目中引入sweetalert时,遇到诸多问题,但最终在我不懈坚持下,都解决了,实现了效果.具体用法请看下文.写的有问题的地方欢迎留言,我会及时更改. 一.下载文件 npm install angular-sweetalert npm install sweetalert 当npm 下载angular-sweetaler…

Angular中ui-select的使用 最近工作一直很忙,没有时间整理知识,前几天项目中需要用到angular-ui-select,实现下拉框快速过滤效果,今天有时间研究了一下,终于搞明白了. 一.准备工作 1.安装依赖包 (1)Angular  ---   V1.4.9 (2)Angular-sanitize  ---  V1.2.28 (3)Angular-ui-select  ---  V0.12.1 (4)Bootstrap  ---  V3.3.6 如果有需要再引入jQuery 注意…

虽然我们可以用angular中的路由来做tab选项卡,但是那会让我们建立很多的页面来引入,或者建立 <script type="text/ng-template" id="news"></script>来装内容,我认为都比较麻烦.所以我是使用angular中的json和angular中的ng-show来做选项卡的. 话不多说,上代码 html部分 <!--设置nav导航栏--> <ul> <!--nav中的导航栏…

promise不是angular首创的,作为一种编程模式,它出现在……1976年,比js还要古老得多.promise全称是 Futures and promises.具体的可以参见 http://en.wikipedia.org/wiki/Futures_and_promises . 而在javascript世界中,一个广泛流行的库叫做Q 地址是https://github.com/kriskowal/q 而angular中的$q就是从它引入的.promise解决的是异步编程的问题,对于生活在同…

用angular来形成动画效果的代码如下 <!DOCTYPE html> <html lang="en" ng-app="app"> <head> <meta charset="UTF-8"> <title></title> <style> .box { width: 100px; height: 100px; background: red; } </st…

原文: https://yq.aliyun.com/ziliao/40516 --------------------------------------------------------------------------- 摘要: 本文讲的是angular中$parse详解教程, 翻开angular的api文档,官方只给出了简短的解释"Converts Angular expression into a function(将一个angular的表达式转化为一个函数)",心中神兽奔…

1.Angular中的$cacheFactory的作用:    (1)put(key,value); 在缓存对象中插入一个键值对(key,value). (2)get(key); 在缓存对象中通过指定key获取对应的值. (3)romove(key); 在缓存对象中通过指定key删除对应的值. (4)removeAll(); 删除缓存对象中所有的键值对. (5)destroy(); 销毁这个缓存对象. (6)info(); 获取缓存对象信息(id,size). value:所有类型,缓存对象中的…

NG中的指令,到底是什么(what)? 为什么会有(why)?以及怎样使用(how)? What: 在NG中,指令扩展HTML功能,为 DOM 元素调用方法.定义行为绑定数据等. Why: 最大程度减少DOM操作,实现数据绑定,与业务逻辑进行交互. How: 指令主要分为两种:内置指令和自定义指令,通过下面的例子,简单记录一下如何去使用. 内置指令 在官方API文档上罗列了很多指令,内置指令可以分为:普通指令 和 事件指令,他们都是作用于HTML之上的,通过添加属性的方式来实现的.简单看一下一些…

1.背景 在最近angular的项目中,需要用到[innerHTML]标签来指定一个div的样式: //HTML部分 <div class="contents" [innerHTML]="contents"></div> //TS部分 contents = '<p>商品信息栏位<br><span style="color:red;">商品信息介绍</span></p&g…