Angular JS
AngularJS 基础入门案例
外观页面
<!-- 定义angularJS代码的工作域:类似avalon ms-controller -->
<body ng-app="">
<!-- 创建变量various并放入Scope变量,angularJS工作域里面实现共享:input,select,textarea标签适用 -->
Your name: <input type="text" ng-model="various" placeholder="World">
<hr>
<!-- 插值表达式直接取出scope域中名为various值,否则显示默认值World! -->
Hello {{various || 'World'}}!<br>
<!-- ng-bind将当前html元素的text属性和scope的various绑定,适用表达式-->
ng-bind01:<span ng-bind="(various || 'span bind')"></span>!<br>
<!-- 注意input select textarea的数据绑定只能适用ng-model -->
ng-bind02:<input type="text" ng-model="various" placeholder="input model!">
<hr>
<!-- ng-init:初始化变量,但是不会与当前html元素进行数据绑定,注意init可以初始化多个变量,';'隔开 -->
ng-init:<span ng-init="name='zhangsan'"></span>{{name}}<br>
ng-init value:<span ng-bind="name"></span>
</body>
AngularJS 模块
模块是应用控制器的容器,Angularjs代码依赖Jquery,在使用angualrjs代码时,Jquery脚本文件须在AngularJS脚本之前加载, 此外一般将脚本代码放置在body元素的底部是为了提供网页的加载速度,因 HTML 加载不受制于脚本加载: 换句话说脚本和html代码加载时分开的,为了提供网页的加载速度,可以先将页面显示的html先加载完成后,再加载脚本文件
注意:1个html中只有1个应用,因此页面只有一个模块,如果存在多个以第一个为准
外观页面
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
js操作逻辑
/*
* app: 模块对象
* myApp: 模块名
* []: 表示该模块依赖的模块数组,类似Java中的jar包依赖
*
* myCtrl: 表示模块下挂载的控制器
* $scope: 作用域,这里控制器作用范围定义2个属性:firstName 和 lastName, 主要用于模型与视图之间的数据同步(vm部分)
*/
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "Squirrel";
$scope.lastName = "Hello";
});
AngularJS 控制器
外观页面
<body ng-app="myApp" ng-controller="myCtrl">
<h2>AngularJS 函数绑定</h2>
<textarea ng-model="message" cols="40" rows="10"></textarea>
<p>
<button ng-click="save()">保存</button>
<button ng-click="clear()">清除</button>
</p>
<p>
剩余字数: <span ng-bind="left()"></span>
</p>
<!-- AngualrJS的显示、隐藏逻辑控制指令:类似avalon 的 ms-visible和knockout的visible指令 -->
<div ng-show="flag">
结果:<font color="red">
<span ng-bind="result"></span>
</font>
</div>
js操作逻辑
/**
* AngularJS 将属性、函数视为controller的平等成员,可按照访问普通属性的方式调用函数
*/
var app = angular.module("myApp", []);
/*
* 定义控制器 myCtrl, 并且作用域定义普通属性和函数
*/
app.controller("myCtrl", function($scope) {
$scope.message = "";
$scope.result="";
$scope.flag=false;
$scope.left = function() {return 100 - $scope.message.length;};
$scope.clear = function() {
$scope.message = "";
$scope.result= $scope.message;
$scope.flag = false;
};
$scope.save = function() {
$scope.result= $scope.message;
$scope.flag=true;
};
});
AngularJS 控制器作用范围
$scope 代表视图与数据模型的中间层:scope中的对象 model和view 共享,并且数据是双向同步
双向同步: $scope中的对象与视图元素绑定,一方发生数据更新,另一方自动同步更新
controller作用域:负责controller标签包裹的元素的数据处理,如果子元素嵌套Controller,则相应的子元素的作用Controller以距离子元素最近的为准(这种最近作用原则在Jmeter测试框架,avalon的ms-controller同样体现)
外观页面
<!-- 指定应用名及控制器 -->
<body ng-app="myApp">
<div ng-controller="myCtrl01">
<p>myCtrl01的作用域</p>
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
<hr/>
<p>myCtrl02的作用域</p>
<div ng-controller="myCtrl02">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>
</div>
js操作逻辑
var app = angular.module('myApp', []);
//定义控制器myCtrl01
app.controller('myCtrl01', function($scope) {
/*
* 后台向scope域中存放对象:页面存放的标签:
* ng-init 初始化变量
* ng-model:初始化变量并进行数绑定
*/
$scope.firstName= "John";
$scope.lastName= "Doe";
});
//定义控制器myCtrl02
app.controller('myCtrl02', function($scope) {
$scope.firstName= "Hello";
$scope.lastName= "Python";
});
AngularJS 运算表达式
外观页面
<body ng-app="">
<div ng-init="quantity=1;cost=5;array=[1,2,3,4];person={'name':'zhangsan','age':'20'}">
quantity:<span>{{quantity}}</span><br>
插值表达式等价于:<span ng-bind="quantity"></span><br><br>
<!-- angular表达式支持运算 -->
总价:<span>{{"quantity*cost="+quantity*cost}}</span><br>
<!-- < html元字符:'<' -->
逻辑运算:<span>{{quantity<2?quantity:cost}}</span><br>
数组取值:<span>{{array[2]}}</span><br>
对象属性取值:<span>{{person.name}}</span>
</div>
AngularJS 表格操作
css样式
table, td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
外观操作
<body ng-app="">
<div ng-init="persons=[{'name':'zhangsan','age':'20'},
{'name':'lisi','age':'19'},
{'name':'lisi','age':'19'}]">
<table>
<!-- $odd:下标为奇数的元素 $even:下标为偶数的元素 -->
<tr ng-repeat="x in persons">
<!-- 获取元素的下标值 -->
<td>{{$index+1}}</td>
<!-- ng-if类似ms-if进行布尔值判断显示 -->
<td ng-if="$odd" style="background-color:yellow"> {{ x.name }}</td>
<td ng-if="$even">{{ x.name }}</td>
<td ng-if="$odd" style="background-color:green"> {{ x.age }}</td>
<td ng-if="$even">{{ x.age }}</td>
</tr>
</table>
<span>{{persons[0]}}</span>
</body>
AngularJS 表单操作
外观页面
<div ng-app="myApp" ng-controller="myCtrl">
<!-- novalidate:当提交表单时不对表单数据(输入)进行验证 -->
<form novalidate>
First Name:<input type="text" ng-model="user.firstName"><br>
Last Name:<input type="text" ng-model="user.lastName">
<br><br>
<button ng-click="reset()">RESET</button>
</form>
<p>form = {{user }}</p>
<p>
<font color="red">initInfo = {{initInfo}}</font>
</p>
</div>
js操作逻辑
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.initInfo = {firstName:"squirrel", lastName:"Python"};
$scope.reset = function() {
// user对象等于master对象:深复制
$scope.user = angular.copy($scope.initInfo);
};
//JS扫描脚本时会自动调用reset方法进行输入框信息的初始化(函数自动调用)
$scope.reset();
});
AngualrJS 表单元素绑定
- ng-disabled: 绑定控件的disabled属性
- ng-show: 显示或者隐藏元素:ms-visible
- ng-hide: 与ng-show功能恰好相反
css样式
div.d1{
width: 20px;
height: 20px;
background-color: pink;
}
div.d2{
width: 20px;
height: 20px;
background-color: black;
}
外观页面
<body ng-app="myApp" ng-controller="myctr">
<div>
请输入:<input type="text" placeholder="....." ng-disabled="flag">{{flag}}<br>
切换输入:<input type="button" value="switch input" ng-click="switchInput();">
</div>
<hr ng-init="checkValue=false">
input:<input type="text" ng-disabled="checkValue">{{checkValue}}<br>
<input type="checkbox" ng-model="checkValue">stop input <!-- 注意ng-model不能作用于单选框 -->
<hr>
<p>ng-show:flag</p>
<div class="d1" ng-show="flag"></div>
<p>ng-hide:checkValue</p>
<div class="d2" ng-hide="checkValue"></div>
<hr>
<!-- ng-click:后面可以直接跟表达式,表达式会直接执行,变量不支持++操作 -->
<input type="button" ng-click="count = count + 1" value="加1">:{{count}}
js操作逻辑
var app = angular.module('myApp', []);
app.controller('myctr', function($scope) {
$scope.flag=false;
$scope.count=0;
$scope.switchInput=function(){
$scope.flag=!$scope.flag;
};
});
AngularJS 表单验证
ng-model作用:
- ng-model 指令可将输入域的值与 AngularJS 创建的变量绑定
- 双向绑定,在修改输入域的值时, AngularJS 属性的值也将修改
- 数据校验
- ng-model 指令可为应用数据提供状态值(invalid, dirty, touched, error)
- ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类
css样式
/*angularJS会根据表单的状态进行添加或者删除对应的样式*/
/*定义输入框不合法的默认背景颜色*/
input.ng-invalid {
background-color: grey;
}
/*输入框数据合法的默认背景颜色*/
input.ng-valid {
background-color: yellow;
}
外观页面
<body ng-app="myApp">
<div ng-controller="myCtrl">
<!-- 将表单输入域的值与angularJS的变量绑定 -->
名字: <input ng-model="name"><br>
angularJS双向绑定:{{name}}
</div>
<hr>
<p>表单输入信息校验</p>
<form name="myForm01">
Email:<input type="email" name="myEmail01" ng-model="text">
<!-- ng-show:类似avalon的ms-if的用法,如果校验不通过则返回true,显示提示内容,数据校验不太精确 -->
<span ng-show="myForm01.myEmail01.$error.email" style="color: red">邮箱地址不合法!</span><br>
数据校验结果:<span>{{myForm01.myEmail01.$error.email}}</span>
</form>
<hr>
<p>
ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error)
</p>
<form name="myForm02" ng-init="myText='test@qq.com'">
Email:<input type="email" name="myEmail02" ng-model="myText" required> <!-- required标识不能为空,否则不合法 -->
<h5>状态</h5>
<!-- 通过识别表单的email控件按照默认的规则进行校验 -->
数据输入合法:{{myForm02.myEmail02.$valid}} <br>
数据改变:{{myForm02.myEmail02.$dirty}} <br>
触屏点击: {{myForm02.myEmail02.$touched}}
</form>
<hr>
<p>ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类</p>
<form name="myForm03">
输入你的名字:<input name="myName" ng-model="text" required>
</form>