前言 相信大家都知道，在默认情况下，Angular应用程序在首次加载根组件时，会在浏览器的显示一个loading... 我们可以轻松地将loading修改成我们自己定义的动画。下面话不多说，来一起看看详细的介绍：这是我们要实现首次加载的效果:根组件标签中的内容 请注意：在你的入口文件index.html中，默认的loading...只是插入到根组件标签之间： <!doctype html> <html> <head><meta charset="utf-8"><title>Fancy Loading Screen</title><...
AngularJS 自定义指令 transclude：当元素标签需要嵌套时使用，与ng-transclude配合使用。默认值为false不能使用嵌套，true为可以使用嵌套。在哪个标签上使用ng-transclude就在哪个标签内进行嵌套。 代码示例：（将hello、hi标签进行替换同时span标签嵌套div内）<script type="text/javascript">var m = angular.module(myApp,[]);m.directive(hello,function(){return{restrict:E,replace:true,transclude:true,template:<div>hel...
angular 当需要form表单需要验证时，angular自带了许多校验器，但是很多时候自带的无法满足业务需求，这时候就需要自定义的校验器 定义一个validator 定义validator 需要实现 ValidatorFn 接口 源码： export interface ValidatorFn {(c: AbstractControl): ValidationErrors | null; }接收一个 AbstractControl 返回 ValidationErrors 或者null ValidationErrors 源码 export declare type ValidationErrors = {[key: string]: an...
2017年7月4日，我原本可以像其他同时一样早点回家，玩几把王者荣耀，但是我没有，因为我选择留下来，写一篇博客。 项目中经常性的会遇到什么点击“全选”按钮，勾中所有“单选按钮”，当所有单选按钮勾选后，全选按钮自动勾选，这里我并不是想说这是多么难的一个事情，我只是想炫耀下自己写的东西。 （勾选与否，是切换类名来实现的）换一个背景图片而已 1）页面内容（静态页） <ul class=list-inline my-list-inline><li class="a...
自定义属性的四种类别 分为： 元素E，属性A，注释M，类C , 分别如下：<my-dir></my-dir><span my-dir="exp"></span><!-- directive: my-dir exp --><span class="my-dir: exp;"></span>简单创建一个指令 html结构： <div ng-controller="myCtrl"><div my-customer></div> </div>JavaScript结构： angular.module(myApp, []).controller(myCtrl, [$scope, function($scope) {$scope.customer = {name: Naomi,address: 1600 Amphithe...
本文实例讲述了AngularJS实现自定义指令与控制器数据交互的方法。分享给大家供大家参考，具体如下： <!doctype html> <html><head><meta charset="utf-8"><title>AngularJS自定义指令与控制器数据交互</title> <!-- <script src="http://cdn.bootcss.com/angular.js/1.3.15/angular.js"></script>--><script src="../../lib/angular/angular.js"></script><script>angular.module(yyApp, []).controller(yyHelloController, fun...
1. <ng-template>元素 import { Component, TemplateRef, ViewContainerRef, ViewChild,AfterViewInit } from @angular/core; @Component({selector: app-code404,template: `<!-- 这里使用一个模板变量，在组件中使用@ViewChild装饰器获取模板元素--><ng-template #tpl>Big Keriy !</ng-template>`, }) export class Code404Component implements AfterViewInit{// @ViewChild 装饰器获取模板元素@ViewChild(tpl)tplRef: Template...
目前在做一个java web页面，没有使用到框架的分页，所以需要自己实现分页，就想到了用angularjs来实现分页，数据通过ajax从后台获取。 插件 百度了一下，看到一个比较漂亮的插件，就直接用该插件，并修改了部分细节，使得适合我的项目，该插件地址是：（https://github.com/miaoyaoyao/AngularJs-UI）效果图使用方法 1、在网页的头部引入angularjs、bootstarp以及该插件，该分页插件主要是ng-pagination.css以及ng-pagination.js<l...
前言 除了 AngularJS 内置的指令外，我们还可以创建自定义指令。 通过 .directive() 函数来添加自定义的指令。 调用自定义指令时，需要在HTMl 元素上添加自定义指令名。 自定义指令命名规则：使用驼峰命名法来命名，即除第一个单词外的首字母需大写。如： myDirective。 在html页面调用该指令时需要以 - 分割，如： my-directive。示例代码： <body ng-app="myApp"><my-directive></my-directive><script>var app = angular.module...
1. 写在前面 关于如何获取input框、textarea等的焦点，网上有许多文章都只是会跟你说ng-focus这个内置指令。像这种解答，只能说明作者并为真正理解人家的需求。ng-focus是一个事件，跟原生JS（JavaScript）的onfocus是一样的，当我们点击input框时，就会触发该事件，而在该事件里我们可以调用一个函数。所以，当人家问你如何获取焦点时一般的意思是，如果我进行了某些操作后，不用鼠标点击是如何自动获取焦点，问题的关键是“自动”...
本文实例讲述了AngularJS基于factory创建自定义服务的方法。分享给大家供大家参考，具体如下： 为什么要创建自定义服务？ 很简单，不想让控制器显得过于“臃肿”，而且服务可复用。针对性强，每个服务对应不同的功能。 这里介绍如何使用factory创建自定义服务，并且使用他。 例子1： <!--HTML--> <div ng-controller="showTheName"><h1 ng-bind="name"></h1> </div> /*js*/ var app = angular.module("routingDemoApp",[]); app.f...
今天学习angularjs自定义指令Directive。Directive是一个非常棒的功能。可以实现我们自义的的功能方法。 下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Admin"。 在网页上放一个文本框和一个铵钮：<form id="form1" name="form1" ng-app="app" ng-controller="ctrl" novalidate><input id="Text1" type="text" ng-model="Account" is-Administrator/><br /><input id="ButtonVerify" type="button" value="Verify" ng...
本文实例讲述了AngularJS自定义指令之复制指令实现方法。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="bootstrap.min.css" rel="external nofollow" ><script src="jquery.min.js"></script><script src="angular.js"></script><script src="bootstrap.min.js"></script><script type="text/javascript">v...
本文实例讲述了AngularJS自定义指令实现面包屑功能。分享给大家供大家参考，具体如下： <!DOCTYPE html> <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 re...
本文主要给大家介绍了Angular.Js过滤器filter与自定义过滤器filter的相关内容，分享出来供大家参考学习，下面来看看详细的介绍： 一、AngularJS的filter过滤器：uppercase|lowercase:大小写转换过滤json:json格式过滤date:日期格式过滤number:数字格式过滤currency:货币格式过滤filter:查找limitTo：字符串对象截取orderBy:对象排序<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>Angular基础</titl...