Angular基础
2016-06-19 本文已影响520人
阿振_sc
表达式
在Angular中表达式是运用在视图中的一段代码，如：
{{ 1.98 + 2.98 | number : 0 }}
控制器
在Angular中，控制器(controller)的功能是管理页面的逻辑代码，当控制器通过ng-controller指令被添加到DOM页面时，Angular将会通过控制器构造函数生成一个实体对象，在这个过程中，$scope对象作为参数注入其中，并允许用户访问$scope对象
初始化$scope对象
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body ng-controller="MyController">
{{text}}
<script src="./angular.min.js"></script>
<script>
angular.module('MyApp', [])
.controller('MyController', function($scope){
$scope.text = 'Hello, World!';
})
</script>
</body>
</html>
添加$scope对象方法
除了可以通过初始化的方式为$scope对象添加属性之外，还可以为$scope对象添加方法，并依靠这些定义的方法来满足视图层中逻辑处理和事件执行的需要
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body ng-controller="MyController">
{{text_show()}}
<script src="./angular.min.js"></script>
<script>
angular.module('MyApp', [])
.controller('MyController', function($scope){
$scope.text_show = function () {
return 'Hello, Angular!';
}
})
</script>
</body>
</html>
在事件中为$scope对象绑定方法
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body ng-controller="MyController">
<p>{{text}}</p>
<button ng-click="click_show()">点击</button>
<script src="./angular.min.js"></script>
<script>
angular.module('MyApp', [])
.controller('MyController', function($scope){
$scope.text = 'Hello, World!';
$scope.click_show = function() {
$scope.text = '这是点击后显示的内容';
}
})
</script>
</body>
</html>
除了可以向$scope对象添加方法外，还可以在方法中添加参数，多个参数通过口号隔开
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body ng-controller="MyController">
<p>{{text}}</p>
<button ng-click="click_show()">点击显示</button>
<button ng-click="click_params('我是带参数的')">带参数的点击</button>
<script src="./angular.min.js"></script>
<script>
angular.module('MyApp', [])
.controller('MyController', function($scope){
$scope.text = '';
$scope.click_show = function() {
$scope.text = 'Hello, World!';
}
$scope.click_params = function(param) {
$scope.text = param;
}
})
</script>
</body>
</html>
$scope对象属性和方法的继承
在Angular中，ng-controller指令允许在不同的层次元素中指定控制器，处于子层控制器中的$scope对象将会自动继承父层控制器中$scope对象的属性和方法
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div ng-controller="parentController">
<div ng-controller="childController">
<span>{{text}}</span><br>
<span>{{child_text}}</span><br>
<button ng-click="click_show()">继承</button>
</div>
</div>
<script src="./angular.min.js"></script>
<script>
angular.module('MyApp', [])
.controller('parentController', function($scope){
$scope.text = 'Hello, Angular!';
$scope.click_show = function() {
$scope.text = '单击后显示的内容';
}
})
.controller('childController', function($scope){
$scope.child_text = '欢迎来到AngularJS的世界！';
})
</script>
</body>
</html>
模板
Angular提供一套完善的模板系统，配合$scope对象和数据双向绑定机制，将页面纯静态元素经过行为、属性的添加和格式的转换，最终变成在浏览器中显示的动态页
构建模板内容
构建的方式一般通过下面三种方式：
- 直接在页面中添加元素和Angular指令，依赖控制器中构建的属性和方式绑定模板中的元素内容和事件，实现应用需求
- 通过
type类型为text/ng-template的<script>元素来构建一个用于绑定数据的模板 - 通过添加元素的
src属性，导入一个外部文件作为绑定数据的模板，除了src属性外，还需要使用ng-include指令
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/ng-template" id="tplbase">
姓名: {{name}} <br>
邮箱: {{email}}
</script>
<div ng-include="'tplbase'" ng-controller="MyController"></div>
<script src="./angular.min.js"></script>
<script>
angular.module('MyApp', [])
.controller('MyController', function($scope){
$scope.name = 'Kaindy7633';
$scope.email = 'kaindy7633@gmail.com';
})
</script>
</body>
</html>
使用指令复制元素
在Angular中，使用ng-repeat指令来复制元素，也可以叫循环输入元素
在使用ng-repeat中，Angular还提供了几个专有变量，通过它们可以处理显示数据时的各种状态
-
$first：标记记录是否是首条，如果是返回true，否则返回false -
$last：标记记录是否是尾条，如果是返回true，否则返回false -
$middle：标记记录是否是中间条，如果是返回true，否则返回false -
$index：标记记录的索引号，其对应的值从0开始
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div ng-controller="MyController">
<ul>
<li>
<span>序号</span>
<span>姓名</span>
<span>性别</span>
<span>是否首条</span>
<span>是否尾条</span>
</li>
<li ng-repeat="stu in data">
<span>{{$index+1}}</span>
<span>{{stu.name}}</span>
<span>{{stu.sex}}</span>
<span>{{$first?'是':'否'}}</span>
<span>{{$last?'是':'否'}}</span>
</li>
</ul>
</div>
<script src="./angular.min.js"></script>
<script>
angular.module('MyApp', [])
.controller('MyController', function($scope){
$scope.data = [
{name: '张明明', sex: '女'},
{name: '李青思', sex: '女'},
{name: '刘晓华', sex: '男'},
{name: '陈忠忠', sex: '男'}
];
})
</script>
</body>
</html>
添加元素样式
在Angular中，添加元素样式分为以下几种方式：
(1) 直接绑定值为CSS类别名称的$scope对象属性，如：
在Angular中定义：
$scope.red = 'red';
在HTML中定义：
<div ng-class="{{red}}"></div>
或者
<div class="{{red}}"></div>
上面的这种方式简单，但不提倡，在开发Angular应用时，尽量保证控制器代码是处理业务逻辑，而不涉及页面元素
(2) 以字符串数组方式选择性添加CSS类别名称
这种方式根据控制器中一个布尔类型的属性值来决定页面元素添加那种CSS样式
在Angular中定义：
$scope.blnfocus = true;
在html中定义：
<div ng-class="{true: 'red', false: 'green'}[blnfocus]"><div>
(3) 通过定义key/value对象的方式来添加多个CSS样式名称
这种方式根据控制显示样式的属性值添加多个样式名
在Angular中定义：
$scope.a = false;
$scope.b = true;
在html中定义：
<div ng-class="{'red': a, 'green': b}"></div>
另外，在Angular中，还有两个与定义样式相关的指令，分别是ng-class-odd和ng-class-even，它们专用于以列表方式显示数据，对应奇数行与偶数行的样式
<!doctype html>
<html ng-app="MyApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {font-size: 12px;}
ul {list-style-type: none; width: 408px; margin: 0; padding: 0;}
ul li {float: left; padding: 5px 0;}
ul .odd {color: #0026ff;}
ul .even {color: #ff0000;}
ul .bold {font-weight: bold;}
ul li span {width: 52px; float: left; padding: 0px 10px;} ul .focus {background-color: #ccc;}
</style>
</head>
<body>
<div ng-controller="MyController">
<ul>
<li ng-class="{{bold}}">
<span>序号</span>
<span>姓名</span>
<span>性别</span>
<span>是否首条</span>
<span>是否尾条</span>
</li>
<li ng-repeat="stu in data"
ng-class-odd="'odd'"
ng-class-even="'even'"
ng-click="li_click($index)"
ng-class="{focus: $index==focus}">
<span>{{$index+1}}</span>
<span>{{stu.name}}</span>
<span>{{stu.sex}}</span>
<span>{{$first?'是':'否'}}</span>
<span>{{$last?'是':'否'}}</span>
</li>
</ul>
</div>
<script src="./angular.min.js"></script>
<script>
angular.module('MyApp', [])
.controller('MyController', function($scope){
$scope.bold = 'bold';
$scope.li_click = function() {
$scope.focus = i;
};
$scope.data = [
{name: '张明明', sex: '女'},
{name: '李青思', sex: '女'},
{name: '刘晓华', sex: '男'},
{name: '陈忠忠', sex: '男'}
];
})
</script>
</body>
</html>
控制元素的隐藏与显示状态
在Angular中，可以通过ng-show、ng-hide和ng-switch指令来控制元素的隐藏与显示
而ng-switch指令的功能是显示匹配成功的元素，它要与ng-switch-when和ng-switch-default指令配合使用
<!doctype html>
<html ng-app="MyApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div ng-controller="MyController">
<div ng-show="{{isshow}}">Kaindy7633</div>
<div ng-hide="{{isHide}}">kaindy7633@gmail.com</div>
<ul ng-switch on={{switch}}>
<li ng-switch-when="1">Kaindy7633</li>
<li ng-switch-when="2">Kaindy7633@gmail.com</li>
<li ng-switch-default>更多...</li>
</ul>
</div>
<script src="./angular.min.js"></script>
<script>
angular.module('MyApp', [])
.controller('MyController', function($scope){
$scope.isshow = true;
$scope.isHide = false;
$scope.switch = 3;
})
</script>
</body>
</html>
表单控件
表单基本验证功能
在Angular中，针对表单和表单控件提供了如下属性，用于验证控件交互值的状态
-
$prisine表示表单或控件内容是否未输入过 -
$dirty表示表单或控件内容是否已输入过 -
$valid表单或控件内容是否已验证通过 -
$invalid表示表单或控件内容是否未验证通过 -
$error表示表单或控件内容验证时的错误提示信息
前面4个均返回布尔类型的值，最后一个返回一个错误对象
<!doctype html>
<html ng-app="MyAPp">
<head>
<meta charset="utf-8">
<title></title>
<style>
body {font-size: 12px;}
input {padding: 3px;}
</style>
</head>
<body>
<form name="myForm" ng-submit="save()" ng-controller="MyController">
<div>
<input type="text" name="username" ng-model="name" required>
<span ng-show="myForm.username.$error.required">
用户名不能为空
</span>
</div>
<div>
<input type="email" name="email" ng-model="email" required>
<span ng-show="myForm.email.$error.required">Email地址不能为空</sapn>
<span ng-show="myForm.email.$error.email">Email格式不正确</span>
</div>
<div>
<input type="submit" name="submit" ng-disabled="myForm.$invalid" value="提交">
</div>
</form>
<script src="./angular.min.js"></script>
<script>
var myform = angular.module('MyApp', []);
myfrom.controller('MyController', ['$scope', function($scope){
$scope.name = 'Kaindy7633';
$scope.email = 'kaindy7633@gmail.com';
$scope.save = function(){
alert('保存成功');
}
}]);
</script>
</body>
</html>
表单中的checkbox和radio控件
<!doctype html>
<html ng-app="MyApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body { font-size: 12px;}
input { padding: 3px;}
</style>
</head>
<body>
<form name="myForm" ng-submit="save()" ng-controller="MyController">
<input type="checkbox" ng-model="a">同意
性别:
<input type="radio" ng-model="b" value="男">男
<input type="radio" ng-model="b" value="女">女
<input type="submit" vlaue="提交">
<p>{{c}}</p>
</form>
<script src="./angular.min.js"></script>
<script>
var myform = angular.module('MyApp', []);
myform.controller('MyController', ['$scope', function($scope){
$scope.a = true;
$scope.b = '男';
$scope.save = function() {
$scope.c = '您选择的是:' + $scope.a + '和' + $scope.b; } }]);
</script>
</body>
</html>
表单中的select控件
在Angular中，select控件可以借助ng-options指令将数组、对象等数据添加到<option>元素中
(1) 绑定简单的数组数据
在控制器中添加数组数据
$scope.data = ['a', 'b', 'c', 'd'];
在select控件中，通过ng-options指令，采用...for...in...格式将数组数据与select控件绑定
<select ng-model="a" ng-options="text for txt in data">
<option value="">--请选择--</option>
</select>
<!doctype html>
<html ng-app="MyApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form ng-controller="MyController">
<select ng-model="a" ng-options="txt for txt in data">
<option value="">--请选择--</option>
</select>
</form>
<script src="./angular.min.js"></script>
<script>
var myform = angular.module('MyApp', []);
myform.controller('MyController', ['$scope', function($scope){
$scope.data = ['A', 'B', 'C', 'D', 'E'];
}]);
</script>
</body>
</html>
(2) 绑定简单的对象数据
在控制器中添加对象数据
$scope.data = [
{id: '1', name: 'A'},
{id: '2', name: 'B'},
{id: '3', name: 'C'},
{id: '4', name: 'D'}
];
在控件中，采用...as...for...in...的格式将对象数据与select绑定
<select ng-model="a" ng-options="txt.id as txt.name for txt in data">
<option value="">--请选择--</option>
</select>
(3) 以分组的形式绑定对象数据
首先在控制器中添加对象数据
$scope.data = [
{id: '1', name: 'A', key: '大写'},
{id: '2', name: 'B', key: '大写'},
{id: '3', name: 'C', key: '小写'},
{id: '4', name: 'D', key: '小写'}
];
如果在上述数据中，以key为分组依据，则可以采用...as...group by...for...in...的格式
<select ng-model="a" ng-options="txt.id as txt.name group by txt.key for txt in data">
<option value="">--请选择--</option>
</select>
综合示例：
<!doctype html>
<html ng-app="MyApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form name="myform" ng-controller="MyController">
<div>
学制:
<select ng-model="school" ng-options="s.id as s.name for s in schoolData" ng-change="schoolChange(school)">
<option value="">--请选择--</option>
</select>
<span>{{school_show}}</span>
</div>
<div>
班级:
<select ng-model="class" ng-options="c.id as c.name group by c.grade for c in classData" ng-change="classChange(class)">
<option value="">--请选择--</option>
</select>
<span>{{class_show}}</span>
</div>
</form>
<script src="./angular.min.js"></script>
<script>
var myapp = angular.module('MyApp', []);
myapp.controller('MyController', ['$scope', function($scope){
$scope.schoolData = [
{id: '1001', name: '小学'},
{id: '1002', name: '初中'},
{id: '1003', name: '高中'}
];
$scope.classData = [
{id: '1001', name: '(1)班', grade: '一年级'},
{id: '1002', name: '(2)班', grade: '一年级'},
{id: '2001', name: '(1)班', grade: '二年级'},
{id: '2002', name: '(2)班', grade: '二年级'},
{id: '3001', name: '(1)班', grade: '三年级'},
{id: '3002', name: '(2)班', grade: '三年级'}
];
$scope.school = '';
$scope.class = '';
$scope.schoolChange = function(e) {
$scope.school_show = '您选择的是:' + e;
}
$scope.classChange = function(e) {
$scope.class_show = '您选择的是:' + e;
}
}]);
</script>
</body>
</html>
