首页 > 代码库 > JavaScript---Angular 和JQuery

JavaScript---Angular 和JQuery

Angular  三层模式 M modeldata 数据层 , 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  直接绑定应用程序数据(例如truefalse)到 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; 

});

});

 

 

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

Egapp.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