简介：AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。

一、AngularJS大致功能模块

二、页面交互变得简单

1、示例：计算价格

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <meta charset="utf-8">
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <title>示例</title>
</head>
<body>
    <div ng-app="" ng-init="quantity=1;price=5">
        <h2>价格计算器</h2>

        数量： <input type="number" ng-model="quantity">
        价格： <input type="number" ng-model="price">
        <p><b>总价：</b> {{ quantity * price }}</p>
    </div>
</body>
</html>

效果：

我感觉都没写js代码，就完成了一个计算逻辑！

2、示例：表单值不需要写js代码来获取json值

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <meta charset="utf-8">
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <title>示例</title>
</head>
<body>
    <div ng-app="myApp" ng-controller="formCtrl">
        <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>表单值 = {{user}}</p>
        <p>初始值 = {{inituser}}</p>
    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('formCtrl', function ($scope) {
            $scope.inituser = { firstName: "John", lastName: "Doe" };
            $scope.reset = function () {
                $scope.user = angular.copy($scope.inituser);
            };
            $scope.reset();
        });
    </script>
</body>
</html>

效果：

页面输入值改变，不需要重新取值，比如使用jquery，不使用angular，则需要这样取值：

var json={};
json.firstName=$("#firstName").val();
json.lastName=$("#lastName").val();

现在这样简单是方便了不止一点！

2、示例：绑定事件让代码变得更容易维护

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <meta charset="utf-8">
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <title>示例</title>
</head>
<body ng-app="myNoteApp" ng-controller="myNoteCtrl">
    <h2>我的笔记</h2>
    <textarea ng-model="message" cols="40" rows="10"></textarea>
    <p>
        <button ng-click="save()">保存</button>
        <button ng-click="clear()">清除</button>
    </p>

    <p>剩余字数: <span ng-bind="left()"></span></p>
    <script>
        var app = angular.module("myNoteApp", []);
        app.controller("myNoteCtrl", function ($scope) {
            $scope.message = "";
            $scope.left = function () { return 100 - $scope.message.length; };
            $scope.clear = function () { $scope.message = ""; };
            $scope.save = function () { alert("Note Saved"); };
        });
    </script>
</body>
</html>

效果：

这里的message字数改变，会触发修改剩余字数提示。

未使用angular时，我们会把这样改变绑定在message的change事件上，这样，要查剩余字数的代码，必须要想到是message的事件,类似这样：

