angular初探

蚊子前端博客
发布于 2015-08-14 06:00
这几天刚刚学习了下angular,通过博客记录下学习的过程

AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

跟着教程学习了几天,给我的感觉就是:不用自己再显式的用js给DOM元素绑定事件,只需添加一个angular特有的字段即可;像是使用后端语言那样对DOM进行操作,比如循环输出数组中的元素;自己写一个控制器,就能对页面进行操作。

AngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为标识符(directives)的结构,让浏览器能够识别新的语法。例如:

  • 使用双大括号语法进行数据绑定;

  • 使用DOM控制结构来实现迭代或者隐藏DOM片段;

  • 支持表单和表单的验证;

  • 能将逻辑代码关联到相关的DOM元素上;

  • 能将HTML分组成可重用的组件。

1. AngularJS简介

AngularJS通过ng-directives扩展了HTML。

  • ng-app 指令定义一个 AngularJS 应用程序。ng-app指令标记了AngularJS脚本的作用域,在<html>中添加ng-app属性即说明整个都是AngularJS脚本作用域。开发者也可以在局部使用ng-app指令,如<div ng-app></div>,则AngularJS脚本仅在该div中运行。

  • ng-model 指令把元素值(比如输入域的值)绑定到应用程序。

  • ng-bind 指令把应用程序数据绑定到 HTML 视图。

1.1 一个简单的数据绑定

实时的实现输入框的值

COPYHTML

<!DOCTYPE html> <html lang="en" ng-app=''> <head> <meta charset="UTF-8"> <title>angular</title> </head> <body> <body> <input type="text" ng-model="username" > <p ng-bind="username"></p> </body> <script type="text/javascript" src="http://apps.bdimg.com/libs/angular.js/1.4.0-beta.4/angular.min.js"></script> </html>

在上面的程序中,实现了在输入框中输入一个值,能马上在p标签中显式出来。ng-mdel指令把输入域的值绑定到应用程序变量username,ng-bind指令把应用程序变量username绑定到某个段落(上面的p标签)的innerHTML上。

如果去掉html标签上的ng-app,则功能失效

1.2 一个简单的循环输出

在我们使用后端语言模板的时候,通常会使用循环输出一些类似的数据。angular也有这样的功能:

COPYHTML

<!DOCTYPE html> <html lang="en" ng-app=''> <head> <meta charset="UTF-8"> <title>angular</title> </head> <body> <body> <!-- 初始化数据 --> <div ng-init="data=[{name:'小明', age:20}, {name:'小红', age:18}, {name:'小强', age:22}]"> <ul> <!-- 对data进行循环输出 --> <li ng-repeat="item in data"> <p>name:{{ item.name }}</p> <p>age:{{ item.age }}</p> </li> </ul> </div> </body> <script type="text/javascript" src="http://apps.bdimg.com/libs/angular.js/1.4.0-beta.4/angular.min.js"></script> </html>

首先我们使用ng-init初始化一组数据data,然后使用ng-repeat对data进行循环输出。ng-repeat放在哪个标签上,就是对这个标签进行循环,这里循环的是li标签;其中的每一项就是item,然后可以通过item.nameitem.age输出name和age的值。

当然,还可以不使用ng-init初始化数据,直接对数组进行循环:

COPYHTML

<!DOCTYPE html> <html lang="en" ng-app=''> <head> <meta charset="UTF-8"> <title>angular</title> </head> <body> <body> <div> <ul> <!-- 对data进行循环输出 --> <li ng-repeat="item in [{name:'小明', age:20}, {name:'小红', age:18}, {name:'小强', age:22}]"> <p>name:{{ item.name }}</p> <p>age:{{ item.age }}</p> </li> </ul> </div> </body> <script type="text/javascript" src="http://apps.bdimg.com/libs/angular.js/1.4.0-beta.4/angular.min.js"></script> </html>

1.3 AngularJS过滤器

过滤器可以使用一个管道字符(|)添加到表达式和指令中。

AngularJS 过滤器可用于转换数据:

  • currency:格式化数字为货币格式;

  • filter:从数组项中选择一个子集;

  • lowercase:格式化字符串为小写;

  • orderBy:根据某个表达式排列数组;

  • uppercase:格式化字符串为大写

过滤器的简单使用:

COPYHTML

