3天学习完AngularJS基础内容小结-阿里云开发者社区

开发者社区> 真爱无限> 正文

3天学习完AngularJS基础内容小结

简介: 简介:AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。
+关注继续查看

简介: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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
AngularJS学习笔记1
简介   AngularJS 是一个为动态WEB应用设计的结构框架,提供给大家一种新的开发应用方式,这种方式可以让你扩展HTML的语法,以弥补在构建动态WEB应用时静态文本的不足,从而在web应用程序中使用HTML声明动态内容。
963 0
Nodejs基础:路径处理模块path总结
在nodejs中,path是个使用频率很高,但却让人又爱又恨的模块。部分因为文档说的不够清晰,部分因为接口的平台差异性。 将path的接口按照用途归类,仔细琢磨琢磨,也就没那么费解了。
3911 0
HaaS UI基础教学九:JSAPI应用包管理
Package JSAPI是HaaS UI提供的一个轻量级应用包管理接口,特别适用于管理小程序应用包的安装信息。
44 0
JavaWeb初识 认识jsp,基础配置
Servlet是Java代码包裹Html代码 JSP是Html代码包裹Java代码JSP就是一个Java类 例如index.jsp 编译后的文件夹名称就是 index_jsp.java 所以说jsp就是一个Java类,并不是想Html一样是个超文本传输或者是其他什么的JSP就是一个Servlet,jsp继承与Servlet,Servlet有的JSP他都有 JSP的转化过程是>>jsp.
860 0
JSP 杂项基础知识
1.JSP九大内置对象 2.建立JSP后,将PageEncoding改为ContentType  pageEncoding是jsp文件自身的编码方式,而contentType是服务器发给客户端时内容的编码 3.
649 0
+关注
真爱无限
主要技术.net sqlserver mysql。
302
文章
1
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载