$("#message").change(function({
    $("#leftwordcount").text(left());
});

现在是查到剩余字数对应span的ng-bind事件，就能知道是哪里实现了这个逻辑，更容易找到实现方法从而更加易于维护这种实现。

三、其他总结

比如我学习到angular的http部分,语法更加简单，只要传重要的参数就行，不用jquery http那么多选项，对于简单的数据请求更加易于使用：

$http.get(‘/someUrl’, config).then(successCallback, errorCallback);

$http.post(‘/someUrl’, data, config).then(successCallback, errorCallback);

当然，也可能是有些方法封装好了，参数减少，同时也不适用于复杂场景的处理，我觉得angular结合其他js框架的使用，才能达到一个相对完美的状态吧，一个框架肯定是不能满足所有使用需求的。不过多了解一个框架，就可能会在需要它的时候想起来用它。

附angular基础内容学习网址：http://www.runoob.com/angularjs/angularjs-tutorial.html

3天学习完AngularJS基础内容小结的更多相关文章

  1. C#学习笔记_01_基础内容

    01_基础内容 进(位)制 十进制:逢10进1,数字由0-9组成: 二进制:逢2进1,数字由0-1组成: 八进制:逢8进1,数字由0-7组成: 十六进制:逢16进1,数字由0-9和a-f组成: 进制转 ...

  2. 学习nodejs部分基础内容入门小结

    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境. Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效. Node.js 的包管理器 n ...

  3. 一篇学习完rabbitmq基础知识，springboot整合rabbitmq

    一   rabbitmq 介绍 MQ全称为Message Queue,即消息队列, RabbitMQ是由erlang语言开发,基于AMQP(Advanced MessageQueue 高级消息队列协议 ...

  4. JS基础内容小结（基础）（一）

    字符串的各类方法 str.charAt(1); 从第0个开始计算获取第一个子符串,如str=‘你好吗’获取到‘好’ str.charCodeAt(1); 获取对应字符串的编码数字:从第0个开始计算 S ...

  5. JS基础内容小结（event 鼠标键盘事件）（三）

    var ev=ev||event 兼容性处理 得到焦点为 onfocus 失去焦点 onblur return false能阻止部分函数的执行 obj.select 选择指定元素里的文本内容 ———— ...

  6. JS基础内容小结（DOM&&BOM）（二）

    元素.childNodes:只读 属性 子节点列表集合 元素.nodeType:只读 属性 当前元素下的节点类型 元素.attributes : 只读 属性 属性列表集合 元素.children: 只 ...

  7. Spark学习体系整理(基础篇、中级篇、高级篇所涉及内容)

    新手刚开始学习比较迷茫,参考下面,然后找相关资料学习 1 Spark基础篇      1.1 Spark生态和安装部署          在安装过程中,理解其基本操作步骤.          安装部署 ...

  8. （数据科学学习手札43）Plotly基础内容介绍

    一.简介 Plotly是一个非常著名且强大的开源数据可视化框架,它通过构建基于浏览器显示的web形式的可交互图表来展示信息,可创建多达数十种精美的图表和地图,本文就将以jupyter notebook ...

  9. （数据科学学习手札41）folium基础内容介绍

    一.简介 folium是js上著名的地理信息可视化库leaflet.js为Python提供的接口,通过它,我们可以通过在Python端编写代码操纵数据,来调用leaflet的相关功能,基于内建的osm ...

随机推荐

  1. c3p0连接不上sql server

    1.首先判断sqlserver是否安装成功 2如果sqlserver正常运行 可能是因为没有打开1433端口,按以下步骤设置tcp/ip enabled 打开之后再重新启动sql server服务,按 ...

  2. CodeForces - 451E Devu and Flowers (容斥+卢卡斯)

    题意:有N个盒子,每个盒子里有fi 朵花,求从这N个盒子中取s朵花的方案数.两种方法不同当且仅当两种方案里至少有一个盒子取出的花的数目不同. 分析:对 有k个盒子取出的数目超过了其中的花朵数,那么此时 ...

  3. sqlservr.exe占用大量内存

    SQL Server是如何使用内存 最大的开销一般是用于数据缓存,如果内存足够,它会把用过的数据和觉得你会用到的数据统统扔到内存中,直到内存不足的时候,才把命中率低的数据给清掉.所以一般我们在看sta ...

  4. SQL char Nvarchar 详解

    Nvarchar :  可变长度的 , Unicode 编码.  长度 1-4000,  1个汉子 或者 字符 都是 2个字节. 支持多语言, 配合 大写 N 可以防止出现乱码. char:   固定 ...

  5. NET中IL指令详解

    名称 说明 Add 将两个值相加并将结果推送到计算堆栈上. Add.Ovf 将两个整数相加,执行溢出检查,并且将结果推送到计算堆栈上. Add.Ovf.Un 将两个无符号整数值相加,执行溢出检查,并且 ...

  6. MySQL-5.7 游标及DECLARE

    1.cursor游标 用来声明一个数据集 游标的声明必须在变量和条件声明之后,在handler声明之前 游标特性: 不灵敏:服务器可以或不复制其结果 只读:不可更新 不可滚动的:只能在一个方向上遍历, ...

  7. Codeforces Round #448 (Div. 2) B

    题目描述有点小坑,ij其实是没有先后的 并且y并不一定存在于a中 判断y的个数和所给数组无关 对于2 - 7来说 中间满足%2==0的y一共有3个 2 4 6 这样 可以看出对于每个数字a 都能够二分 ...

  8. Substring with Concatenation of All Words, 返回字符串中包含字符串数组所有字符串元素连接而成的字串的位置

    问题描述:给定一个字符数组words,和字符串s,返回字符数组中所有字符元素组成的子串在字符串中的位置,要求所有的字符串数组里的元素只在字符串s中存在一次. 算法分析:这道题和strStr很类似.只不 ...

  9. SDWebImage支持URL不变时更新图片内容

    SDWebImage在iOS项目中是一个很常用的开源库,而且众所周知的是,它是基于URL作为Key来实现图片缓存机制的.在90%左右的情况下, 图片与URL是一一对应的,即使服务器修改了图片也会相应的 ...

  10. angular服务

    angular创建服务的五种方式:  factory() factory()方法是创建和配置服务的最快捷方式.factory()函数可以接受两个参数. name(字符串)需要注册的服务名. ge ...