<div ng-app=""> <p>大写:{{ 'wenzi'|uppercase }}</p> <p>小写:{{ 'Country'|lowercase }}</p> <ul> <!-- 按照age排序输出data --> <li ng-repeat="item in [{name:'小明', age:20}, {name:'小红', age:18}, {name:'小强', age:22}] | orderBy:'age'"> <p>name:{{ item.name }}</p> <p>age:{{ item.age }}</p> </li> </ul> </div>

1.4 控制器

AngularJS 控制器 控制 AngularJS 应用程序的数据。ng-controller指令定义了应用程序控制器:

COPYHTML

<!DOCTYPE html> <html lang="en" ng-app='myApp'> <head> <meta charset="UTF-8"> <title>angular</title> </head> <body> <body> <!-- 控制器 --> <div ng-controller="Person"> <p>{{ name }}</p> <p>{{ age }}</p> <p>{{ male }}</p> </div> </body> <script type="text/javascript" src="http://apps.bdimg.com/libs/angular.js/1.4.0-beta.4/angular.min.js"></script> <script type="text/javascript"> var app = angular.module('myApp', []); // 定义Person控制器 app.controller('Person', function($scope){ $scope.name = 'wenzi'; $scope.age = 24; $scope.male = 'male'; }) </script> </html>

angular使用$scope对象来调用控制器,控制器的$scope用来保存angularJS model(模型)的对象。控制在作用域中创建了三个属性:name, age, male。

控制器中还可以添加方法:

COPYJAVASCRIPT

app.controller('Person', function($scope){ $scope.name = 'wenzi'; $scope.age = 24; $scope.male = 'male'; // 获取当前时间 $scope.getTime = function(){ return (new Date()).getTime(); } })

1.5 HTTP

angular中的$http是一个用于读取web服务器上数据的服务。$http.get(url)获取链接url中返回的数据:

COPYHTML

<div ng-controller='getJson'> <ul> <li ng-repeat="item in result"> <p>name:{{item.name}}</p> <p>age:{{item.age}}</p> <p>sex:{{item.sex}}</p> </li> </ul> </div> <script type="text/javascript"> var app = angular.module('myApp', []); // $http的用法跟$.ajax用法很相似 app.controller('getJson', function($scope, $http){ $http.get('./interface.php').success(function(data){ $scope.result = data; }) }) </script>

2. 为DOM添加属性

angular能通过ng-*为DOM添加属性,如:

指令说明
ng-disabled boolean 添加disabled属性
ng-showboolean显示HTML元素
ng-hideboolean隐藏HTML元素
ng-click定义angular点击事件

如下面的代码简单的介绍了这些指令的使用:

COPYHTML

<button ng-disabled="true">点击</button> <div ng-hide="true">要隐藏的元素</div>

现在我们来写个稍微有点复杂的程序:

{{ count }}

COPYHTML

<div ng-init="count=1;" ng-controller="toggleController"> <p> <button ng-click="count=count+1">点击+1</button> <button ng-click="toggle()">隐藏|显示</button> </p> <p ng-hide="myVar"> {{ count }} </p> </div> <script type="text/javascript"> var app = angular.module('myApp', []); app.controller('toggleController', function($scope){ $scope.myVar = false; $scope.toggle = function(){ $scope.myVar = !$scope.myVar; } }) </script>

3. 一个angular应用

学了一些东西,让我们来写一个小的web应用,能记录输入框的剩余字数,能获取和删除输入框的内容【查看演示】:

COPYHTML

<!DOCTYPE html> <html lang="en" ng-app='myApp'> <head> <meta charset="UTF-8"> <title>angular</title> </head> <body> <body> <div ng-init="" ng-controller="textController"> <p> 我的笔记 </p> <p> <textarea ng-model="message" cols="30" rows="10"></textarea> </p> <p> <button ng-click="save()">保存</button> <button ng-click="reset()">清除</button> </p> <p> 剩余字数:<span ng-bind="left()">100</span> </p> <p></p> </div> </body> <script type="text/javascript" src="http://apps.bdimg.com/libs/angular.js/1.4.0-beta.4/angular.min.js"></script> <script type="text/javascript"> var app = angular.module('myApp', []); app.controller('textController', function($scope){ $scope.message = ''; $scope.save = function(){ alert( $scope.message ); } $scope.left = function(){ return 100 - $scope.message.length; } $scope.reset = function(){ $scope.message = ''; } }) </script> </html>

标签:
阅读(360)

公众号:

qrcode

微信公众号:前端小茶馆

公众号:

qrcode

微信公众号:前端小茶馆