初探angularJS 一
编者注:一直做java相关开发,返回头来看看,csdn里记录的反倒没多少关于java的。甚是汗颜。难道是我太不专注?
最近偶感互联网前端生机勃勃,会不会随着数据处理便捷(云平台+大数据)化,后端开发语言会逐渐没落。繁琐的业务逻辑被
强大的前端架构所处理,直接对接数据平台。
个人需要,最近接触了两天angularJS,如果有JS基础,这些基本语法很快能看完。这里写了个笔记和语法的代码实现。给自己
记录一下。
1 基础指令
ng-app 指令告诉AngularJS,div 元素是 AngularJS 应用程序的"所有者"。
ng-init 指令初始化应用程序数据。
ng-model 指令用于绑定应用程序数据到 HTML 控制器(input,select, textarea)的值。<divng-app="" ng-init="firstName='John'">
在输入框中尝试输入:
姓名: <input type="text" ng-model="firstName">
你输入的为: {{ firstName }}2 no-repeat 指令
1)带有对象
<div data-ng-app=""data-ng-init="names=[{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},{name:'Kai',country:'Denmark'}]">
循环对象:
<ling-repeat="y in names">
{{ y.name + ', ' + y.country }}
2)带有数组ng-repeat 指令(带有数组)
<div ng-app=""ng-init="names=['a1','a2','a3']">
使用 ng-repeat 来循环数组
<li data-ng-repeat="x in names">
{{ x }}3 自定义指令
1)自定义指令
<bodyng-app="myApp">
元素名调用指令:<runoob-directive></runoob-directive>
属性调用指令:<div runoob-directive></div>
类名调用指令:<div class="runoob-directive"></div>
<script>
var app = angular.module("myApp",[]); (module 方法的第一个参数为模块的名称,第二个参数为它的依赖模块列表。)
app.directive("runoobDirective",function() {
return {
template : "<h1>自定义指令!</h1>"
};
});
</script>
</body>
2)注释调用自定义指令
<body ng-app="myApp">
<!-- directive: runoob-directive -->
<script>
var app = angular.module("myApp",[]);
app.directive("runoobDirective",function() {
return {
restrict : "M",
replace : true,
template : "<h1>自定义指令!</h1>"
};
});
</script>
注意:我们需要在该实例添加replace 属性,否则评论是不可见的。注意:你必须设置 restrict 的值为 "M" 才能通过注释来调用指令。
限制使用restrict 值可以是以下几种:
E 只限元素名使用A 只限属性使用C 只限类名使用M 只限注释使用restrict
默认值为 EA, 即可以通过元素名和属性名来调用指令。
4 表达式{{ }}
<div ng-app=""ng-init="quantity=1;price=5">
价格计算器数量: <input type="number"ng-model="quantity">
价格: <input type="number" ng-model="price">
总价: {{quantity * price}}
实例中的 {{ firstName }} 表达式是一个 AngularJS 数据绑定表达式。AngularJS 中的数据绑定,同步了 AngularJS 表达式与 AngularJS 数据。{{ firstName }} 是通过 ng-model="firstName" 进行同步。:
5 数据绑定ng-bind
与表达式具有类似作用
AngularJS 数字 <div ng-init="quantity=1;cost=5">
总价: {{ quantity * cost }}
使用ng-bind的相同实例<div ng-init="quantity=1;cost=5">
总价: <span ng-bind="quantity * cost"></span>
6 双向绑定
<h1>ng-model 指令</h1>
<div ng-app="myApp"ng-controller="myCtrl">
名字: <inputng-model="name">双向绑定
你输入了:{{name}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</script>
使用 ng-model 指令来绑定输入域的值到控制器的属性。
7 验证
ng-model指令可以为应用数据提供状态值(invalid, dirty, touched, error):
<form name="myForm">
Email:
<input type="email" name="myAddress"ng-model="text">
<span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>
<h1>应用状态:</h1>
<form name="myForm2"ng-init="myText = 'test@runoob.com'">
Email:
<inputtype="email" name="myAddress" ng-model="myText"required>
Valid: {{myForm2.myAddress.$valid}} (如果输入的值是合法的则为true)
Dirty: {{myForm2.myAddress.$dirty}} (如果值改变则为 true)
Touched: {{myForm2.myAddress.$touched}} (如果通过触屏点击则为true)
8 CSS ng-invalid 合理性验证 控制CSS颜色改变
<style>
input.ng-invalid {
background-color: lightblue;
}
</style>
8 scope 域
控制器中创建一个属性名 "carname",对应了视图中使用 {{ }} 中的名称
<div ng-app="myApp"ng-controller="myCtrl">{{carname}}</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.carname = "Volvo";
});
</script>
9 控制器ng-controller="" ng-controller=" " 属性是一个AngularJS 指令。用于定义一个控制器
<div ng-app=""ng-controller="personController">
名: <input type="text"ng-model="person.firstName"><br>
姓: <input type="text"ng-model="person.lastName"><br>
<br>
姓名: {{person.fullName()}}
function personController($scope) {
$scope.person = {
firstName: "John",
lastName: "Doe",
fullName: function() {
var x;
x = $scope.person;
return x.firstName + " " + x.lastName;
}
};
}
10 过滤器
<div ng-app="myApp"ng-controller="personCtrl">
<p>姓名为 {{firstName |uppercase }}</p>
<p>姓名为 {{ lastName |lowercase }}</p>
</div>
11 $scope.myUrl = $location.absUrl();
内建的 $location服务获取当前页面的 URL。
12 $interval 访问在指定的周期(以毫秒计)来调用函数或计算表达式
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,$interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
},1000);
});
</script>
13 自定义服务
<div ng-app="myApp"ng-controller="myCtrl">
255 的16进制是:
{{hex}}</div>
自定义服务,用于转换16进制数:var app = angular.module('myApp', []);
//我们创建了一个名为hexafy的访问,将一个数字转换为16进制数
app.service('hexafy', function() {
this.myFunc= function (x) {
return x.toString(16);
}
});
//使用hexafy
app.controller('myCtrl', function($scope,hexafy) {
$scope.hex = hexafy.myFunc(255);
});
14 ng-options 和 ng-repeat
ng-options创建选择框<selectng-model="selectedName" ng-options="x for x in names">
</select>
ng-repeat创建选择框
<select>
<option ng-repeat="x in names">{{x}}</option>
</select>
初探angularJS 一
最新推荐文章于 2018-09-18 20:48:00 发布