Angular 基础知识以及demo样例
1. 四大特征
这些特点同服务段springmvc 完全一致
mvc 设计模式
双向绑定
依赖注入
模块化设计
2. 初始化指令，双向绑定
<!--angular 在body内部都会被识别-->
<body ng-app ng-init="mycore='100'">
<!--双向绑定 model 代表数据-->
你考试的总分是： <input ng-model="mycore" /> <br />
{{mycore}}分，还需要配继续努力
</body>
3. 控制器
<head>
<meta charset="UTF-8">
<script src="angular/angular.min.js"></script>
<script src="angular/jquery-2.2.3.min.js"></script>
<title></title>
<script>
/*定义了一个模块*/
var app = angular.module('mycore',[])
/*模块控制器 $scope model view 直接的媒介*/
app.controller('myController',function($scope){
$scope.add=function(){
return parseInt($scope.yuwen)+parseInt($scope.shuxue);
}
});
</script>
</head>
<!--angular 在body内部都会被识别-->
<body ng-app="mycore" ng-controller="myController" >
语文分数:<input ng-model="yuwen" /> <br />
数学分数:<input ng-model="shuxue" /> <br />
总共分数： {{add()}}
</body>
上图代码变量个人理解
- 定义angular模块为app
- app.controller ( 控制器名称，function(&scope)) 在控制器的内部可以定义一堆方法
- $scope.add 定义一个名称为add方法
- $scope 相当于是一个类
- $scope.yuwen 相当于 类中的成员变量变
- $scope.add 相当于 类中的方法名臣
- function(&scope) 依赖注册这个实体
4. 循环数组-基本数据类型
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="angular/angular.min.js"></script>
<title></title>
<script>
var app = angular.module('mycore',[]);
app.controller("mycontroller",function($scope){
//$scope.list=[99,1,11,9,23,11,99,3]; /*数据不可以重复，内部存储同时int string类型*/
$scope.pp=["北京","你","好",22,66,11]; //定义在控制器中
})
</script>
</head>
<!--angular 在body内部都会被识别-->
<body ng-app="mycore" ng-controller="mycontroller" ng-init="findAll()">
<table>
<tr> <td>数学</td></tr>
<tr ng-repeat="item in pp">
<td>{{item}}</td>
</tr>
</table>
</html>
- $scope.pp=[“北京”,”你”,”好”,22,66,11]; //定义在控制器中
- ng-repeat=”item in pp” // item代表每一个成员变量，{{item}}
5. 循环数组对象-基本数据类型
内部的数据类型类似于字符串，最后一个对象的数据“，” 不用加 ， name属性没有加双引号
$scope.list=[ {name:'张三',shuxue:100,yuwen:93}, {name:'张三',shuxue:100,yuwen:93}, {name:'王五',shuxue:77,yuwen:56} ]遍历获取集合中对象的属性值，每个item都代表是一个对象
<tr ng-repeat="item in list"> <td>{{item.name}}</td> <td>{{item.shuxue}}</td> <td>{{item.yuwen}}</td> </tr>
6. 内置服务
其实这个内置服务就是在angular中封装了aJax，从而实现同服务端的交互
var app = angular.module("app",[]); //$scope,$http同时都被依赖注入，控制器内部的所有方法都可以调用 app.controller("mycontroller",function($scope,$http){ $scope.findAll=function(){ //服务端的内部交互 $http.get('data.json').success( //如果response返回的json字符串，list内部存储的数组对象 //如果response 返回的是一个object，list就是一个对象 //如果response 返回的是基本数据类型， list就是一个基本数据类型 function(response){ $scope.list=response; } ) } })
7. 自定义服务
自定义服务就是将控制层中内置服务提取到service层，可以做到高内聚，低偶合，可以理解为一个抽取的过程，在control层调用服务的时候别忘记，进行注入 ，最简单的理解就是让多个control层去调用相同的服务
var app = angular.module("app",[]); app.service('myservice',function($http){ //内置服务注册的时候要用this this.find=function(){ return $http.get('data.json'); } }) //服务不要忘记注入 app.controller("mycontroller",function($scope,myservice){ //控制层定义方法的时候要用$scope $scope.findALL=function(){ myservice.find().success( function(response){ alert("response") $scope.list=response; } ) } })
8. 控制器继承
- 就是将控制层内相同的代码进行向上抽取
第一步 建立父控制器,这些控制器的内容在其他控制层也被用到，因此向上抽取而成立
//基本控制层 app.controller('baseController' ,function($scope){ //重新加载列表 数据 $scope.reloadList=function(){ //切换页码 $scope.search( $scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage); } //分页控件配置 $scope.paginationConf = { currentPage: 1, totalItems: 10, itemsPerPage: 10, perPageOptions: [10, 20, 30, 40, 50], onChange: function(){ $scope.reloadList();//重新加载 } }; $scope.selectIds=[];//选中的 ID 集合 //更新复选 $scope.updateSelection = function($event, id) { if($event.target.checked){//如果是被选中,则增加到数组 $scope.selectIds.push( id); }else{ var idx = $scope.selectIds.indexOf(id); $scope.selectIds.splice(idx, 1);//删除 } } })第二步 修改子类控制器
//1.这个控制器需要注入 app.controller('brandController' ,function($scope,$controller,brandService){ //2. 就这么个格式集成父类控制器 $controller('baseController',{$scope:$scope});//继承 //读取列表数据绑定到表单中 $scope.findAll=function(){ brandService.findAll().success( function(response){ $scope.list=response; } ); }
2017.9.23 增加内容
判断逻辑
- 在前端代码增加判断的业务逻辑，当等于3时候不会显示下面的 button内容
在ng-click中执行方法用“ ； ”隔开
<span ng-if="grade!=3"> <button type="button" class="btn bg-olive btn-xs" ng-click="setGrade(grade+1);selectList(entity)">查询下级</button> </span>
下拉选择框的实现
*ng-options 属性可以在表达式中使用数组或对象来自动生成一个 select 中的 option 列表。 ng-options 与 ng-repeat 很相似，很多时候可以用 ng-repeat 来代替 ng-options。但是 ng-options 提供了一些好处，例如减少内存提高速度，以及提供选择框的选项来让用户选择。
<select class="form-control"
ng-model="entity.goods.category1Id"
ng-options="item.id as item.name for item in itemCat1List">
</select>
监控变量值的变化
$watch 方法用于监控某个变量的值，当被监控的值发生变化，就自动执行相应的函数。
$scope.$watch('entity.goods.category1Id', function(newValue, oldValue) { //oldValue 未变化的值 //newValue 变化后的值 //根据选择的值，查询二级分类 itemCatService.findByParentId(newValue).success( function(response){ $scope.itemCat2List=response; } ); });
1752
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
