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基础内容小结的主要内容,如果未能解决你的问题,请参考以下文章