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

发布时间：2020-12-17 09:21:34 所属栏目：安全来源：网络整理

导读：简介：AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。一、AngularJS大致功能模块二、页面交互变得简单 1、示例：计算价格 html head meta name = "viewport" content = "width=device-width" / meta charset = "utf-8" script src =

简介：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,errorCallback);

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!