angularJS 的简单使用
2017-07-23 本文已影响23人
屋檐下的燕雀
因为项目需要最近在看 angularJS。angularJS 是一个前端的 JavaScript 框架，AngularJS 使开发现单一页面应用程序（SPAs：Single Page Applications）变得更加容易：
- AngularJS 把应用程序数据绑定到 HTML 元素。
- AngularJS 可以克隆和重复 HTML 元素。
- AngularJS 可以隐藏和显示 HTML 元素。
- AngularJS 可以在 HTML 元素"背后"添加代码。
- AngularJS 支持输入验证。
如果要开发的是单页应用，AngularJS是不错的选择。类似Gmail、Google Docs、Twitter和Facebook这样的应用。但是如果像游戏开发之类对DOM进行大量操纵或者单纯需要极高运行速度的应用，AngularJS就不是一个很好的选择了。
angularJS 的指令
AngularJS通过ng-directives 扩展了 HTML，指令以ng-为前缀,如：
- ng-app 指令：定义一个 AngularJS 应用程序。
- ng-controller 指令定义了应用程序控制器。
- ng-model 指令：把元素值（比如输入域的值）绑定到应用程序。
- ng-bind 指令：把应用程序数据绑定到 HTML 视图。
- ng-init 指令：初始化应用程序数据。
- ng-hide 指令：隐藏或显示 HTML 元素。
- ng-form指令： HTML 表单继承控制器表单。
angularJS的全部指令
angularJS 的表达式
AngularJS 表达式写在双大括号内：{{ expression }}，可以把数据绑定到 HTML（这与 ng-bind 指令有异曲同工之妙），还可以在表达式书写的位置"输出"数据。同JavaScript 表达式一样，AngularJS 表达式可以包含文字、运算符和变量。
如： {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
实例代码：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl" ng-init="firstName='John';lastName='Jack'">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
}
});
</script>
</body>
</html>
运行结果：
实例运行结果.PNG
应用解析：
- 1.由 ng-app 定义AngularJS 应用程序，应用程序在 <div> 内运行。
- 2.ng-controller="myCtrl" 属性是一个 AngularJS 指令。用于定义一个控制器，控制器控制着应用程序的业务逻辑。
- 3.myCtrl 函数是一个 JavaScript 函数。
- 4.AngularJS 使用$scope 对象来调用控制器。
- 5.在 AngularJS 中， $scope 是一个应用对象(属于应用变量和函数)。
- 6.控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。
- 7.控制器在作用域中创建了两个属性 (firstName 和 lastName)。
- 8.ng-model 指令绑定输入域到控制器的属性（firstName 和 lastName）。
简单应用
下面就写一个简单的小应用，运行结果如下：
目标代码运行结果.PNG
主要功能为实现一个列表，显示一些个人信息，可以增删改，第一数列代表操作的行数，一次之操作一行。数据保存在js 的内存中，没有数据库的交互。
首先要在html的<head> 标签中导入使用的库( Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架，提供了许多精美的界面以及组件，使用非常方便，并且是开源的)：
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>angular 练习</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="mycss.css">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/angular.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="mytest.js"></script>
</head>
下面是布局：
布局分为3部分：
- 1 显示列表的界面；
- 2 显示添加数据的界面；
- 3 显示修改数据的界面；
<div class="mytest" ng-app="myApp" ng-controller="myCtrl">
<!-- 增删改三个按钮-->
<div class="header">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span><a href="javascript:void(0)" ng-click="showAddItemModal()">添加</a>
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span><a href="javascript:void(0)" ng-click="delItem()">删除</a>
<span class="glyphicon glyphicon-edit" aria-hidden="true"></span><a href="javascript:void(0)" ng-click="showEditItemModal()">修改</a>
</div>
<!-- 显示数据的列表-->
<table class="table">
<thead>
<tr>
<th>select</th>
<th>id</th>
<th>name</th>
<th>gender</th>
<th>age</th>
<th>birth</th>
<th>hobby</th>
<th>team</th>
</tr>
</thead>
<tbody>
<!-- 此处的ng-repeat="list in datas" 会自动遍历js文件中的datas（保存数据的数组），并显示在html界面上-->
<tr class="datalist" ng-repeat="list in datas">
<td><input type="radio" value="{{$index}}" name="userid" ng-model="$parent.selected"/></td>
<td>{{$index+1}}</td>
<!--ng-bind="list.name" 该指令将js中的数据绑定，js文件中存储的信息变化，会自动更新到html界面，无需额外操作 -->
<td ng-bind="list.name"></td>
<td ng-bind="list.gener"></td>
<td ng-bind="list.age"></td>
<td ng-bind="list.birthday"></td>
<td ng-bind="list.hobby"></td>
<td ng-bind="list.team"></td>
</tr>
<tr ng-cloak ng-if="total == 0">
<td colspan=8>没有查询到匹配的数据信息</td>
</tr>
</tbody>
</table>
<!-- 添加数据的界面-->
<div class="modal" id="add_item_modal">
<!--bootstrap的模态框（Modal）插件，默认是隐藏的-->
<div class="modal-dialog">
<div class="modal-content">
<!--bootstrap的模态框的标题-->
<div class="modal-header">
<button class="close" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span>
</button>
<h3 class="modal-title">添加信息</h3>
</div>
<!--bootstrap的模态框的主要内容-->
<div class="modal-body">
<span>姓名：</span>
<!-- ng-model 指令将input的数据和"add_name" 绑定，在js文件中可使用$scope.add_name获取到;将class赋值form-control可以使用bootstrap已经写好的样式-->
<input type="text" ng-model="add_name" class="form-control"><br>
<span>性别：</span>
<select name="" ng-model="add_gener" class="form-control">
<option value="男">男</option>
<option value="女">女</option>
<option value="其他" selected="selected">其他</option>
</select>
<span>年龄：</span>
<input type="number" ng-model="add_age" class="form-control" min="0" step="1"><br>
<span>生日：</span>
<input type="date" ng-model="add_birthday" class="form-control"><br>
<span>爱好：</span>
<input type="text" ng-model="add_hobby" class="form-control"><br>
<span>组别：</span>
<input type="text" ng-model="add_team" class="form-control"><br>
</div>
<!--bootstrap的模态框的按钮部分 -->
<div class="modal-footer">
<!-- 将class="btn btn-default" 可以直接使用bootstrap的现成组件-->
<!-- data-dismiss="modal" 是按钮触发后关闭的画面-->
<button class="btn btn-default" data-dismiss="modal">关闭</button>
<!-- ng-click="addItem()"是按钮触发后调用js文件中指定的函数-->
<button class="btn btn-success" ng-click="addItem()">确定</button>
</div>
</div>
</div>
</div>
<!--修改数据的界面，默认是隐藏的-->
<div class="modal" id="edit_item_modal" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span>
</button>
<h3 class="modal-title">修改信息</h3>
</div>
<div class="modal-body">
<span>姓名：</span>
<!--ng-model="edit_name" 将标签与js文件对应数据绑定，便签会自动显示js文件对应信息-->
<input type="text" ng-model="edit_name" class="form-control" value="{{edit_name}}"><br>
<span>性别：</span>
<select name="" ng-model="edit_gener" class="form-control" value="{{edit_gener}}">
<option value="男">男</option>
<option value="女">女</option>
<option value="其他">其他</option>
</select><br>
<span>年龄：</span>
<input type="number" ng-model="edit_age" class="form-control" value="{{edit_age}}" min="0" step="1"><br>
<span>生日：</span>
<input type="date" ng-model="edit_birthday" class="form-control" value="{{edit_birthday}}"><br>
<span>爱好：</span>
<input type="text" ng-model="edit_hobby" class="form-control" value="{{edit_hobby}}"><br>
<span>组别：</span>
<input type="text" ng-model="edit_team" class="form-control" value="{{edit_team}}"><br>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">关闭</button>
<button class="btn btn-success" ng-click="modifyItem()">确定</button>
</div>
</div>
</div>
</div>
</div>
以下是angularJS的主要代码：
(function(){
'use strict';
var myApp = angular.module('myApp', []);
//声明控制器“myCtrl”
myApp.controller("myCtrl",function($scope, $http){
//保持数据的数组对象
$scope.datas=[
{'name':"王1",'gener':"女",'age':18,'birthday':"2002-02-01",'hobby':"tennis,football",'team':"team1"},
{'name':"王2",'gener':"女",'age':18,'birthday':"2002-02-01",'hobby':"tennis,football",'team':"team1"},
{'name':"王3",'gener':"女",'age':18,'birthday':"2002-02-01",'hobby':"tennis,football",'team':"team1"},
{'name':"王4",'gener':"女",'age':18,'birthday':"2002-02-01",'hobby':"tennis,football",'team':"team1"},
{'name':"王5",'gener':"女",'age':18,'birthday':"2002-02-01",'hobby':"tennis,football",'team':"team1"},
{'name':"王6",'gener':"男",'age':28,'birthday':"2012-02-01",'hobby':"tennis,football",'team':"team2"}
];
$scope.index=$scope.datas.length-1;
//显示添加画面
$scope.showAddItemModal = function(){
//通过标签的 id 找到前面布局中隐藏的添加画面，并显示出来
$('#add_item_modal').modal('show');
}
//添加数据
$scope.addItem = function(){
var i = $scope.datas.length;
$scope.datas[i]={
//通过$scope获取html页面中提交的表单中的数据
name:$scope.add_name,
gener:$scope.add_gener,
age:$scope.add_age,
birthday:$scope.add_birthday,
hobby:$scope.add_hobby,
team:$scope.add_team,
};
$('#add_item_modal').modal('hide');
};
//显示修改画面
$scope.showEditItemModal = function(){
if(isNaN($scope.selected)){
alert("请选择要修改的项！")
}else{
$('#edit_item_modal').modal('show');
//此处的$scope.edit_name会将数据保存传给html界面，并可以通过表达式直接获取参数
$scope.edit_name = $scope.datas[$scope.selected].name;
$scope.edit_gener = $scope.datas[$scope.selected].gener;
$scope.edit_age = $scope.datas[$scope.selected].age;
$scope.edit_birthday = $scope.datas[$scope.selected].birthday;
$scope.edit_hobby = $scope.datas[$scope.selected].hobby;
$scope.edit_team = $scope.datas[$scope.selected].team;
}
};
//修改数据函数
$scope.modifyItem = function(){
$scope.datas[$scope.selected]={
name:$scope.edit_name,
//直接使用$scope.edit_gener 即可获取html界面上的数据
gener:$scope.edit_gener,
age:$scope.edit_age,
birthday:$scope.edit_birthday,
hobby:$scope.edit_hobby,
team:$scope.edit_team,
};
$('#edit_item_modal').modal('hide');
};
//删除所选项数据
$scope.delItem = function(){
if(isNaN($scope.selected) ){
alert("请选择要删除的项!");
}else{
if(confirm("是否删除?") ){
$scope.datas.splice($scope.selected,1);
}
}
};
});
}());
总结
- angularJS 的功能和很强大，这里只是使用的angularJS的双向数据绑定数据，它还有许多其他的优点，如模板，路由，模块化，服务，过滤器，依赖注入等等功能，以后还需要继续学习；
- 示例中用到了许多bootstrap的东西，bootstrap也是一个功能很强大的前端框架，他提供了丰富的布局模版以及精美的组件，使用起来也很方便，还是开源的。以后有机会可以单独写一篇文章。
- 由于项目需要，所以接触了一些关于前端的知识，现在也只是会做一些简单的界面，有很多原理还是不懂，将来想打算弄一个自己的网站，总会用的到。
