在Angular的模板中遍历一个集合（collection）的时候你会这样写： <ul><li *ngFor="let item of collection">{{item.id}}</li> </ul>有时你会需要改变这个集合，比如从后端接口返回了新的数据。那么问题来了，Angular不知道怎么跟踪这个集合里面的项，不知道哪些该添加哪些该修改哪些该删除。结果就是，Angular会把该集合里的项全部移除然后重新添加。就像这样：这样做的弊端是会进行大量的DOM操作，而DOM操作是非常消耗性能的。那...
前言：现在有很多朋友在接触Angular2的时候，总是不可避免的会使用一些其他的第3方的插件，而这些插件可能都是基于jQuery的，而且也没有对应的angular2的版本，这里我就来讲解一下，在这种情况下，如何整合第3方的jQuery插件。我们以Angular2整合zTree为例来说明整合的思路及过程。 zTree官方网站：http://www.treejs.cn/v3/main.php#_zTreeInfo 1.一般我在想要将像zTree这种插件集成进来的时候，我会先直接去看zTree它们的在线例子...
需求 在angularjs构建的业务系统中，通过ui-view路由实现页面跳转，初始化进入系统后，右侧内容区域需要自适应浏览器高度。 实现方案 在ui-view所在的Div添加directive，directive中通过element.css初始化计算div的高度，动态更新div高度directive监听（$$watch)angular的$digest，实时获取body高度，动态赋值model或element.css改变方案1：添加directive和element.css自适应高度 1.创建directive define([ "app" ], function(app)...
本文实例讲述了AngularJS监听ng-repeat渲染完成的两种方法。分享给大家供大家参考，具体如下： 监听ng-repeat渲染完成有两种方法 一、最实用的方法: <ul class="pprt_content"><li ng-repeat="src in imageHotList track by $index" ng-click=goGoodsDet(src.goodsId,src.merchId) on-finish-render-filters="completeRepeat"><img ng-src="{{productUrl}}{{src.imageName}}"></li> </ul>对应作用域controller: $scope.completeRep...
正如angular官网所说，项目国际化是一件具有挑战性，需要多方面的努力、持久的奉献和决心的任务。 本文将介绍angular项目的国际化方案，涉及静态文件(html)和ts文件文案的国际化。 背景 Angular: 5.0Angular Cli: 1.6.1(1.5.x也可以)NG-ZORRO: 0.6.8Angular i18ni18n模板翻译流程有四个阶段：在组件模板中标记需要翻译的静态文本信息(即打上i18n标签)。Angular的i18n工具将标记的信息提取到一个行业标准的翻译源文件(如.xlf文件,使...
前言 本文主要给大家介绍了关于Angular4 HTML属性绑定的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。 简介基本HTML属性 <td [attr.colspan]="tableColspan"></td>Css 类绑定 <!-- 第一种情况 class 类全部替换 --> <div [class]="divClass">CSS 类绑定，[class] 全部替换的例子</div> <!-- 第二种情况 替换 class 类的部分属性 --> <div [class.a]="isSpcial">CSS 类绑定，[class.sepcial] 部分替...
本文实例讲述了Angular实现点击按钮后在上方显示输入内容的方法。分享给大家供大家参考，具体如下： 先来看看运行效果：具体代码如下： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>www.gxlcms.com Angular显示输入内容</title><script src="angular.min.js"></script><script>var myapp=angular.module("myapp",[]);myapp.provider("User",function(){var user={name:"zs",sex:"girl",email:"zs@bawei....
前言 laydate.js经过贤心大大的重写之后功能越来越强大，用起来也愈渐灵活了，大家都知道。Angular是不支持直接引入js文件的，下面介绍项目如果引入laydate.js的方法(可同样用于其他js文件引入，可能会有一些差别) 方法如下： 一、将下载的laydate中的js和theme文件放到一个统一的文件下面，我把它放到asset下二、在angular-cli.json配置js三、修改laydate.js找到这一句补全路径和删除版本号 "modules/laydate/":"assets/theme/")d...
本文实例讲述了Angular2实现组件交互的方法。分享给大家供大家参考，具体如下： 前言 在Angular开发中，我们经常会涉及到组件之间的交互，比如会引用自己部门开发的组件 有时候，我们需要向引用的组件里面绑定一些数据，或者我们需要引用的子组件输出一些数据 这时，我们就需要处理好组件之间的交互 组件交互的关键代码 父组件绑定数据到子组件 子组件 <h3>{{hero.name}} says:</h3> @Input() hero: Hero;父组件 <hero-child [hero...
学习一个框架或库的最好方法是看官方文档，并着手去写例子。最近在利用空闲的时间学习angular，那今天就尝试写一个message组件，并通过message服务动态加载message组件。 我所参与的项目基本是用jquery完成的。之前，在项目中自己动手写过一个简单的message插件，样子如下图。那现在就使用angular（版本5.0.0）来实现message组件。 message组件 message组件要根据传入的类型、消息和duration来显示。创建三个文件：message.compone...
管道是什么？ Angular的管道可以看作成是一个数据格式化展示的工具。管道可以将数据格式化显示，而不改变源数据。比如关于日期的展示，对于源数据使用管道1可以以yyyy/MM/dd来展示，也可以使用管道2展示成Feb 28, 2017的形式。但原数据依然是date，并没有改变。利用管道我们可以将数据格式化的内容剥离出来，使之独立，有需要格式化展示的时候选择相应的管道进行处理即可。 一、模板表达式操作符模板表达式语言使用了JavaScript 语...
VSCode自带debugger工具，管理后台项目使用angular2，试了下调试ts文件十分方便。下面是具体的实现步骤以及踩的坑。当你调试出来后，回头看这个设置还是十分简单的。我使用的是ng-cli创建的项目。后面再补充一般项目的调试，感觉也差不多。 解决了 “由于未找到生成的代码，已忽略断点(是否是源映射问题?) ” ，参考下面的 我的环境配置 我的环境配置 1. node v7.3.02. npm 3.10.103. ng >= 1.3 // 这一点非常重要，我一开始的版本...
本文介绍了ANGULAR2 与 D3.js集成实现自定义可视化的方法，分享给大家，具体如下：目标 展现层与逻辑层分离数据与可视化组件相分离数据与视图双向绑定,实时更新代码结构清晰,易于维护与修改基本原理 angular2 的组件生命周期钩子方法\父子组件交互机制\模板语法 源码解析 代码结构很简单，其中除主页index.html和main.ts之外的代码结构如下所示:代码结构app.module.ts import { BrowserModule } from @angular/platform-browser; i...
AngularJS 是目前使用非常广泛的 web app 应用框架，随着它的受欢迎程度持续上升 ，期待已久的AngularJS 4.0 诞生了。尽管已经做了很多优化，但几乎每个 Angular 专家仍然在处理使用 AngularJS 中出现的各种各样的问题。 目前，企业使用Web技术用在他们各自项目上，在线业务因此受到了极大影响。因此，有必要深入挖掘影响企业成长的各种因素。 但是，有可能不正确地使用 AngularJS 方法会影响你的应用程序在市场上的排名，因此 Ang...
本文实例讲述了AngularJS实现自定义指令及指令配置项的方法。分享给大家供大家参考，具体如下： AngularJS自定义指令有两种写法： //第一种 angular.module(MyApp,[]) .directive(zl1,zl1) .controller(con1,[$scope,func1]); function zl1(){var directive={restrict:AEC,template:this is the it-first directive,};return directive; }; function func1($scope){$scope.name="alice"; } //第二种 angular.module(myApp,[]).dire...