1 AngularJS是一个前端JavaScript框架。它可通过 <script> 标签添加到HTML页面。
通过指令扩展了HTML，且通过表达式绑定数据到 HTML。
提高开发效率和运行速度
四大特征：
1 MVC模式：解耦和 提高代码复用性
Model:模型数据, 其实就是angular变量($scope.XX);
View: 视图,模型数据的呈现, Html+Directive(指令)
Controller:操作数据, 就是函数function,数据的增删改查;
2 双向绑定：
双向的数据绑定允许模型和视图之间的自动同步 通过$scope
Model的数据发生改变View就会随之改变
当然View发生改变 Model也会改变
3 依赖注入
面向服务的设计，对于需要依赖使用的服务，只需注入即可使用
4 模块化设计
对象和函数都写在js下会污染全局空间 把对象和函数定义在模块下 运行效率会增高
高内聚低耦合法则：
1)官方提供的模块 ng、ngRoute、ngAnimate
2)用户自定义的模块 angular.module('模块名',[])
2 运用AngularJS快速入门：前后都传递json格式数据
1 引入angular的包 angular.min.js
<script type="text/javascript" src="plugins/angularjs/angular.min.js">
2 表达式:{{表达式}} 表达式中可以是变量或是运算式 实时地输出变量或运算式。
html页面直接 {{entity.id}}获取域中的值 $scope.entity.id=17
3 定义模块：模块下有控制器 控制器下有$scope
var app=angular.module('myApp',[]);//定义了一个名为myApp的模块 变量是为了定义控制器使用
[]:用于在该模块下引入第三方的包 如果没有要引的就不写
4 定义模块下控制器：
控制器：对视图中的数据和事件处理函数进行挂载，同时进行一定的业务功能的底层封装和处理。
对scope对象进行初始化
向scope对象添加方法/函数
app.controller('控制器名',function($scope，$http){ //该$scope只在此控制器myController内有效
$scope.add=function(){
//$scope.z=parseInt($scope.x)+parseInt($scope.y);//可以把结果放在域中
return parseInt($scope.x)+parseInt($scope.y); //可以返回数据
}
});
5 $scope： 它与数据模型(Model)相绑定,同时也是表达式执行的上下文.$scope的作为范围只在某个控制器内
有了$scope就在视图和控制器之间建立了一个通道,绑定函数或者变量。
基于作用域：
视图在修改数据时会立刻更新$scope,$scope发生改变时也会立刻重新渲染视图.
1 $scope的绑定:
1 对象(json) $scope.user=data
不能直接操作对象方法，必须做初始化操作 可以通过ng-model双向绑定
注意：除了ng-model会自动初始化创建对象，其他情况都需要初始化才能操作对象
2 变量 $scope.y=1; 可以直接赋值操作 可以通过ng-model双向绑定
3 方法 $scope.add=(){}
2 view获取域中的值和调用$scope的方法:
1{{user.name}}
2 {{y}}
3 调用定义的方法：
{{add()}}:表达式调用函数并且输出返回值
$scope.add() ：调用函数
<body ng-init="findall()"> 初始化页面时调用
<button ng-click="findall()"> 绑定事件调用 点击调用
6 内置服务：向后台服务器发送get/post请求获取数据 请求的数据页面必须在服务器上部署 并且服务器已经启动
1 发送get请求：
//使用模块变量
var app=angular.module("模块名",[])
app.controller("myController",function($scope,$http){
$scope.findall=function(){ //定义了$scope的一个函数findall
$http.get(url).success(function(data){ //success是成功后 data是返回值
$scope.list=data;
});
}
})
2 发送post请求
app.controller("myController",function($scope,$http){
$http.post(url,请求参数).success(function(data){
$scope.list=data;
})
})
7指令：这些指令都是加在html标签上使用的
1 ng-app 指令作用是告诉子元素以下的指令是归angularJs管理, angularJs会识别的
指令的值指定使用哪个模块 加在body标签上的
<body ng-app="模块名不是模块变量" ng-controller="myController" ng-init="z='10'">
1. 一个页面会自动加载第一个ng-app，后边的没用
4. 一个ng-app(模块)可以有多个controller
5. $scope的范围局限于每一个controller中
2 ng-model 指令用于绑定页面数据,这样用户在文本框输入的内容会绑定到变量上，而表达式可以实时地输出变量。
它里面的值自动双向绑定到$scope域中
<input ng-model="name" > //给$scope.name赋值
3 ng-init 初始化指令 可以初始化变量值或加载函数 多个时用;分隔
<body ng-app="myApp" ng-controller="myController" ng-init="z='10';add()">
4 ng-controller 用于指定使用的控制器是哪个。
5 ng-click 是最常用的单击事件指令，绑定在方法上 在点击时触发控制器的某个方法
<button ng-click="add()">计算</button>
ng-bind 指令把应用程序数据绑定到 HTML 视图。
6 ng-repeat 用于循环数组变量。这个数组必须是json对象数组集合
普通数值数组：
<tr ng-repeat="i in list"> //数组数据在$scope.list中 遍历list赋值给i
<td>{{i}}</td> //显示的td是多行的
</tr>
对象数组(json数据)：
<tr ng-repeat="entity in list">
<td>{{entity.name}}</td>
<td>{{entity.shuxue}}</td>
<td>{{entity.yuwen}}</td>
</tr>
7 ng-if:判断指令.
8 ng-options:select标签使用的指令.
|
收藏
淘帖
踩
