1 AngularJS是一个前端JavaScript框架。它可通过 <script> 标签添加到HTML页面。
通过指令扩展了HTML,且通过表达式绑定数据到 HTML。
提高开发效率和运行速度
四大特征:
1 MVC模式:解耦和 提高代码复用性
Model:模型数据, 其实就是angular变量(
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
var app=angular.module('myApp',[]);//定义了一个名为myApp的模块 变量是为了定义控制器使用
[]:用于在该模块下引入第三方的包 如果没有要引的就不写
4 定义模块下控制器:
控制器:对视图中的数据和事件处理函数进行挂载,同时进行一定的业务功能的底层封装和处理。
对scope对象进行初始化
向scope对象添加方法/函数
app.controller('控制器名',function(
http){ //该
scope.add=function(){
//
scope.x)+parseInt(
scope.x)+parseInt(
scope: 它与数据模型(Model)相绑定,同时也是表达式执行的上下文.
scope就在视图和控制器之间建立了一个通道,绑定函数或者变量。
基于作用域:
视图在修改数据时会立刻更新
scope发生改变时也会立刻重新渲染视图.
1
scope.user=data
不能直接操作对象方法,必须做初始化操作 可以通过ng-model双向绑定
注意:除了ng-model会自动初始化创建对象,其他情况都需要初始化才能操作对象
2 变量
scope.add=(){}
2 view获取域中的值和调用
scope.add() :调用函数
<body ng-init="findall()"> 初始化页面时调用
<button ng-click="findall()"> 绑定事件调用 点击调用
6 内置服务:向后台服务器发送get/post请求获取数据 请求的数据页面必须在服务器上部署 并且服务器已经启动
1 发送get请求:
//使用模块变量
var app=angular.module("模块名",[])
app.controller("myController",function(
http){
scope,
scope的范围局限于每一个controller中
2 ng-model 指令用于绑定页面数据,这样用户在文本框输入的内容会绑定到变量上,而表达式可以实时地输出变量。
它里面的值自动双向绑定到
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标签使用的指令.