前一篇了解了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>&nbsp;&nbsp;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 排序

【AngularJS】—— 2 初识AngularJs(续)的更多相关文章

  1. AngularJs(Part 9)--AngularJS 表单

    AngularJS 表单     AngularJS使用了MVX的结构,我们可以是传统的表单更加强大.比如过去我们得自己写一大堆验证,比过过去我们得自己转换用户的输入, 现在这些工作全部可以交给Ang ...

  2. 【js类库AngularJs】学习angularJs的指令(包括常见表单验证,隐藏等功能)

    [js类库AngularJs]学习angularJs的指令(包括常见表单验证,隐藏等功能) AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀 ...

  3. 初识AngularJS 之 HelloWorld和数据绑定

    1.Hello World 我用的开发工具是   atom   ,大家有需要的话可以找我要安装包嘻嘻 第一步: 写入以下代码: <!DOCTYPE html> <html ng-ap ...

  4. 我的angularjs源码学习之旅1——初识angularjs

    angular诞生有好几年光景了,有Google公司的支持版本更新还是比较快,从一开始就是一个热门技术,但是本人近期才开始接触到.只能感慨自己学习起点有点晚了.只能是加倍努力赶上技术前线. 因为有分析 ...

  5. 前端 初识angularJS的基本概念

    DEMO1演示地址:http://webenh.chinacloudsites.cn/default/demo1   今天在这里分享分享我个人学习angular的知识点总结.在还没有接触到angula ...

  6. 【AngularJS】—— 1 初识AngularJs

    怀着激动与忐忑的心情,开始了学习AngularJS的旅程,很久之前就听说了这个前端框架,但是由于自己一直没有从事相关的工作,因此也没有进行学习.这次正好学习AngularJS,直接复习一下前端的知识. ...

  7. AngularJS学习-初识

    angularJS定义和特点 1.google前端开源框架 2.MVVM(model view view-model)设计模式 : Model将和ViewModel互动(通过$scope对象),将监听 ...

  8. 初识angularJS的基本概念

    今天在这里分享分享我个人学习angular的知识点总结.在还没有接触到angular的时候,还真的不知道它到底有什么作用,直到我开始学习它,并且运用到它的时候,才知道angular这么强大.作为一个前 ...

  9. 第一章-初识AngularJS

    完全使用javascript编写的客户端技术.同其他历史悠久的Web技术配合使用,使Web应用开发比以往更简单,更快捷. Angularjs主要用于构建单页面Web应该.它通过增加开发人员和常见Web ...

随机推荐

  1. NAT功能的研究

    通俗的话:现在大部分的家用路由器都是这个功能,一个公网IP的拨号网络,然后地下全部电脑都可以用这个IP上网,进行数据转发,这就是NAT. 参考:http://baike.baidu.com/link? ...

  2. Diccuz!NT的dll版本号控制技巧

    dnt每次发布新版本时,公布出来的版本号都是3位数以上,拿3.6.711这个版本号的代码来说,几乎每一个dll上都是统一的版本号命名: 对于一个成熟的产品来说,统一一致的版本号命名有以下的好处: 1. ...

  3. Bzoj2007 [Noi2010]海拔

    Time Limit: 20 Sec  Memory Limit: 552 MB Submit: 2380  Solved: 1130 Description YT市是一个规划良好的城市,城市被东西向 ...

  4. ecshop /includes/modules/payment/alipay.php SQL Injection Vul

    catalog . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 ECSHOP支付插件存在SQL注入漏洞,此漏洞存在于/includes/ ...

  5. 感受身边app

    第一款:高考小秘书.http://www.liqucn.com/rj/519571.shtml.下载链接.我认为产品最大的优势在于对高考生非常有利,实用价值大,对于每年的高考生来说,高考资讯和大学资讯 ...

  6. ApkTool反编译apk,去除广告或者汉化后重新打包apk,并签名

    http://my.oschina.net/mopidick/blog/135581 以ubuntu的环境为例子,window的大同小异 首先下载apktool工具:https://code.goog ...

  7. javascript 代码可读性

    可读性的大部分内容都是和代码缩进相关的,必须保证代码有良好的格式.可读性的另一方面就是注释,一般而言,有如下一些地方需要进行注释 1.1.1 函数和方法 每个函数或方法都应该包含一个注释,描述其目的和 ...

  8. geoip2 domain

    DatabaseReader cityReader = GeoIP2Utils.getCityReader(); InetAddress inetAddress = InetAddress.getBy ...

  9. kaili camera

    #lsusb #dmesg | grep uvc #apt-get install guvcview cheese

  10. iocp还是select

    上一个项目libevent应该是select,现在libuv是iocp,都知道Windows下iocp比select效率高,boost asio 也是iocp,但具体使用select和iocp发现没有 ...