angular基础知识以及样例demo
2017-09-18 18:11
351 查看
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;
}
);
});
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- fs模块基础知识以及demo
- oracle基础知识以及部分demo
- 基础知识以及数组
- Linux学习笔记一 ---- Linux基础知识认知以及初识Linux下C编程入门
- 【JAVA基础知识总结】Java I/0流概述以及使用方法
- 对C语言结构体知识点的学习以及复习相关基础知识
- Lincx下配置IP地址，网卡，DNS服务 以及IP地址的基础知识
- angular的基础知识
- Flex之旅：第一部分：flex必备基础知识积累(10)---弹出窗口以及位置控制
- Android音频开发（1）：基础知识和demo
- tornado简单项目简介以及基础知识（包括错误类型解释十）
- 在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service（基础知识以及简单示例）
- 今天自学一些逆向的基础知识，看了xchg指令，写了一个简单的 临界区 demo
- python练习之安装，基础知识应用以及脚本编写
- Linux中基础笔记（必备知识）包含常用指令以及tomcat搭建 系列3
- EasyDemo*JavaSE 基础知识点体系结构图(download pic Thx)
- MFC基础知识(一)——文档视图类指针获取、逻辑与设备坐标以及OnDraw
- 在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service（基础知识以及简单示例）
- MVC学习笔记之入门篇(二)mvc3相关介绍以及基础知识篇