通过jQuery的比较来认识AngularJS

这一章主要是通过几个例子分别通过jQuery和AngularJS来达到效果。主要通过思维转换来进一步了解AngularJS框架设计背后的思想。

注意: 1.为了不浪费界面时间,界面用到了bootstrap. 2.所有代码写在一个文件中，方便大家复制粘贴. 3.引入css和angularJS文件使用的是百度静态库,如果没有网络环境请自行下载引用依赖文件. 4.如果觉得看比较jquery和angularJS没有兴趣的,可以直接跳过,阅读下一章TodoList,这个列子是一步一步带大家完成熟悉angularJS编码思想

首先来看一个简单例子,大家可以直接复制粘贴代码,查看效果

用户输入

1.输入框输入值 2.下面h1标签马上有显示

下面是jquery代码

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>输入测试</title> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.1.1/css/bootstrap.css"> </head> <body> <form> <div class="form-group"> <label for="inputName" class="col-sm-2 control-label">名字:</label> <div class="col-sm-10"> <input type="text" id="inputName" class="form-control" placeholder="请输入你的名字"> </div> </div> <div class="col-sm-10 col-sm-offset-2"> <h1 id="myText"></h1> </div> </form> </body> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script> $(function(){ $('#inputName').on('keyup',function(){ $('#myText').html($(this).val()); }); }); </script> </html>

下面来看一下angularJS的代码

<!DOCTYPE html>
<html lang="en" ng-app> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.1.1/css/bootstrap.css"> </head> <body> <form> <div class="form-group"> <label for="inputName" class="col-sm-2 control-label">名字:</label> <div class="col-sm-10"> <input type="text" class="form-control" placeholder="请输入你的名字" ng-model="inputName"> </div> </div> <div class="col-sm-10 col-sm-offset-2"> <h1></h1> </div> </form> </body> <script src="http://apps.bdimg.com/libs/angular.js/1.2.9/angular.min.js"></script> </html>

通过这个简单例子可以很清楚的看到,angularJS都没有写任何的JS代码就实现了这个输入效果。这里可以简单总结 1.jquery是通过操作DOM来达到实现目的,换句话说,也就是必须要有了页面,再根据页面来进行相应的编程 2.angularJS主要关心的却是数据

购物车

注意上面两点理论,我们来看一下稍微复杂点的例子,做一个简单的购物车.依据angularJS主要关心的是数据的这个特点,我们首先来编写angularJS相关代码,具体效果如下:

<!DOCTYPE html>
<html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.1.1/css/bootstrap.css"> </head> <body> <div ng-controller="CartController" class="panel panel-primary"> <div class="panel-heading text-center"><h3>你的购物车</h1></div> <div class="panle-body"></div> <table class="table table-bordered table-hover"> <tr ng-repeat="item in items"> <td class="text-center"><span ng-bind="item.title"></span></td> <td class="text-center"> <input type="text" ng-model="item.quantity" class="form-control"> </td> <td class="text-center"><span></span></td> <td class="text-center"><span></span></td> <td> <button type="button" class="btn btn-primary" ng-click="del($index)"> 删除 </button> </td> </tr> <tr> <td colspan="4" class="text-center">总计</td> <td></td> </tr> </table> </div> </body> <script src="http://apps.bdimg.com/libs/angular.js/1.2.9/angular.min.js"></script> <script> var myApp = angular.module('myApp', []); myApp.controller('CartController', ['$scope', function($scope){ $scope.items = [ {title:'方便面',quantity:8,price:2.5}, {title:'可乐',quantity:18,price:3}, {title:'口香糖',quantity:12,price:4}, {title:'辣条',quantity:30,price:0.5} ]; $scope.total =total(); $scope.del = function(index){ $scope.items.splice(index,1); $scope.total = total(); } function total(){ var total = 0; $scope.items.forEach(function(item){ total += item.quantity * item.price; }); return total;

转载于:https://www.cnblogs.com/Zengc-33/p/6077338.html