AngularJS初步
AngularJS特点
- 遵循AMD规范
- 不需要操作节点
- 对于jquery,一般是利用现有完整的DOM,然后在这戏Dom的基础上进行二次调教了;而对于AngularJS等框架则是根据数据模型以及其对应用dom模板,而后通过模板类似于搭积木那样组合页面。
- 不适合频繁dom操作的应用。
{{}} Angular的表达式
借鉴mvc理念;仅仅只是借鉴,区别在于控制C,Angular弱化了控制器
- mvvm
- vm:viewModel,$scope 是一个对象
- 官方解释 mvw
- w:whatever,$scope 是什么都无所谓,都可以
- mvvm
<html ng-app>
最早是由backbone提出该理念,但封装不够彻底
ng-model 双向绑定,只有能在页面下可操作的标签才能双向保定 ##原理
$watch
- 监听列表
- 页面上所有绑定到页面上的{{}}、ng-model等都会加入监听列表,根据数据变化,来改变页面显示。
- <pre> scope.age=20; $scope.$watch('age',function(newValue,oldValue){ console.info(‘监听age’); });</pre>
$digest
- 循环监听列表,当发现监听值发生变化,调用相应回调函数,进行dom操作
- 需要在anguler上下文环境中才能启动
- 每次循环到有值的改变,会重新循环,所以为了保证效率,尽量不要让数据相互影响。相互影响超过10次angular会报错。
$apply
- 把环境改变为angular的上下文环境
- <pre> $scope.$apply(function(){ (angular上下文环境) }); </pre>
mvc
- model(模型) view(视图) controller(控制器)
- model相当于数据,view呈现model里的数据,controller是连接model和iew之间的传输
$scope
- 是一个对象
- 可以嵌套
- 顶层$rootScrope,就近原则查找属性,最终查到$rootScrope,没有不会报错
- function($scope){};依赖注入,被动获取
$index
获取选中节点序号
过滤器
过滤器(filter)正如其名,接受一个输入,通过某种规则处理后,返回处理后的结果。
- currency
- date
- filter
- json
- limitTo
- lowercase
- uppercase
- number
- orderBy
directive
测试指令,在css里面写一个.red;在html中调用ng-class="{red:true}";
- ng-class
- ng-style
- ng-show
- ng-hide ##事件## 给$scope对象添加一个属性,属性为一个函数,在html中ng-click="调用该函数"。 *ng-click
AJAX $http
$http.get("/users/router?username="+$scope.username").success(function(){});$http.post("/users/router",{name:xiaoming,pwd:123456}).success(function(){});
AngularJS初步的更多相关文章
- AngularJs初步学习笔记(part1)
一.摘要: angular是采用JavaScript编写的前端mvc框架,帮助开发者编写现代化的单页面应用.它尤其适用编写有大量CRUD操作的,具有Ajax风格的客户端应用. 二.总结: Angula ...
- 【原创教程】鲸吞HTML
首先,我们的angularJS课程分为三大模块: HTML/CSS/JS基础. angularJS详解. angualrJS的一些实用框架讲解. 其中,第一大模块的对象是对前端开发技术有点了解但不熟悉 ...
- AngularJS的初步学习(1)
AngularJS 是一个Javascript框架.它可通过 <script> 标签添加到 HTML 页面.AngularJS 通过 指令 扩展了 HTML,且通过 表达式绑定数据到 HT ...
- angularjs e2e测试初步学习(一)
e2e测试是从用户角度出发,认为整个系统都是一个黑盒,只有UI暴露出来. angularjs的测试框架是采用protractor. 1.创建文件 首先创建一个项目文件夹test,然后再创建两个文件,一 ...
- 剖析AngularJS作用域
一.概要 在AngularJS中,子作用域(child scope)基本上都要继承自父作用域(parent scope). 但,事无绝对,也有特例,那就是指令中scope设置项为对象时,即scope: ...
- AngularJS 脏检查深入分析
写在开头 关于Angular脏检查,之前没有仔细学习,只是旁听道说,Angular 会定时的进行周期性数据检查,将前台和后台数据进行比较,所以非常损耗性能. 这是大错而特错的.我甚至在新浪前端面试的时 ...
- 摆脱DOM操作,从TodoMVC看angularJS
取代jQuery? 我很久之前便听说了angularJS的大名,之前的leader也经常感叹angularJS的设计如何如何精妙,可叹一直没有机会深入了解,国庆长假因为没钱出游,倒是可以对他做一个了解 ...
- 提高前端开发效率必备AngularJS (基础)
简介 AngularJS 是一个为动态WEB应用设计的结构框架,提供给大家一种新的开发应用方式,这种方式可以让你扩展HTML的语法,以弥补在构建动态WEB应用时静态文本的不足,从而在web应用程序中使 ...
- 基于AngularJS的企业软件前端架构[转载]
这篇是我参加QCon北京2014的演讲内容: 提纲: 企业应用在软件行业中占有很大的比重,而这类软件多数现在也都采用B/S的模式开发,在这个日新月异的时代,它们的前端开发技术找到了什么改进点呢? B/ ...
随机推荐
- Sass变量、嵌套
声明变量定义变量的语法Sass 的变量包括三个部分: 声明变量的符号“$” 变量名称 赋予变量的值简单的示例,假设你的按钮颜色可以给其声明几个变量: $brand-primary : darken(# ...
- 【回顾整理】暴走的SQL语句练习!!!
设计一个学生成绩数据库,该库包含学生,老师,课程和成绩等信息并完成后面的练习.学生:学号(SNO).姓名(SNAME).性别(SSEX).生日(SBIRTHDAY ).所属班级(SCLASS )课程: ...
- php设计模式——单例模式
单例模式概念 单例模式是指整个应用中类只有一个对象实例的设计模式. 单例模式的特点 一个类在整个应用中只有一个实例 类必须自行创建这个实例 必须自行向整个系统提供这个实例 php中使用单例模式的原因 ...
- div+css不间断滚动字幕
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- canvas ---1
Canvas1 (关键词:canvas) canvas :就是html5中提供的一个标签,只是用来展示绘图的内容 canvas 标签的默认宽高:300*150 如果给canvas来设置高度和宽度 ...
- MySQL简单查询
1.普通查询 select * from info; #查询所有内容 select Code,Name from Info #查询某几列 2.条件查询 select * from Info where ...
- [Flask Security]当不能通过认证的时候制定跳转
Flask Security这个插件能对用户权限进行很好的控制. 通过三个model实现: User,存放用户数据 Role,存放角色数据 User_Role.存放用户角色信息 user_datast ...
- BIOS讲解
首先 BIOS其实没什么神奇的 就是 Bisic input/output System,所以基本输入输出系统是一块装入了启动和自检程序的EPROM或EEPROM集成块,实际上它是被固化在计算机R ...
- CryEngine3教程合辑
转载自http://tieba.baidu.com/p/3663800102 作者:Tytaa 中文名称: CryEngine游戏关卡设计训练视频教程第一季 外文名称: 3DMotive In ...
- 红外 IR 协议原理分析
1.概述:对多种红外遥控器的信号进行分析,其发出的红外指令中,引导码各不相同,而且后面的控制指令也有较大差别,甚至指令码的位数也不相同,原因是这些红外设计没有遵守相同的红外标准.但是其基本思想是相同的 ...