首页 > 代码库 > JavaScript---Angular 和JQuery
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() 需要包一下
JavaScript---Angular 和JQuery