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.name，item.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>

标签：
阅读(434)

公众号：

qrcode

微信公众号：前端小茶馆

相关文章

Javascript中的定时器 (2015/01/02)
异步传输ajax (2012/12/13)
js事件在不同浏览器之间的差异 (2013/11/05)
js的数组问题 (2014/01/03)
javascript模块化编写 (2014/01/17)
对js闭包的一些理解 (2014/05/27)

公众号：

qrcode

微信公众号：前端小茶馆