【AngularJS】—— 2 初识AngularJs(续)
前一篇了解了AngularJS的一些简单的使用,这里继续跟着w3c学习一下剩下的内容。
本篇根据w3cschool.cc继续学习AngularJS剩余的内容,包括:
1 事件
2 模块
3 表单
4 数据验证
5 bootstrap CSS风格
6 include包含其他页面
7 应用程序
8 参考手册
首先看一下html的事件
关于html的事件,文中给出了三个例子,点击、隐藏、显示。使用方法基本相同:
先看一下点击的例子,点击按钮后,会触发ng-click内的方法,进行累计加一:
<div ng-app="" ng-controller="myController">
<button ng-click="count = count + 1">点我!</button>
<p>{{ count }}</p>
</div>
对于ng-hide和ng-show原理相同,都是指定一个bool值,true或false。
初始的时候myVar的值为false,因此并不隐藏,每次点击myVar都会改变为相反的值,达到现实隐藏的效果。
<div ng-app="" ng-controller="personController">
<button ng-click="toggle()">隐藏/显示</button>
<p ng-hide="myVar">
名: <input type="text" ng-model="person.firstName"><br>
姓: <input type="text" ng-model="person.lastName"><br>
<br>
姓名: {{person.firstName + " " + person.lastName}}
</p>
</div>
<script>
function personController($scope) {
$scope.person = {
firstName: "John",
lastName: "Doe"
};
$scope.myVar = false;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
};
}
</script>
ng-show使用方法也相同
<div ng-app="" ng-controller="personController">
<button ng-click="toggle()">隐藏/显示</button>
<p ng-show="myVar">
名: <input type="text" ng-model="person.firstName"><br>
姓: <input type="text" ng-model="person.lastName"><br>
<br>
姓名: {{person.firstName + " " + person.lastName}}
</p>
</div>
<script>
function personController($scope) {
$scope.person = {
firstName: "John",
lastName: "Doe"
};
$scope.myVar = true;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
};
}
</script>
关于AngularJS的模块
模块定义了用户的应用,所有的控制器属于一个模块。之前使用的ng-app就是模块的定义。
例如下面的代码,定义了一个应用程序的模块myApp,并定义了一个控制器myCtrl:
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script src="//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js"></script>
<script src="myApp.js"></script>
<script src="myCtrl.js"></script>
</body>
对于控制器,也可以通过模块来定义声明:
<head>
<script src="//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
</body>
不过要提前加载angularjs的脚本,这样再script中 angular.module才可以使用。或者在这句话的前面加载js。
关于AngularJS表单
表单是web中重要的组成部分,如下面样例所示,可以很方便的获取到form中的数据
<div ng-app="" ng-controller="formController">
<form novalidate>
First Name:<br>
<input type="text" ng-model="user.firstName"><br>
Last Name:<br>
<input type="text" ng-model="user.lastName">
<br><br>
<button ng-click="reset()">RESET</button>
</form>
<p>form = {{user}}</p>
<p>master = {{master}}</p>
</div>
<script>
function formController ($scope) {
$scope.master = {firstName: "John", lastName: "Doe"};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
};
</script>
关于验证
AngularJS提供了很多验证机制,例如邮箱等。
<!DOCTYPE html>
<html>
<body>
<h2>Validation Example</h2>
<form ng-app="" ng-controller="validateCtrl"
name="myForm" novalidate>
<p>Username:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is required.</span>
</span>
</p>
<p>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
<script src="//apps.bdimg.com/libs/angular.js/1.2.15/angular.min.js"></script>
<script>
function validateCtrl($scope) {
$scope.user = 'John Doe';
$scope.email = 'john.doe@gmail.com';
}
</script>
</body>
</html>
可以通过.$dirty .$invalid来验证。
添加bootstrap样式
可以首先加载bootstrap css文件
<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">
样例代码参考:
<!DOCTYPE html>
<html ang-app="">
<head>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-controller="userController">
<div class="container">
<h3>Users</h3>
<table class="table table-striped">
<thead><tr>
<th>Edit</th>
<th>First Name</th>
<th>Last Name</th>
</tr></thead>
<tbody><tr ng-repeat="user in users">
<td>
<button class="btn" ng-click="editUser(user.id)">
<span class="glyphicon glyphicon-pencil"></span> Edit
</button>
</td>
<td>{{ user.fName }}</td>
<td>{{ user.lName }}</td>
</tr></tbody>
</table>
<hr>
<button class="btn btn-success" ng-click="editUser('new')">
<span class="glyphicon glyphicon-user"></span> Create New User
</button>
<hr>
<h3 ng-show="edit">Create New User:</h3>
<h3 ng-hide="edit">Edit User:</h3>
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">First Name:</label>
<div class="col-sm-10">
<input type="text" ng-model="fName" ng-disabled="!edit" placeholder="First Name">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Last Name:</label>
<div class="col-sm-10">
<input type="text" ng-model="lName" ng-disabled="!edit" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Password:</label>
<div class="col-sm-10">
<input type="password" ng-model="passw1" placeholder="Password">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Repeat:</label>
<div class="col-sm-10">
<input type="password" ng-model="passw2" placeholder="Repeat Password">
</div>
</div>
</form>
<hr>
<button class="btn btn-success" ng-disabled="error || incomplete">
<span class="glyphicon glyphicon-save"></span> Save Changes
</button>
</div>
<script src = "http://apps.bdimg.com/libs/angular.js/1.2.15/angular.min.js"></script>
<script src = "myUsers.js"></script>
</body>
</html>
关于include包含其他html
可以通过ng-include来包含其他的web页面:
<body>
<div class="container">
<div ng-include="'myUsers_List.htm'"></div>
<div ng-include="'myUsers_Form.htm'"></div>
</div>
</body>
关于应用程序
创建AngularJS应用程序
<div ng-app="myTodoApp" ng-controller="myTodoCtrl">
<h2>我的笔记</h2>
<p><textarea ng-model="message" cols="40" rows="10"></textarea></p>
<p>
<button ng-click="save()">保存</button>
<button ng-click="clear()">清除</button>
</p>
<p>剩下的字符数:<span ng-bind="left()"></span></p>
</div>
<script src="myTodoApp.js"></script>
<script src="myTodoCtrl.js"></script>
最后是Angular的指定 过滤器参考
ng_app 定义应用程序
ng_bind 绑定数据
ng_click 定义元素单击行为
ng_controller 定义控制器对象
ng_disabled 定义html标签可用
ng_init 初始化数据
ng_model 绑定应用程序数据
ng_repeat 实现循环
ng_show 显示html标签
currency 转换成货币
filter 从数组中选择一个子集
lowercase 格式化字符串为小写
uppercase 格式化字符串为大写
orderBy 排序
- 基于 xorm 的服务端框架 XGoServer
- 全面总结: Golang 调用 C/C++,例子式教程
- 架构之路(六):把框架拉出来
- 第二届游戏运营技术论坛——云时代的游戏运营之道
- 如何才能准确测量 APP 的功耗?
- 可用性更高:设计优秀的MySQL和Percona XtraDB集群
- 如何使用scikit-learn在Python中生成测试数据集
- OpenStack Neutron之持续测试
- 干货丨 用 Python 进行股票分析
- 小故事:架构师需要做什么?
- 浅谈用Python计算文本BLEU分数
- Fourinone如何实现并行计算和数据库引擎
- 在Python中用一个长短期记忆网络来演示记忆
- CDA数据分析师学习之路第3期 | Spark RDD的转换操作举例
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 一个PHP高性能、多并发、restful的工具库(基于multi_curl)
- Spring框架的设计模式
- 最全Kafka 设计与原理详解【2017.9全新】
- 【数学建模】模拟退火算法介绍及实现
- Proxy系统架构升级
- Kafka快速上手(2017.9官方翻译)
- 【动手学深度学习笔记】之Pytorch实现线性回归
- 【动手学深度学习笔记】之softmax回归
- 一文全面梳理各种锁机制
- 【动手学深度学习笔记】之图像分类数据集(Fashion-MNIST)
- 探讨缓存行与伪共享
- Stream 流解读
- 3 分钟生成一个单元测试报告,这个样式爱了
- 使用pymouse模块时候报错No module named 'windows'
- GO用内置包写爬虫