秒味课堂Angular js笔记------指令

1.属性指令 angularjs样式相关指令: ng-class ng-style ng-href ng-src ng-attr-(suffix) ng-bind ng-cloak 没解析完之前标签是隐藏的,解析完后标签是显示的,控制css的指令 ng-bind-template 支持多表达式'{{text}},{{text}}' ng-bind-html 解析字符串中的标签,需要依赖angular-sanitize.min.js ng-non-bindable 不解析表达式,就原样输出…

秒味课堂Angular js笔记------Angular js中的工具方法

Angular js中的工具方法 angular.isArray angular.isDate angular.isDefined angular.isUndefined angular.isFunction angular.isNumber angular.isObject angular.isString angular.isElement angular.version angular.equals(a,b) //只要是相同的元素返回true,不同返回假 angular.forE…

秒味课堂Angular js笔记------过滤器

不同过滤器的小demo. currency number uppercase json limitTo date orderBy filter <script> var filterMy = angular.module("fliterMy",[]); filterMy. controller("filter", ["$scope",function($scope) $scope.name = "345343";…

秒味课堂Angular js笔记------$scope.$watch和$scope.$apply

$scope.$watch(watchFn , watchAction , deepWatch) 其中,watchFn是带有angular表达式或函数字符串: watchAction是一个函数或者表达式,当watchFn发生变化时调用,如果是函数,其签名是function(newValue, oldValue, scope): deepWatch如果是ture,则会检查被监控对象的每一个属性是否发生了变化. <script type="application/javascript"…

Angular.js之指令学习笔记

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>ng-showAndng-hide</title><script src="http://cdn.bootcss.com/angular.js/1.4.6/angular.js"></script></head>…

Angular JS笔记

1.引导程序使用ng-app开始引导一个程序:标记了AngularJS应用的作用域 <!doctype html> <html lang="en" ng-app> 双括号绑定表达式: <p>Nothing here {{'yet' + '!'}}</p> 2.视图和模板其核心为MVC模式原理:在AngularJS中,一个视图是模型通过HTML模板渲染之后的映射 HTML模板: 包含ng-controller指令,和ng-repeat…

Angular JS 中指令详解

Angular JS的强大功能就在于其可以自定义很多指令,现在就指令做一下详细的剖析. 一个Angular js 指令(directive)需要指定一个唯一的名字(myDirective)和一个函数,其中返回一个对象,该对象包含该指令应有的一些行为,具体参见如下所有的属性. angular.module('myApp', []) .directive('myDirective', function() { return { restrict: String, priority: Number,…

Angular JS - 7 - Angular JS 常用指令2

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <!-- 常用指令(二) * ng-class: 动态引用定义的样式 {aClass:true, bClass:false} * ng-style: 动态引用通过js指定的样式对象 {color:'red'…

Angular JS - 6 - Angular JS 常用指令

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <!-- 1. Angular指令 * Angular为HTML页面扩展的: 自定义标签属性或标签 * 与Angular的作用域对象(scope)交互,扩展页面的动态表现力 2. 常用指令(一) * ng-…

angular js 自定义指令

我们有些时候需要把后台返回过来的带有html标签的字符串binding到界面中一个指定的div或者其他的控制器中. 使用普通ng-bind不会自动解析出html语句. js中这样定义: app.directive('dynamic', function ($compile) { return { restrict: 'A', replace: true, link: function (scope, ele, attrs) { sc…

【妙味课堂】JS热身课后习题

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"…

angular.js中指令compile与link原理剖析

在angularJs应用启动之前,它们是以HTML文本形式存在文本编辑器当中.应用启动会进行编译和链接,作用域会同HTML进行绑定.这个过程包含了两个阶段! 编译阶段在编译的阶段,angularJs会遍历整个的文档并根据JavaScript中指令定义来处理页面上什么的指令.在遍历的过程中,有可能一层套着一层,一直延深处遍历.一但遍历和编译完毕就会返回一个叫做模板函数的函数.在这个函数没被返回(return)之前我们可以对编译后的DOM树进行修改.通常情况下,如果设置了compile函数,说明我…

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&…

Angular.js学习笔记（二）

用A链接对象解析url的组成 var url = 'https://www.baidu.com:8080/aaa/1.html?id=10#name'; var aLink = document.createElement('a'); aLink.href = url; console.log(aLink);//<a href="https://www.baidu.com:8080/aaa/1.html?id=10#name"></a> console.log(…

妙味课堂:JavaScript初级--第11课：字符串、查找高亮显示

1.数字字母 Unicode 编码 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script> var str = '妙味课堂'; // alert( str.length ); //字符串…

Angular JS 学习之简介

1.Angular JS是一个JavaScript框架,它是一个以JavaScript编写的库,它可以通过<script>标签添加到HTML页面: <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 2.Angular JS通过指令扩展了HTML,且通过表达式绑定数据到HTML 3.Angular JS扩展了HTML: (1…

{{angular.js 使用技巧}} - 基于验证框架的扩展（w5cValidator）

开场白: angular.js 是谷歌出的前端js MV*框架,我也是今年做 worktile 的时候才开始接触的,起初技术选型的时候还准备使用 backbone(毕竟很多大公司在使用他,而且也是比较早的提出前端MVC的框架),但是经过我们研究后发现,backbone写个东西太费劲了,在这里我就不细说了,至于前端MVC框架的比较,有很多文章介绍过,至于我们为什么选择angular.js,道理很简单,我们发现他的时候觉得他太棒了,有强大的模板语言,数据双向绑定,路由等等的特性,而且入门很简单(我个…

angular学习笔记01

angular.js路由功能用于实现单页应用 //html 代码 <div ng-view></div> //js代码 angular.module('myM1',['ng','ngRoute']) .config(['$routeProvider',function($routeProvider){ $routeProvider .when('/',{template:'这是首页页面'}) .when('/computers',{template:'这是电脑分类页面'}) .w…

Angular JS 学习笔记(自定义服务：factory，Promise 模式异步请求查询:$http,过滤器用法filter，指令:directive)

刚学没多久,作了一个小项目APP,微信企业号开发与微信服务号的开发,使用的是AngularJS开发,目前项目1.0版本已经完结,但是项目纯粹为了赶工,并没有发挥AngularJS的最大作用,这几天项目到了测试那边,自己正好闲下来了,可以把项目优化一下,目标是做成SPA(单页面应该程序),因为Android版本实在是卡得不行,iPhone上面运行还可以见得了人.不得不优化,SPA做完了,还要做本地化存储.OK,把今天的笔记写下来,回家再完善 ##ListController.js /// <ref…

妙味课堂——HTML+CSS基础笔记

妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - PS工具: - 移动工具 - 矩形选框工具 - 裁切工具 - 吸管工具 - 横排文字工具 - 手抓(快捷键:空格) - 缩放(快捷键:Ctrl + 和 Ctrl -) - 标尺(快捷键:Ctrl R,主要是拖出参考线.矩形区域选择的时候,按住Ctrl,就能贴合参考线) - 自由变换(快捷键 Ctrl…

妙味课堂——JavaScript基础课程笔记

集中时间把秒微课堂JS的基础课程看完,并且认真完成了课后练习.感觉在JS方面的技能算是入了个门了.课后练习的作业完成的代码我都汇总在了这里.至于视频课的学习笔记,则记录如下. 第01课JS入门基础_热身课程写JS的步骤先实现布局想出实现原理了解JS语法希望把某个元素移除的实现 display: none; 显示为无 visibility: hidden; 隐藏 width \ height 透明度 left \ top 拿与背景色相同的div盖住该元素利用margin值 …… 获取元…

[学习笔记] 七步从Angular.JS菜鸟到专家（3）：数据绑定和AJAX [转]

这是＂AngularJS - 七步从菜鸟到专家＂系列的第三篇. 在第一篇,我们展示了如何开始搭建一个AngularaJS应用.第二篇我们讨论了scope和 $scope 的功能. 通过这整个系列的教程,我们会开发一个NPR(美国全国公共广播电台)广播的音频播放器,它能显示Morning Edition节目里现在播出的最新故事,并在我们的浏览器里播放.完成版的Demo可以看这里. 第三部分数据绑定通过把一个文本输入框绑定到person.name属性上,就能把我们的应用变得更有趣一点.这一步建立…

angular学习笔记02 angular指令大全

第一步先要引入angular, 第二步在 html 标签中<html ng-app> 加入ng-app(这是个必须的,不然会报错) 接下来就可以去使用angular的各种指令了. //js文件 js语法需要注意在网上的写法有很多,最好是按标准的写法来写,不然js代码经过压缩就不能使用了(很重要) 压缩代码会出错,不压缩的话还是能运行的,原因是压缩代码会把关键字替换,因此 angular 在定义的时候需要这样. angular.module('antsins.controllers…

angular学习笔记(三十)-指令(10)-require和controller

本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐directive> <inner‐directive></inner‐directive> </outer‐directive> 这里有两个指令,一个outer-directive指令元素,它里面又有一个inner-directive指令元素. js: app.directiv…

angular学习笔记(三十)-指令(7)-compile和link(2)

继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的代码: html: <body> <div ng-controller="compileCtrl"> <level-one> <level-two> <level-three> hello,{{name}} </level-…

angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令

在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指令(5)-link文章也提到了link函数的第五个参数linker. 这篇文章就来讲解一下transclude()方法(linker()方法),是怎么使用的,另外,它也是compile函数的第三个参数,用法一样. 下面就通过自己写一个简易的模拟ngRepeat的指令cbRepeat,来了解linke…

angular学习笔记(三十)-指令(5)-link

这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数:scope,iEle,iAttrs,ctrl,linker scope:指令所在的作用域,这个scope和指令定义的scope是一致的.至于指令的scope,会在讲解scope属性的时候详细解释 iEle:指令元素的jqLite封装.(也就是说iEle可以调用angular封装的简版jq的方法和属…

angular学习笔记(三十)-指令(2)-restrice,replace,template

本篇主要讲解指令中的 restrict属性, replace属性, template属性这三个属性一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: E 2. 属性: A 3. 样式类: C 4. 注释: M restrict的值可以是上面四个字母的任意一个或多个的组合. 不指定的话默认为A. 二. replace: 布尔值.是否将指令元素替换,可以有两个值: 1.true: 替换整个使用指令的元素 2.false: 不替换整个使用指令的元素,而…

学习angular.js的一些笔记想法(上)

1.data-ng-app与ng-app的区别 data-ng-app是为了h5不报错 2.ng-class 不多说就来拿例子说吧 html代码 <div class='color-changer' data-ng-class="{'color-changer-hiden':!colorChanger}"> </div> js代码: $scope.colorChanger=false; 此时的变量colorChanger=false,那么!colorChange…