ng-animate 本文讲一下Angular中动画应用的部分。 首先，Angular本生不提供动画机制，需要在项目中加入Angular插件模块ngAnimate才能完成Angular的动画机制，Angular也不提供具体的动画样式，所以说，它的自由度和可定制性挺大的。 那么，刚开始需要在项目的入口html文件中引入Angular框架(angular.js)，然后引入angular.animate.js。 在项目的js入口文件app.js中，新建项目模块，并且添加所依赖的模块ng-Animate(有其他需要的模块...
@HostBinding()和@HostListener()在自定义指令时非常有用。@HostBinding()可以为指令的宿主元素添加类、样式、属性等，而@HostListener()可以监听宿主元素上的事件。 @HostBinding()和@HostListener()不仅仅用在自定义指令，只是在自定义指令中用的较多 本文基于Angular2+ 下面我们通过实现一个在输入时实时改变字体和边框颜色的指令，学习@HostBinding()和@HostListener()的用法。import { Directive, HostBinding, HostListener ...
本文实例讲述了angular2中Http请求原理与用法。分享给大家供大家参考，具体如下： 提供HTTP服务 HttpModule并不是Angular的核心模块。 它是Angular用来进行Web访问的一种可选方式，并位于一个名叫@angular/http的独立附属模块中. 编辑app.module.ts import { HttpModule, JsonpModule } from @angular/http; @NgModule({imports: [HttpModule,JsonpModule], })angular-in-memory-web-api npm install angular-in-memory-web-api --...
本文实例讲述了Angular2管道Pipe及自定义管道格式数据用法。分享给大家供大家参考，具体如下： 管道(Pipe)可以根据开发者的意愿将数据格式化，还可以多个管道串联。 纯管道(Pure Pipe)与非纯管道(Impure Pipe) 管道分纯管道(Pure Pipe)和非纯管道(Impure Pipe)。默认情况下，管道都是纯的，在自定义管道声明时把pure标志置为false,就是非纯管道。如: @Pipe({name: sexReform,pure:false })纯管道和非纯管道的区别: ① 纯管道: Angu...
AngularJS事件指令： ng-click/dblclick ng-mousedown/up ng-mouseenter/leave ng-mousemove/over/out ng-keydown/up/press ng-focus/blur ng-submit和ng-click一样，都是给dom绑定事件的 需要注意的是，使用事件对象的时候，需要在ng-click等指令里传入$event，如： <button ng-click="clickFn($event)" class="btn btn-danger">aa</button>表单指令 ng-change当值发生改变的时候就会有用 有value值的一些个标签，能ng-model的，才...
本文介绍了AngularJs ng-change事件/指令的小结，分享给大家，也给自己留个笔记 定义和用法ng-change 指令用于告诉 AngularJS 在 HTML 元素值改变时需要执行的操作。ng-change 指令需要搭配 ng-model 指令使用。AngularJS ng-change 指令指令不会覆盖原生的 onchange 事件, 如果触发该事件，ng-change 表达式与原生的 onchange 事件都会执行。ng-change 事件在值的每次改变时触发，它不需要等待一个完成的修改过程，或等待失去焦点...
本文实例讲述了AngularJS中下拉框的基本用法。分享给大家供大家参考，具体如下： HTML正文： <div ng-app="myApp" ng-controller="myCtrl"> <select ng-model="selectedName" ng-options="x for x in names"></select> 等价于： <select> <option ng-repeat="item in names">{{item}}</option> </select> <hr> <!-- ng-repeat绑定的值为一个字符串，ng-options绑定的为一个对象 --> <select ng-model="selectedSIte"> <option ng-r...
本文实例讲述了AngularJS中下拉框的高级用法。分享给大家供大家参考，具体如下： HTML正文： <body ng-app="myApp"> <!-- 对象内部属性遍历：x--key y---value --> <div ng-controller="myctr01"> {{sites}}<br> <select ng-model="site" ng-options="x for (x, y) in sites"></select> 选择的网址：<span>{{site}}</span> </div> <div ng-controller="myCtrl"> <p>选择一辆车:</p> <!-- 这里y标识成员元素对象，并且使用该对象的b...
AngularJS的初学者常常会对$parse和$eval两个内建服务感到有些困惑，今天我们就来说说AngularJS中的$parse和$eval。 总的来说，$parse和$eval都是作用于AngularJS的表达式。 什么是表达式？ AngularJS中的表达式就是一些类似于JavaScript代码的代码片段（但是它们和JavaScript代码有不尽相同）。表达式通常被用来防止在绑定中，例如{{expression}}。下面是一个例子：1 + 2 = {{ 1 + 2 }} 或者：My name is {{ user.name }} $pars...
前言 大家都知道ng内置了许多自定义的指令，这避免了我们自己去造轮子。同时，ng也提供了自定义指令的功能，可以让我们的页面元素标签更加实例化。 在这篇文章中，我们将分别列举每一个内置指令的用法，并提供一个例子作为演示。尽量用最少最简单的描述，让你在更快更准确地学会每一种内置指令的基本用法。 ngFor 作用：像 for 循环一样，可以重复的从数组中取值并显示出来。例子： // .tsthis.userInfo = [张三, 李四, 王五];// ....
本文介绍了详解angularjs获取元素以及angular.element()用法 ，分享给大家，具体如下：addClass()-为每个匹配的元素添加指定的样式类名after()-在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点append()-在每个匹配元素里面的末尾处插入参数内容attr() - 获取匹配的元素集合中的第一个元素的属性的值bind() - 为一个元素绑定一个事件处理程序children() - 获得匹配元素集合中每个元素的子元素，选择器选择性筛...
前言：众所周知，primeNG是ng2的一个ui组件库，很强大，个人感觉比ng2-bootstrap还强大，下面就告诉大家怎么安装使用，官网：http://www.primefaces.org/primeng/#/ 本人使用angular cli 创建项目，所以讲述在cli下的配置安装步骤，如果没有使用cli也不用担心，官网有具体的安装步骤。 1、 安装 cd 你的项目目录npm install primeng --save-dev 2、 配置angular-cli.json omega是一种主题，还有很多主题，bootstrap等等...... "sty...
本文实例讲述了AngularJS中ng-class用法。分享给大家供大家参考，具体如下： 使用 ng-class 动态设置元素的类，方法是绑定一个代表所有需要添加的类的表达式。重复的类不会添加。当表达式发生变化，先前添加的类会被移除，新类会被添加。 在angular中为我们提供了3种方案： ① 通过数据的双向绑定（不推荐使用） ② 通过对象数组。 ③ 通过key/value 一、通过数据双向绑定： function changeClass(){$scope.className = "change2";...
本文实例讲述了AngularJS常见过滤器用法。分享给大家供大家参考，具体如下： 过滤器用来格式化需要展示给用户的数据。在HTML中的模板绑定符号 {{ }} 内通过 | 符号来调用过滤器。以下是常用的过滤器。 大小写过滤器 {{ name | uppercase }} 大写过滤器 {{ name | lowercase}} 小写过滤器 实例：（大写过滤器） <div ng-controller=myController>姓氏: <input type="text" ng-model="student.firstName"></br></br>名字: <input typ...
AngularJS ng-repeat遍历输出的用法,最近需要用，就顺便发到随笔上了 <!doctype html> <html> <head><meta charset="utf-8"><title>ng-repeat directive</title> </head> <body ng-app="myApp"> <table ng-controller="CartController"><caption>我的购物车</caption><tr><th>序号</th><th>商品</th><th>单价</th><th>数量</th><th>金额</th><th>操作</th></tr><tr ng-repeat="item in items"><td>{{$index + 1}}</td><td>{{item....