angularjs笔记,基本指令,字符串反转,过滤器
1. Angular指令
* Angular为HTML页面扩展的: 自定义标签属性或标签
* 与Angular的作用域对象(scope)交互,扩展页面的动态表现力
2. 常用指令(一)
* ng-app: 指定模块名，angular管理的区域
* ng-model： 双向绑定，输入相关标签
* ng-init： 初始化数据
* ng-click： 调用作用域对象的方法（点击时）
* ng-controller: 指定控制器构造函数名，内部会自动创建一个新的子作用域（外部的）
* ng-bind： 解决使用{{}}显示数据闪屏（在很短时间内显示{{}}）
* ng-repeat： 遍历数组显示数据， 数组有几个元素就会产生几个新的作用域
* $index, $first, $last, $middle, $odd, $even
* ng-show: 布尔类型， 如果为true才显示
* ng-hide: 布尔类型， 如果为true就隐藏
4. 使用Angular表达式:
* 语法: {{expression}}
* 作用: 显示表达式的结果数据
* 注意: 表达式中引用的变量必须是当前域对象有的属性(包括其原型属性)
5. 操作的数据
* 基本类型数据: number/string/boolean
* undefined, Infinity, NaN, null解析为空串: "", 不显示任何效果
* 对象的属性或方法
* 数组
6. 常用指令(二)
* ng-class: 动态引用定义的样式 {aClass:true, bClass:false}
* ng-style: 动态引用通过js指定的样式对象 {color:'red', background:'blue'}
* ng-click: 点击监听, 值为函数调用, 可以传$event
* ng-mouseenter: 鼠标移入监听, 值为函数调用, 可以传$event
* ng-mouseleave: 鼠标移出监听, 值为函数调用, 可以传$event
7. 作用域对象 :
* 一个js实例对象, ng-app指令默认会创建一个根作用域对象($rootScope)
* 它的属性和方法与页面中的指令或表达式是关联的
8. 控制器:
* 用来控制AngularJS应用数据的 实例对象
* ng-controller : 指定控制器构造函数, Angular会自动new此函数创建控制器对象
* 同时Angular还有创建一个新的域对象$scope, 它是$rootScope的子对象
* 在控制器函数中声明$scope形参, Angular会自动将$scope传入
9.angular.js引入:
<script type="text/javascript" src="../../js/angular-1.2.29/angular.js"></script>
<script type="text/javascript">
10.字符串反转
<p>{{'abc'.split('').reverse().join('')}}</p>
输出cba
11.作用域
<body ng-app="myApp" >
<div ng-controller="myCtrl">
</div>
</body>
angular.module('myApp',[])
.controller('myCtrl',['$scope',function(a){
}])
学习笔记:
1.入门
1.1 AngularJS是什么?
* Google开源的 前端JS 结构化 框架
* 动态展示页面数据, 并与用户进行交互
* AngularJS特性(优点)
* 双向数据绑定
* 声明式依赖注入
* 解耦应用逻辑, 数据模型和视图
* 完善的页面指令
* 定制表单验证
* Ajax封装
1.2 HelloWorld
* 导入angular.js, 并在页面中引入
* 在<html><body>中ng-app指令
* 定义ng-model='xxx'/{{xxx}}
2.四个重要感念
2.1. **双向数据绑定**
* View（视图）： 页面（标签、指令，表达式）
* Model(模型) ：作用域对象（属性、方法）
* 数据绑定： 数据从一个位置自动流向另一个位置
* View-->Model
* Model-->View
* 单向数据绑定： 只支持一个方向
* View-->Model ： ng-init
* Model-->View : {{name}}
* 双向数据绑定
* Model<-->View : ng-model
* angular是支持双向数据绑定的
2.2. **依赖注入**
* 依赖的对象被别人(调用者)自动注入进入
* 注入的方式;
* 内部自建：不动态
* 全局变量：污染全局环境
* 形参：这种最好
* angualr就是通过声明式依赖注入， 来得到作用域对象
* 形参名不能随便定义（只是针对当前这种写法）
2.3. ** MVC模式**
* **M: Model, 即模型**, 在angular中:
* 为scope
* 储存数据的容器
* 提供操作数据的方法
* **V: View, 即视图**, 在angular中:
* 为页面
* 包括: html/css/directive/expression
* 显示Model的数据
* 将数据同步到Model
* 与用户交互
* **C: Controller, 即控制器**, 在angular中:
* 为angular的Controller
* 初始化Model数据
* 为Model添加行为方法
2.4. **MVVM模式**
* M: Model, 即数据模型, 在angular中:
* 为scope中的各个数据对象
* V: View, 即视图, 在angular中:
* 为页面
* VM: ViewModel, 即视图模型, 在angular中:
* 为scope对象
* 在angular中controller不再是架构的核心，在MVVM中只是起辅助作用，用来辅助$scope对象，即VM层
3.四个重要对象
3.1. **作用域**
* 是一个js实例对象
* 这个对象的属性、方法， 页面都可以直接引用、操作
* ng-app指令： 内部创建一个根作用域（$rootScope）, 是所有其它作用域的父对象
3.2. **控制器**
* 也是一个对象，是我们View与Model之间的桥梁
* 当我们使用了ng-controller指令， 内部就会创建控制器对象
* 但我们同时得提供控制器的构造函数（必须定义一个$scope的形参）
* 每定义一个ng-controller指令， 内部就会创建一个新的作用域对象（$scope）, 并自动注入构造函数中,在函数内部可以直接使用$scope对象。
3.3. **模块**
* 也是一个对象
* 创建模块对象： angular.module('模块名', [依赖的模块])
* 通过模块添加控制器：
* module.controller('MyController', function($scope){//操作$scope的语句})
* angular的整体设计也是多模块的
* 核心模块： angular.js
* 扩展模块： angular-router.js, angular-message.js, angular-animate.js
4.三个页面语法
4.1. **表达式**
* {{js表达式}}
* 从作用域对象中读取对应的属性数据来显示数据
* 不支持if/for/while
* 支持三目表达式
4.2. **指令**
* 什么指令 ： 自定义标签属性/标签
* 常用的指令：
* ng-app: 指定模块名，angular管理的区域
* ng-model： 双向绑定，输入相关标签
* ng-init： 初始化数据
* ng-click： 调用作用域对象的方法（点击时）
可以传$event
* ng-controller: 指定控制器构造函数名，内部会自动创建一个新的子作用域（外部的）
* ng-bind： 解决使用{{}}显示数据闪屏（在很短时间内显示{{}}）
* ng-repeat： 遍历数组显示数据， 数组有几个元素就会产生几个新的作用域
* $index, $first, $last, $middle, $odd, $even
* ng-show: 布尔类型， 如果为true才显示
* ng-hide: 布尔类型， 如果为true就隐藏
* ng-class: 动态引用定义的样式 {aClass:true, bClass:false}
* ng-style: 动态引用通过js指定的样式对象 {color:'red', background:'blue'}
* ng-mouseenter: 鼠标移入监听, 值为函数调用, 可以传$event
* ng-mouseleave: 鼠标移出监听, 值为函数调用, 可以传$event
4.3. **过滤器**
* 作用: 在显示数据时可以对数据进行格式化或过滤
* 单个--->格式化（将别的类型的数据转换为特定格式的字符串）
* 多个----》格式化/过滤
* 不会真正改变被操作数据
* {{express | 过滤器名：补充说明}}
* 常用过滤器：
* currency 货币格式化(文本)
* number数值格式化(文本)
* date 将日期对象格式化(文本)
* json: 将js对象格式化为json(文本)
* lowercase : 将字符串格式化为全小写(文本)
* uppercase : 将字符串格式化全大写(文本)
* limitTo 从一个数组或字符串中过滤出一个新的数组或字符串
* limitTo : 3 limitTo : -3
* orderBy : 根据指定作用域属性对数组进行排序
* {{[2,1,4,3] | orderBy}} 升序
* {{[2,1,4,3] | orderBy：‘-’}} 降序
* {{[{id:2,price:3}, {id:1, price:4}] | orderBy:'id'} id升序
* {{[{id:2,price:3}, {id:1, price:4}] | orderBy:'-price'} price降序
* filter : 从数组中过滤返回一个新数组
* {{[{id:22,price:35}, {id:23, price:45}] | filter:{id:'3'}} //根据id过滤
* {{[{id:22,price:35}, {id:23, price:45}] | filter:{$:'3'}} //根据所有字段过滤
====================================================================
初始页面
去掉括号中的test依赖,因为test暂时在里面没有定义;
======================================================================
======================================================================
数组遍历
======================================================================
======================================================================
======================================================================
鼠标移入移出变色
======================================================================
隔行变色
通过奇偶判断
=========================================================================
计算字符剩余数量
============================================================================================
$scope.todos.push())是数据加后面
第一种做法 找选中的数据:
第二种做法 找未选中的数据:
============================================================================================
数据存储
sessionStorage
==============================================================
过滤器
1.钱
currency 外国人用的默认美元符;
===========================================================================
时间过滤器
------------------------------------------------------
自定义过滤器
---------------------------------------------------------------------------------------------------
传任何参数
=================================================================
监视器
$scope.$watch("num",function(){
})
---------------------------------------------------------------------------------------------------
深度监视
==========================================================
与后台交互
$Http.get();
$Http.post();
$Http.jsonp();
=====================================================================
强制更新数据$scope.$apply();
===================================================================
时间轮询
==================================================================================
自定义指令函数标签
<abc></abc> 等同于页面显示 <span>abc</span>
---------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------
嵌入指令
模板x 可以写{{ 2*10}}等变量值
--------------------------------------------------------------------
用指令做显示更多
===========================================================
输入框显示下拉数据
------------------------------------------------------------------------------------------------
以上做成组件重用
定义模块
========================================================
自定义依赖注入
长量与变量
-----------------------------------------
装饰
===============================================
消息机制
触发器
==========================================================
路由
router
----------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------
引入模块
单独创建js模块
----------------------------------------------------------------------------------
如果获取的数据有延迟,就需要数据延时加载,比如数据出来很慢,就需要用resolve
----------------------------------------------------------------------------------
带参数
-----------------------------------------------------------------------------------
angularjs笔记,基本指令,字符串反转,过滤器相关推荐
- day1学习vue2笔记 vue指令
系列文章目录 day1学习vue2笔记 vue指令 day2 学习vue2 笔记 过滤器 侦听器 计算属性 axios day3 vue2 学习笔记 vue组件 day4 vue 学习笔记 组件 生命 ...
- AngularJS中自定义指令
AngularJS中除了内置指令,还可以自定义指令.自定义指令和自定义过滤器一样,有两种方法: 第一种,在module中配置:$compileProvider.directive('directive ...
- AngularJS中的指令全面解析(必看)
出处: http://www.jb51.net/article/84665.htm 说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的 ...
- 带你走近AngularJS - 创建自定义指令
带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...
- 字符串反转python_python字符串反转的四种方法详解
这篇文章主要介绍了python字符串反转的四种详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.用reduce函数方法 book = 'Pyt ...
- java案例——字符串反转
java案例--字符串反转 1.需求: 定义一个方法,实现字符串反转.键盘录入一个字符串,调用该方法后,在控制台输出结果 例如,键盘录入abc,输出结果cba 2.思路: 1.键盘录入一个字符串,用S ...
- 字符串-字符串反转（双指针）
题意: 编写一个函数,其作用是将输入的字符串反转过来.输入字符串以字符数组 char[] 的形式给出. 不要给另外的数组分配额外的空间,你必须原地修改输入数组.使用 O(1) 的额外空间解决这一问题. ...
- 编写字符串反转函数 - 小小外星人的技术博客 - 博客频道 - CSDN.NET
编写字符串反转函数 - 小小外星人的技术博客 - 博客频道 - CSDN.NET 编写字符串反转函数 分类: 笔试面试题 2010-11-07 20:47 863人阅读 评论(0) 收藏 举报 首先用 ...
- java中什么是反转_Java中如何将字符串反转
目录 一.Java中如何将字符串反转 1.利用 StringBuffer 或 StringBuilder 的 reverse() 成员方法 代码演示: 运行结果: 2.利用 String 的 toCh ...
最新文章
- 3D视觉创新应用（三维重建）竞赛作品系列——多楼层室内环境下的三维几何重建
- UVA 617 - Nonstop Travel（数论+暴力枚举）
- Centos下Linux下解决root用户Operation not permitted
- 程序运行依赖的重要文件版本不对_Deno核心模块：灵活依赖amp;安全沙箱
- scanf的拓展用法——匹配特定字符
- MATLAB数据分析
- dns-prefetch—DNS预解析技术
- scala 连接oracle_一分钟教你学会用java连接Oracle数据库
- java中错误的源文件,关于Java源文件结构规则，说法错误的是（)A．版权信息必须在java文件的开头B．package语句在imports...
- JDBC连接池和DBUtils
- java List 常见坑
- #地形剖面图_七年级上册微课 | 地图：地形剖面图与分层设色地形图
- 【已解决】双系统 ubuntu wifi 图标消失，无法连接无线网，查询无线网卡型号安装驱动（含网络备用方案）
- 一款漂亮的Bootstrap模板INSPINIA_adminV2.5 ---- 20161102
- max232cpe管脚电压
- linux虚拟网桥 docker,Docker 使用自定义网桥
- 大卫·希尔伯特：数学界的无冕之王
- 新手怎么租用传奇服务器
- 三大战略分析方法——SWOT、PEST、波特五力模型
- 组合数学 | 排列与组合