背景来源于前段时间的一场面试，面试官看着我Angular控制器中添加各种功能重复的方法，脸都发绿了，不过还是耐心地跟我指出提高Angular代码复用性需要Service、Provider和Factory三种复用性很高的方法，遂习之，以下是我的学习成果： 先说说Factory: 通过注册.factory(my注册名,方法())，返回一个对象，你就能在控制器中引入这个方法并访问这个对象： 例子： <!-- factory模式 --><div ng-controller="theFactoryCtrl"><h3>Factory...
在项目中，前端传给后台的参数有： pageSize：每页的条数 pageNo：当前页码 比如当前是第1页，每页20条，则后台返回第1页的20条记录（sql应该是用limit去获取分页数据） 同时，后台接口还会返回列表的总条数totalNum，前端根据totaNum/pageSize计算总共有多少页 如图：注意事项： 需要先配置好路由（Angular2路由与导航） 使用步骤： （1）在项目中引入分页组件 // app.module.tsimport { BrowserModule } from @angular/platfo...
前言 1、3种创建自定义服务的方式。 FactoryServiceProvider2、大家应该知道，AngularJS是后台人员在工作之余发明的，他主要应用了后台早就存在的分层思想。所以我们得了解下分层的作用，如果你是前端人员不了解什么是分层，那么你最好问问你后台的小伙伴。 dao层：就是Model层，在后台时，这一层的作用，就要是写与数据库交互数据的一层，在angularJS里就主要是写ajax的。 service层：主查写逻辑代码的，但在angularJS里也可以持久...
整理文档，搜刮出一个Angular 2实现自定义 双向绑定 属性的代码，稍微整理精简一下做下分享。 import { Component, OnInit, Output, Input, EventEmitter } from @angular/core;@Component({selector: twoway,template: `<input [(ngModel)]="username"><p>Hello {{username}}!</p>` }) export class TwoWayComponent implements OnInit {constructor() { }usernameValue: string;@Output() usernameChange = new EventEmitter();@...
本文实例讲述了Angular1.x自定义指令。分享给大家供大家参考，具体如下： 调用Module.directive方法，传入指令名称和工厂函数，返回一个对象。 指令名称中每个大写字母会被认为是属性名中的一个独立的词，而每个词之间是以一个连字符分隔的。 var myApp = angular.module(myApp, []).directive("unorderedList", function () {return function(scope, element, attrs) {};});返回链式函数 <!DOCTYPE html> <html lang="en"> <head>...
本文给大家分享angular.js学习笔记之自定义指令实例代码讲解，具体代码如下所示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AngularDirective</title> <script src="http://cdn.bootcss.com/angular.js/1.4.6/angular.js"></script> </head> <body ng-app="angularJS" > <!-- <div class="self-direct">{{title}}<input type="text" ng-model=title></div> --> <!-- <input type="text" ng-model="...
此插件使用angular.js、JQuery实现。（jQuery的引入需在angular 之前）用户可以 在输入框输入数据后验证 必填项、整数型、浮点型验证。如果在form 里面的输入框验证，可以点击 提交按钮后，实现 必填项验证。 效果图如下：(1)验证未通过时，背景标红等样式为 input.ng-invalid, select.ng-invalid {background-color: #ee82ee !important;border: 1px solid #CCC;}.qtip {position: absolute;max-width: 260px;display: none;m...
在使用AngularJs的过程中，我们常常会用到一些ng-事件，如ng-click、ng-change等，这些事件都是AngularJs事先为我们定义好的。也有的情况下，我们会用到一些使用频率不高的dom事件，如img的onload（图片加载完成后触发），但AngularJs中默认没有这个事件，那么我们该如何自定义添加ng-load这个事件呢？ 只需要给app对象添加如下指令即可： myApp.directive(imageonload, function () {return {restrict: A, link: function (scope,...
Angularjs自定义指令实现三级联动效果，先上图代码<html lang="zh-CN" ng-app="myApp"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><script src="jquery.min.js"></script><script src="angular.js"></script><script src="bootstrap.min.js"></script><link rel="stylesheet" href="bootstrap.min.css" rel="extern...
由于angular2兴起不久，相关插件还是很少，所以有时候不得不用一些jquery插件来完成项目， 那么如何把jquery插件放到angular2中呢？采用自定义指令！ 在上下文之前要引入jquery，这点不再描述 首先创建一个指令，采用@input方式，来获取jquery插件所需要的参数。 在ngOnChanges时，也就是参数通过@input传入时，初始化jquery插件， 初始化jquery插件需要获取dom元素，所以我们引入ElementRef，用来获取dom元素 这里需要讲一下，jqu...
具体代码如下所示： <!DOCTYPE html> <html> <body> <header><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="angular.min.js"></script><script src="filter.js"></script> </header> <div ng-app="myApp"><div ng-controller="firstController">{{name | rHello}}<br>{{name | rHello:3:5}} // 三个参数分别是‘input 、n1、n2<br>{{name | rJs}}</div> </div> <script type="text/javascri...
我们会在本文中探索 Angular 2 内建的自定义验证。 # 介绍 Angular 2 原生就支持一些有用的验证器： required: 验证字段必须存在minlength: 验证字段值的最小长度有效maxlength: 验证字段值的最大长度有效pattern: 验证输入的值是否匹配给定的模板，比如 email我们会基于下面的接口创建一个表单来获取用户信息。 // user.interface.ts export interface User {username: string; // required, must be 5-8 charactersemail: string...
今天用angular写table的时候，遇到了一个问题。在ng-repeat中，含有动态的html，而这些html中含有自定义指令。 因为希望实现一个能够复用的table，所以定义了一个指令myStandTable，指令代码大概如下： var myCommon = angular.module("myCommon",[]); myCommon.directive("myStandTable", function () {return {restrict: "A",templateUrl: "app/template/tableTem.html",transclude: false,replace: true,controller: function (...
就我对directive的粗浅理解，它一般用于独立Dom元素的封装，应用场合为控件重用和逻辑模块分离。后者我暂时没接触，但数据交互部分却是一样的。所以举几个前者的例子，以备以后忘记。 directive本身的作用域$scope可以选择是否封闭，不封闭则和其controller共用一个作用域$scope。例子如下： <body ng-app="myApp" ng-controller="myCtrl"> <test-directive></test-directive> <script>angular.module("myApp",[]).controller("myC...
本文实例讲述了AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法。分享给大家供大家参考，具体如下： 接着前面那篇《AngularJS使用ng-app自动加载bootstrap框架问题分析》，现在我们看下如何使用带属性值的ng-app命令，让ng-app自动加载我们自定义的模块作为根模块。 <!DOCTYPE html> <html><head><script src="angular.js"></script><script>var rootMoudle = angular.module(rootMoudle, []);rootMoudle.controll...