AngualrJs2官方方法是以@Input,@Output来实现组件间的相互传值，而且组件之间必须父子关系，下面给大家提供一个简单的方法，实现组件间的传值，不仅仅是父子组件，跨模块的组件也可以实现传值 /***1.定义一个服务，作为传递参数的媒介*/ @Injectable() export class PrepService{//定义一个属性，作为组件之间的传递参数，也可以是一个对象或方法 profileInfo: any;}/***2.传递参数的组件，我这边简单演示，直接就在构造器里面实现...
近两年当中使用Angular开发过很多项目，其中也涉及到一些树形结构视图的显示，最近的在项目中封装了大量的组件，一些组件也有树形结构的展示，所以写出来总结一下。相信大家都知道，树结构最典型的例子就是目录结构了吧，一个目录可以包含很多子目录，子目录又可以包含若干个子孙目录，那咱们今天就以目录结构为例来说明一下Angular中树结构的实现。首先，我们希望封装一个组件，用于显示整个目录的树形机构，代码如下： <!DOCTYPE...
Angular动态添加、删除输入框并计算值实例代码 摘要: 在学习群中交流时，有人分享了一个动态添加输入框的方法，我在其基础上进行了一些改进这个功能本身并不复杂，但还是要注意，每个ng-model的对象必须是不同的，这样才能把它们分隔开。 下面是完整代码： JS： angular.module("myApp",[]).controller("inputController",function($scope){$scope.items=[]; //初始化数组，以便为每一个ng-model分配一个对象var i=0;$scope.getRe...
在前台开发过程中，列表批量选择是一个开发人员经常遇到的功能，列表批量选择的实现方式很多，但是原理基本相同，本文主要来讲AngularJs如何简单的实现列表批量选择功能。 首先来看html代码<table cellpadding="0" cellspacing="0" border="0" class="datatable table table-hover dataTable"><thead><tr><th><input type="checkbox" ng-click="selectAll($event)" ng-checked="isSelectedAll()"/></th><th>姓名</th><th>单位</th>...
AngulagJs的页面使用Route跳转 1.除了引用AngularJs.js外，还要引用路由JS, "~/Scripts/angularjs/angular-route.js" 2.通过$routeProvider定义路由，示例 var testModule = angular.module(testModule, [ngRoute]);testModule.config([$routeProvider, function ($routeProvider) {$routeProvider.when(/2, {///2定义的路由路径，以后通过此路径访问，通常定义为短路径templateUrl: "/home/index2",//"/home/index2"是路由实际访问...
先上图：这个主要用到是angular-touch.js中封装好的ng-swipe-left,ng-swipe-right，向左或向右的触摸事件。结合css3的transition实现的动画。ng-class为切换写好的动画的className. <!DOCTYPE HTML> <html ng-app="myapp"><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"><title>Angular2</title...
废话不多说了，具体代码如下所示： <!DOCTYPE html> <html ng-app="angularFormCheckModule"><head><meta charset="UTF-8"><title>angular表单校验</title><link rel="stylesheet" href="../css/bootstrap.min.css" rel="external nofollow" /><style>span{color: red;}</style></head><body ng-controller="angularFormCheckCtrl"><!--使用angular校验，每一个校验的项都必须用ng-model，不然无法执行在脏检查，就无法校验--><for...
在工作中，使用AngularJs进行开发，在项目中，经常会遇到上传图片后，需在一旁预览图片内容，之前查了一些资料，结合实践，得出一种比较实用的方法，相对简化版，在这里记录一下，如有不同看法，欢迎一起沟通，一起成长。 demo.html: <!doctype html> <html ng-app="myTestCtrl"> <head> <meta charset="UTF-8"> <title>demo</title> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <scri...
先上效果页面：其中几个知识点 1、angularJs提供了几个新的type类型： type="password"type="email"type="number"type="url" 2、几个参数含义 ng-required //是否必填，true/false ng-minlength //最小长度，数字 ng-maxlength //最大长度，数字 min //最小数字，数字，仅在type="number"下 max //最小数字，数字，仅在type="number" 3、几个form控制变量，先来一段代码 <form role="form"...
Angular中的Promise 在用jQuery的时候就知道 promise 是 Js异步编程模式的一种模式，但是不是很明白他跟JQuery的deferred对象有什么区别。随着公司项目的进行，要跟后台接数据了，所以决定搞定它。 Promise Promise是一种模式，以同步操作的流程形式来操作异步事件，避免了层层嵌套，可以链式操作异步事件。 我们知道，在编写JavaScript异步代码时，callback是最最简单的机制，可是用这种机制的话必须牺牲控制流、异常处理和函数语...
常用的表单验证指令如下详情： 1. 必填项验证 某个表单输入是否已填写，只要在输入字段元素上添加HTML5标记required即可： <input type="text" required />2. 最小长度 验证表单输入的文本长度是否大于某个最小值，在输入字段上使用指令ng-minleng= "{number}"： <input type="text" ng-minlength="5" />3. 最大长度 验证表单输入的文本长度是否小于或等于某个最大值，在输入字段上使用指令ng-maxlength="{number}"： <input type=...
AngularJS extend用法 angular.extend:依次将第二个参数及后续的参数的第一层属性（不管是简单属性还是对象）拷贝赋给第一个参数的第一层属性，即如果是对象，则是引用的是同一个对象，并返回第一个参数对象。 实例一：var r = angular.extend(b, a);将对象a的第一层属性（不管是简单属性还是对象）拷贝赋给对象b的第一层属性，即如果是对象，则是引用的是同一个对象，并返回对象bJs代码 var a = { name : bijian, addr...
我现在做的一个项目是angular,但是我用直接引用百度地图的方法引进js,写html,js代码，发现，我去，报错了，我一开始还以为是百度地图跟angular有冲突，然后我就去搜索啊，发现angular也有一个百度地图插件，无奈我用了报错了，网上说要用angular2版本才能兼容，但是我又不会下载2版本，所以我就放弃了，然后呢，我又去解决我一开始的那个错误了，首先来说一下百度地图怎么用吧，很简单，上代码 首先引入js <script type="text/java...
AngularJS框架可以用Service和Directive降低开发复杂性。这个特性非常适合用于分离代码，创建可测试组件，然后将它们变成可重用组件。 Directive是一组独立的JavaScript、HTML和CSS，它们封装了一个特定的行为，它将成为将来创建的Web组件的组成部分，我们可以在各种应用中重用这些组件。在创建之后，我们可以直接通过一个HTML标签、自定义属性或CSS类、甚至可以是HTML注释，来执行一个Directive。 这一篇教程将介绍如何创建一个‘...
factory用 Factory 就是创建一个对象，为它添加属性，然后把这个对象返回出来。你把 service 传进 controller 之后，在 controller 里这个对象里的属性就可以通过 factory 使用了。 app.controller(myFactoryCtrl, function($scope, myFactory){$scope.artist = myFactory.getArtis(); }); app.factory(myFactory, function(){var _artist = ;var service = {};service.getArtist = function(){return _artist;}return service; })...