AngularJS的使用总结
其他
2020-04-01 11:23:33
阅读次数: 0
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标签使用的指令. |
|
发布了923 篇原创文章 ·
获赞 11 ·
访问量 3万+
转载自blog.csdn.net/xiaoyaGrace/article/details/105221430