单页面应用组件通信有以下几种，这篇文章主要讲 Angular 通信父组件 => 子组件子组件 => 父组件组件A = > 组件B父组件 => 子组件子组件 => 父组件sibling => sibling@input@outputsetters (本质上还是@input)注入父组件ngOnChanges() (不推荐使用)局部变量@ViewChild()serviceserviceserviceRxjs的ObservalbeRxjs的ObservalbeRxjs的ObservalbelocalStorage,sessionStoragelocalStorage,sessionStoragelocalStorage,sessionStorage ...
本文实例讲述了AngularJS实现动态切换样式的方法。分享给大家供大家参考，具体如下： AngularJS相比原生的js或者jquery有着很大不同，对于一个简单的鼠标点击不同选项，动态切换样式该怎么实现呢。 本文实现的是点击某个标题，标题字体加粗，并随之切换相应的div内容，如下（点击推荐或热点）Ok.，实现过程 1. html代码 <!--推荐或热点标题--> <div class="comTitStyle"><div><a ng-click="titleClick(0)" ng-class="{selected:foc...
在angularjs1.X 中存在了三种数据绑定的方式，用于数据的同步、展示。在 angularjs 1.3 之前，angularjs 只存在两种方式： two-way-binding 和 one-way-bindng , 而后则引入了称为one-time-binding 的绑定机制。 目前angularjs 中存在以下三种数据绑定方式： two-way-bindingone-way-bindingone-time-bindingtwo-way-bindingangularjs 中的 Two-way-binding 的作用是将 Model 和 View 关联起来，任何一侧的数据变更都会更新另一侧的...
先来 看看具体效果：实现方法： 1.下载并引入 angularjs 2.HTML代码： <!DOCTYPE html> <html lang="en" ng-app="test"> <head><meta charset="UTF-8"><title>Html5 拖拽行为和AngularJs的结合</title><meta charset="utf-8"/><script type="text/javascript" src="js/angular.js"></script><style>.to-drag, .drag-stop {display: inline-block;}</style> </head> <body ng-controller="main"> <div class="to-drag"><ul><li ng-r...
本文实例讲述了angular 实现的输入框数字千分位及保留几位小数点功能。分享给大家供大家参考，具体如下： 网上查到一个关于千分位的指令，我稍微做了点完善，通用指令代码 myApp.directive(price, function($parse) {return {link: function (scope, element, attrs, ctrl) {//控制输入框只能输入数字和小数点function limit(){var limitV=element[0].value;limitV=limitV.replace(/[^0-9.]/g,"");//处理0开头的整数if ((/^0+[0-9]...
我们经常听到angular的脏检查机制和数据的双向绑定，这两个词似乎已经是它的代名词了。那么从编程层面，这到底是什么鬼？ 当$scope的一个属性被改变时，界面可能会更新。那么为什么angular里面，修改$scope上的一个属性，可以引起界面的变化呢？这是angular的数据响应机制决定的。在angular里面就是脏检查机制。而脏检查，和双向绑定离不开。 这里插句题外话，JavaScript里面非常有意思的一种接口，当你修改（或新增）一个对象的某...
考评员查询，因为整体的数据量比较小，所以我们可以将分页放到前台进行处理。 其实分页的原理也很简单，我们根据分页选择的页码数和每页数据条数决定当前显示的是数组中的第多少项到多少项，然后再构造分页的参数传入已有的分页指令。 // 初始化分页参数 $scope.pageParams = {size: $stateParams.size, // 每页数据条数page: $stateParams.page, // 页码数last: undefined, // 是否首页first: undefined, // 是否...
本文实例讲述了AngularJS实现的base64编码与解码功能。分享给大家供大家参考，具体如下： <!DOCTYPE HTML> <html> <head><meta charset="utf-8"><title>base64加密</title><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script><script>function Base64() {// private property_keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";// public method for encodingthis....
HTML5原生的表单校验属性（必填，长度限制，取值间隔，正则表达式等等）可以满足普通的校验需求，但是有些场景必须用到自定义校验，比如注册时的密码确认，有比对关系的时间/数值选择， 需要到请求到服务端取值验证等等这里以密码确认为例进行说明。 指令开发表单的验证状态是通过 formContro l的 errors 属性反馈出来的，所以基本的思路肯定就是需要添加校验规则，然后将验证结果添加到formControl实例的errors属性中。那么问题来...
需求：最近在做一个网上商城的项目，技术用的是Angular4.x。有一个很常见的需求是：用户在点击“我的”按钮时读取cookie，如果有数据，则跳转到个人信息页面，否则跳转到注册或登录页面解决在这里通过Angular的路由守卫来实现该功能。1. 配置路由信息 const routes = [{ path: home, component: HomeComponent },{ path: product, component: ProductComponent },{ path: register, component: RegisterComponent },{ path: my, co...
网上的文章和教程基本上写到组件加载完成就没了！没了？！而且都是只能存在一个dialog，想要打开另一个dialog必须先销毁当前打开的dialog，之后看过 material 的实现方式，怪自己太蠢看不懂源码，就只能用自己的方式来实现一个dialog组件了 Dialog组件的目标：可以同时存在多个Dialog，可销毁指定Dialog，销毁后html中无组件残留且提供回调 动态加载组件的实现方式有两种，angular4.0版本之前使用ComponentFactoryResolver来实现，...
本文实例讲述了angularjs实现的购物金额计算工具。分享给大家供大家参考，具体如下： 当我们用js或者jquery进行购物车金额计算的时候会非常麻烦,今天,我们用angularjs一种新的方法进行购物车总额的计算.代码如下: <!DOCTYPE html> <html ng-app> <head><meta charset="UTF-8"><title>www.gxlcms.com angular购物金额计算器</title> </head> <body ng-controller="sum">价格:<input type="text" ng-model="cup.price"><br/><br/>数量...
使用 Angular 请求数据的时候，需要引入 HttpModule 模块，如果使用的 jsonp 模式的话，则需要另外引入 JsonpModule 模块 import { HttpModule, JsonpModule } from @angular/http然后在当前模块中的 imports 内进行注册 imports: [HttpModule,JsonpModule ], 注册以后就可以在组件文件当中引入相对应的方法来进行数据请求了 import { Http, Jsonp } from @angular/http 然后在当前组件的构造函数当中进行注入以后就可以使用了 con...
前言 本文主要介绍了关于angular实现页面打印局部功能的相关内容，分享出来供大家参考，下面话不多说了，来一起看看详细的介绍吧。 场景在页面显示的时候是分页现实的，当前页面只有10条数据，但是打印需要打印完整的100条数据。 并且在当前页面包含了表格之外的标题，菜单等其他元素。 后天api请求都需要带上token信息 前台页面跳转到打印页面后再跳回1、通过缓存传递数据，2、路由跳转到打印页面，3、页面获取缓存数据，4、调用浏...
我们常常会遇到这样一个问题，当我们使用一个第三方控件库的时候，我们只用到了其中 1 个或某几个组件，会连带一大堆无用的东西，造成体积臃肿不堪。又或者首页用到的组件较多，首页加载速度缓慢，这个时候，我们或许需要加载用户可视范围内用到的组件，随着用户的浏览下拉，我们再去加载这些组件，渐进式加载,渐进式体验，这个时候你或许就用到了本工具所实现的功能。或者一个页面的某些不重要区域，比如第三方广告又或者不重要的...