3天学习完AngularJS基础内容小结
Posted 真爱无限
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了3天学习完AngularJS基础内容小结相关的知识，希望对你有一定的参考价值。
简介：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基础内容小结的主要内容，如果未能解决你的问题，请参考以下文章