JavaScript---Angular 和JQuery

Angular  三层模式 M model和data 数据层 , V view 视图层 , C controller  控制器,程序主逻辑 ,通过指令扩展HTML,通过表达式绑定数据到HTML。

View(视图), 即 HTML。

Model(模型), 当前视图中可用的数据,在表达式输出数据。

Controller(控制器), 即 JavaScript 函数,可以添加或修改属性。

Angular 指令:(AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-。 

AngularJS 通过被称为 指令 的新属性来扩展 HTML。

AngularJS 通过内置的指令来为应用添加功能。

AngularJS 允许你自定义指令。

angular 表达式:

数据绑定表达式{{ firstName }} 是通过 ng-model="firstName" 进行同步。

AngularJS 表达式写在双大括号内:{{ expression }}

AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙。

AngularJS 将在表达式书写的位置"输出"数据。

AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字、运算符和变量

实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

AngularJS 应用

AngularJS 模块(Module) 定义了 AngularJS 应用。

AngularJS 控制器(Controller) 用于控制 AngularJS 应用。

ng-app指令定义了应用, ng-controller 定义了控制器。

AngularJS 模块定义应用:

var app = angular.module(‘myApp‘, []);

AngularJS 控制器控制定义的应用程序的:

app.controller(‘myCtrl‘, function($scope) {

$scope.firstName= "John";

});

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。(angular以数据为中心,通过试图和控制器来求数据

Scope 是一个对象,有可用的方法和属性。这些属性和方法可以在视图和控制器中使用。视图中,你不需要添加 $scope 前缀, 只需要添加属性名即可,如: {{carname}}。

当你在 AngularJS 创建控制器时,你可以将 $scope 对象当作一个参数传递。

$rootScopege根作用域 相当于全局变量,可以在各个 controller 中使用。

常用指令

ng-app 指令初始化一个 AngularJS 应用程序,定义了 AngularJS 应用程序的 根元素。

ng-bind  输出数据,相当于{{}};

ng-init 指令初始化应用程序数据。

ng-model 指令把元素值(比如输入域的值)绑定到应用程序。

ng-repeat 指令会重复一个 HTML 元素。

循环数组<p ng-repeat="x in arr">{{x}}</p>

ng-controlle 指令定义了应用程序控制器

事件指令

ng-click=’toggle()’; 点击事件

ng-hide(ng-show)="myVar" 设置 HTML 元素不可见。False可见。

$scope.toggle = function() {

$scope.myVar = !$scope.myVar;  开关a=!a;

};

ng-disabled  直接绑定应用程序数据(例如true或false)到 HTML 的 disabled 属性   true是不可用变灰,false 是可用   eg:

<p>

<button ng-disabled="a">点我!</button>

</p>

<p>

<input type="checkbox" ng-model="a">按钮

体会:ng-model 指令把元素值(比如输入域的值)绑定到应用程序。

</p>

ng-change 表单元素发生改变的事件

过滤器:

{{a|limitTo:2}}  限制数量

{{a|lowercase}} 小写

{{a|currency:‘rmb‘}} 转为货币

HTTP

app.controller(“myapp”,function($scope,$http){

//取数据

$http.get(‘url‘).success(function(str){

$scope.a = str;

});

});

控制器的嵌套继承  子级可以用父级的作用域,但是父级用不了子级,需要发送和接受

Eg:app.controller(‘aaa‘,function($scope){  父级

//$scope.a = 12;

$scope.$on(‘data‘,function(event,data){

$scope.a = data+1;

});

});

app.controller(‘bbb‘,function($scope){ 子级

$scope.c = function(){

$scope.$emit(‘data‘,$scope.a);  向父级发送

$scope.$broadcast(‘data‘,$scope.a); 向子级传送

});

小问题:$setTimeout() 需要包一下

 

 

时间: 2024-07-31 14:23:21

JavaScript---Angular 和JQuery的相关文章

Angular和jQuery的ajax请求的差别

近期项目中使用angular,结果发现后台没法获取參数,所以,略微研究了一下两者在发送ajax时的差别. 注意angular和jquery的ajax请求是不同的. 在jquery中,官方文档解释contentType默认是 application/x-www-form-urlencoded; charset=UTF-8 contentType (default: 'application/x-www-form-urlencoded; charset=UTF-8') Type: String Wh

Angular和jQuery的ajax请求的区别

最近项目中使用angular,结果发现后台没法获取参数,所以,稍微研究了一下两者在发送ajax时的区别. 注意angular和jquery的ajax请求是不同的. 在jquery中,官方文档解释contentType默认是 application/x-www-form-urlencoded; charset=UTF-8 contentType (default: 'application/x-www-form-urlencoded; charset=UTF-8') Type: String Wh

JavaScript强化教程——jQuery选择器

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 -- jQuery选择器 jQuery 选择器 选择器 实例 选取 * $("*") 所有元素 #id $("#lastname") id="lastname" 的元素 .class $(".intro") 所有 class="intro" 的元素 element $("p") 所有 <p&

在JavaScript中重写jQuery对象的方法

jQuery是一个很好的类库,它给我们解决了很多的客户端编程,任何东西都不是万能的,当它不能满足我们的需求时我们需要对它进行重写,同时也不要影响其原有的功能或者修改其原有的功能:我现在的web应用程序大多数时候的数据交互都是通过Ajax来完成的,这样就可以将一些隐藏字段的数据保存在HTML标签的属性中,使HTML标签的代码量减少,如:ID,Timestamp等等,这些不需要用户输入但又不得不提交的字段,通过表单提交的做法是 <input name="ID" value="

Javascript Fromdata 与jQuery 实现Ajax文件上传以及文件的删除

前端HTML代码: <!DOCTYPE html> <html> <head> <title>ajax</title> <script type="text/javascript" src="js/jquery.js"></script> <meta charset="utf-8" /> <style type="text/css&qu

Javascript Fromdata 与jQuery 实现Ajax文件上传

<!DOCTYPE html> <html> <head> <title>ajax</title> <script type="text/javascript" src="js/jquery.js"></script> <meta charset="utf-8" /> <style type="text/css"> fo

JavaScript强化教程——jQuery - Chaining

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 —— jQuery - Chaining 通过 jQuery,您可以把动作/方法链接起来. Chaining 允许我们在一条语句中允许多个 jQuery 方法(在相同的元素上). jQuery 方法链接 直到现在,我们都是一次写一条 jQuery 语句(一条接着另一条). 不过,有一种名为链接(chaining)的技术,允许我们在相同的元素上运行多条 jQuery 命令,一条接着另一条. 提示:这样的话,

JavaScript强化教程——jQuery动画

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 —— jQuery动画 jQuery 动画 - animate() 方法 jQuery animate() 方法用于创建自定义动画. 语法:$(selector).animate({params},speed,callback);必需的 params 参数定义形成动画的 CSS 属性. 可选的 speed 参数规定效果的时长.它可以取以下值:"slow"."fast" 或毫秒

paip.提升效率--数据绑定到table原理和流程Angular js jquery实现

paip.提升效率--数据绑定到table原理和流程Angular js  jquery实现 html #--keyword 1 #---原理和流程 1 #----jq实现的代码 1 #-----Angular 的实现 3 #--keyword jquery 遍历表格tr  td Angular 模板绑定 #---原理和流程 获得所有的行,第一的头行..排除,,,在的所有的删除. 遍历表格tr获得tds的所有的id数组. 根据id/id索引来获得绑定的数据源里面的数据字段..绑定到个td上..

JavaScript对象与jQuery对象以及DOM对象

今天说一下JavaScript对象与jQuery对象和DOM对象的区别和转换,前面已经见过JavaScript对象的创建,但还是要重提 var variable =                     //这是一个JavaScript对象 var $variable = $()             //这就是个jQuery对象 var variable = document.get...                   //这是一个DOM对象,方法包括getElementById(