AngularJS

1)什么是AngularJS

AngularJS 简介

AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。

AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。

AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。

  • AngularJS 把应用程序数据绑定到 HTML 元素。
  • AngularJS 可以克隆和重复 HTML 元素。
  • AngularJS 可以隐藏和显示 HTML 元素。
  • AngularJS 可以在 HTML 元素"背后"添加代码。
  • AngularJS 支持输入验证。

2)AngularJS有什么用怎么用

AngularJS 扩展了 HTML

AngularJS 通过 ng-directives 扩展了 HTML。

ng-app 指令定义一个 AngularJS 应用程序。

ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

ng-bind 指令把应用程序数据绑定到 HTML 视图。

3）AngularJS在哪里使用

在开页面程序时可以使用就是说在Html 就可以使用

AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易

那下面一起来看一个简单案例

1.用JetBrains WebStorm 新建一个项目

这样就新建好了一个项目

新建一个js文件夹

新建一个html页面

建好了文件，就去AngularJs 官网下 js文件

AngularJS中文官网：http://www.angularjs.net.cn/

下载好将放在js文件中

引用AngularJS

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Angular购物车</title>

</head>

<script src="http://code.angularjs.org/1.2.25/angular.min.js"></script><!--这个是引用网络资源-->

<!--<script src="js/angular.min.js"></script>--><!--当然也可以用本地的-->

</body>

</html>

在Html页面编写根元素和控制器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Angular购物车</title>

</head>

<!--定义了一个名为shop根元素和一个名为shopping的控制器-->

<div ng-app="shop" ng-controller="shopping">

</div>

<script src="http://code.angularjs.org/1.2.25/angular.min.js"></script><!--这个是引用网络资源-->

<!--<script src="js/angular.min.js"></script>--><!--当然也可以用本地的-->

<script type="text/javascript">

    var app=angular.module('shop',[]);

    //使用$scope 对象来调用控制器， $scope 是一个应用对象(属于应用变量和函数)

    //控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象

    app.controller('shopping',function ($scope) {

    })

</script>

</body>

</html>

AngularJS 控制器(Controllers)

在Angular中，控制器就像 JavaScript 中的构造函数一般，是用来增强 Angular作用域(scope) 的。

当一个控制器通过 ng-controller 指令被添加到DOM中时，ng 会调用该控制器的构造函数来生成一个控制器对象，这样，就创建了一个新的子级 作用域(scope)。在这个构造函数中，作用域(scope)会作为$scope参数注入其中，并允许用户代码访问它。

一般情况下，我们使用控制器做两件事：

  • 初始化 $scope 对象
  • 为 $scope 对象添加行为（方法）

正确使用控制器

通常情况下，控制器不应被赋予太多的责任和义务，它只需要负责一个单一视图所需的业务逻辑。

最常见的保持控制器“纯度”的方法是将那些不属于控制器的逻辑都封装到服务（services）中，然后在控制器中通过依赖注入调用相关服务。详见指南中的 依赖注入 服务 这两部分。

注意，下面的场合千万不要用控制器：

  • 任何形式的DOM操作：控制器只应该包含业务逻辑。DOM操作则属于应用程序的表现层逻辑操作，向来以测试难度之高闻名于业界。把任何表现层的逻辑放到控制器中将会大大增加业务逻辑的测试难度。ng 提供数据绑定 （数据绑定） 来实现自动化的DOM操作。如果需要手动进行DOM操作，那么最好将表现层的逻辑封装在 指令 中
  • 格式化输入：使用 angular表单控件 代替
  • 过滤输出：使用 angular过滤器 代替
  • 在控制器间复用有状态或无状态的代码：使用angular服务 代替
  • 管理其它部件的生命周期（如手动创建 service 实例）

总结

　　1、AngularJS 应用程序由 ng-app 定义。应用程序在 <div> 内运行。

　　2、ng-controller="shopping" 属性是一个 AngularJS 指令。用于定义一个控制器。

　　3、shopping函数是一个 JavaScript 函数。

　　4、AngularJS 使用$scope 对象来调用控制器。

　　5、在 AngularJS 中， $scope 是一个应用对象(属于应用变量和函数)。

　　6、控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。

添加数据



app.controller('shopping',function ($scope) {
    //往控制器里添加products属性
    $scope.products=[
        {sid:1,shopsname:'红楼梦',shopsnum:1,shopprice:9.9},
        {sid:2,shopsname:'三国演义',shopsnum:1,shopprice:99.9},
        {sid:3,shopsname:'西游记',shopsnum:1,shopprice:999.9},
        {sid:4,shopsname:'水浒传',shopsnum:1,shopprice:9999.9},
        {sid:5,shopsname:'史记',shopsnum:1,shopprice:99999.9}];
})


 




数据的宣染




<div ng-app="shop" ng-controller="shopping">

    <table border="1" cellspacing="0" cellpadding="0" width="100%">

        <caption style="font-size: 28px;">Angular</caption>

        <tr><th>序号</th><th>名称</th><th>单价</th><th>数量</th><th>小计</th><th>操作</th></tr>

        <tr ng-repeat="item in products">

            <td>{{$index+1}}</td>

            <td>{{item.shopsname}}</td>

            <td>{{item.shopprice}}</td>

            <td>{{item.shopsnum}}</td>

            <!--计算后保留后两位小数-->

            <td>{{(item.shopsnum*item.shopprice).toFixed(2)}}</td>

            <td><a href="#">删除</a></td>

        </tr>

    </table>

</div>




宣染效果




添加增加减少按钮




<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Angular购物车</title>

</head>

<body>

<!--定义了一个名为shop根元素和一个名为shopping的控制器-->

<div ng-app="shop" ng-controller="shopping">

    <table border="1" cellspacing="0" cellpadding="0" width="100%">

        <caption style="font-size: 28px;">Angular</caption>

        <tr><th>序号</th><th>名称</th><th>单价</th><th>数量</th><th>小计</th><th>操作</th></tr>

        <tr ng-repeat="item in products">

            <td>{{$index+1}}</td>

            <td>{{item.shopsname}}</td>

            <td>{{item.shopprice}}</td>

            <td>

                <!--增加两个按钮，调用控制器里的函数方法-->

                <button ng-click="reducesum($index)">-</button>

                <input type="text" ng-model="item.shopsnum">

                <button ng-click="addsum($index)">+</button>

            </td>

            <!--计算后保留后两位小数-->

            <td>{{(item.shopsnum*item.shopprice).toFixed(2)}}</td>

            <td><a href="#">删除</a></td>

        </tr>

    </table>

</div>

<script src="http://code.angularjs.org/1.2.25/angular.min.js"></script>

<script type="text/javascript">

    var app=angular.module('shop',[]);

    //使用$scope 对象来调用控制器， $scope 是一个应用对象(属于应用变量和函数)

    //控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象

    app.controller('shopping',function ($scope) {

        //往控制器里添加products属性

        $scope.products=[

            {sid:1,shopsname:'红楼梦',shopsnum:1,shopprice:9.9},

            {sid:2,shopsname:'三国演义',shopsnum:1,shopprice:99.9},

            {sid:3,shopsname:'西游记',shopsnum:1,shopprice:999.9},

            {sid:4,shopsname:'水浒传',shopsnum:1,shopprice:9999.9},

            {sid:5,shopsname:'史记',shopsnum:1,shopprice:99999.9}];

        //增加数量

        $scope.addsum=function (i) {

            return $scope.products[i].shopsnum++;

        };

        //减少数量

        $scope.reducesum=function (i) {

            //找到products里面对应的shopsnum进行判断

            if($scope.products[i].shopsnum>=2){

                return $scope.products[i].shopsnum--;

            }else{

                alert("已经最少了！");

            }

        };

    });

</script>

</body>

</html> 




结果：




计算合计


table里面追加：




<tr>

   <td colspan="6" align="right" style="padding: 0px 50px;">合计：<span ng-bind="total()"></span></td>

</tr>




控制器里面追加：




//计算总数

 $scope.total=function(){

   var priceAll = 0;

   for(var i= 0;i<$scope.products.length;i++){

       priceAll+=$scope.products[i].shopprice*$scope.products[i].shopsnum;

   }

   return priceAll.toFixed(2);

 }; 




结果：




删除一行数据




 <td><a href="#" ng-click="remove($index)">删除</a></td>




控制器添加：




//删除

        $scope.remove=function(index){

            if(confirm('确定要删除吗？')){

                alert("删除成功！");

                $scope.products.splice(index,1);

            }

        };








页面添加css




<style type="text/css">

        table{

            text-align: center;

        }

        tr{

            height: 40px;

            line-height: 40px;

        }

        tr:hover{

            background: #eeeeee;

        }

        input{

            background: transparent;

            width: 40px;

            height: 20px;

            line-height: 20px;

            padding: 0;

            border:none;

            outline:none;

            border-top: 1px solid gray;

            border-bottom: 1px solid gray;

            text-align: center;

        }

        button{

            width: 20px;

            height: 22px;

            border: 1px solid gray;

            border-left: none;

            cursor: pointer;

            outline:none;

            margin-left: -4px;

        }

        #reduce{

            border-right: none;

            border-left:1px solid gray;

            margin-right: -5px;

        }

        span{

            color: red;

            font-size: 22px;

        }

        a{

            text-decoration: none;

            column-rule: blue;

        }

    </style>




结果：


完整源码：






<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Angular购物车</title>

    <style type="text/css">

        table{

            text-align: center;

        }

        tr{

            height: 40px;

            line-height: 40px;

        }

        tr:hover{

            background: #eeeeee;

        }

        input{

            background: transparent;

            width: 40px;

            height: 20px;

            line-height: 20px;

            padding: 0;

            border:none;

            outline:none;

            border-top: 1px solid gray;

            border-bottom: 1px solid gray;

            text-align: center;

        }

        button{

            width: 20px;

            height: 22px;

            border: 1px solid gray;

            border-left: none;

            cursor: pointer;

            outline:none;

            margin-left: -4px;

        }

        #reduce{

            border-right: none;

            border-left:1px solid gray;

            margin-right: -5px;

        }

        span{

            color: red;

            font-size: 22px;

        }

        a{

            text-decoration: none;

            column-rule: blue;

        }

    </style>

</head>

<body>

<!--定义了一个名为shop根元素和一个名为shopping的控制器-->

<div ng-app="shop" ng-controller="shopping">

    <table border="1" cellspacing="0" cellpadding="0" width="100%">

        <caption style="font-size: 28px;">Angular</caption>

        <tr><th>序号</th><th>名称</th><th>单价</th><th>数量</th><th>小计</th><th>操作</th></tr>

        <tr ng-repeat="item in products">

            <td>{{$index+1}}</td>

            <td>{{item.shopsname}}</td>

            <td>{{item.shopprice}}</td>

            <td>

                <!--增加两个按钮，调用控制器里的函数方法-->

                <button ng-click="reducesum($index)">-</button>

                <input type="text" ng-model="item.shopsnum">

                <button ng-click="addsum($index)">+</button>

            </td>

            <!--计算后保留后两位小数-->

            <td>{{(item.shopsnum*item.shopprice).toFixed(2)}}</td>

            <td><a href="#" ng-click="remove($index)">删除</a></td>

        </tr>

        <tr>

            <td colspan="6" align="right" style="padding: 0px 50px;">合计：<span ng-bind="total()"></span></td>

        </tr>

    </table>

</div>

<script src="http://code.angularjs.org/1.2.25/angular.min.js"></script>

<script type="text/javascript">

    var app=angular.module('shop',[]);

    //使用$scope 对象来调用控制器， $scope 是一个应用对象(属于应用变量和函数)

    //控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象

    app.controller('shopping',function ($scope) {

        //往控制器里添加products属性

        $scope.products=[

            {sid:1,shopsname:'红楼梦',shopsnum:1,shopprice:9.9},

            {sid:2,shopsname:'三国演义',shopsnum:1,shopprice:99.9},

            {sid:3,shopsname:'西游记',shopsnum:1,shopprice:999.9},

            {sid:4,shopsname:'水浒传',shopsnum:1,shopprice:9999.9},

            {sid:5,shopsname:'史记',shopsnum:1,shopprice:99999.9}];

        //增加数量

        $scope.addsum=function (i) {

            return $scope.products[i].shopsnum++;

        };

        //减少数量

        $scope.reducesum=function (i) {

            //找到products里面对应的shopsnum进行判断

            if($scope.products[i].shopsnum>=2){

                return $scope.products[i].shopsnum--;

            }else{

                alert("已经最少了！");

            }

        };

        //计算总数

        $scope.total=function(){

            var priceAll = 0;

            for(var i= 0;i<$scope.products.length;i++){

                priceAll+=$scope.products[i].shopprice*$scope.products[i].shopsnum;

            }

            return priceAll.toFixed(2);

        };

        //删除

        $scope.remove=function(index){

            if(confirm('确定要删除吗？')){

                alert("删除成功！");

                $scope.products.splice(index,1);

            }

        };

    });

</script>

</body>

</html>






 
												


											
Angular实现简单数据计算与删除的更多相关文章
	

    
								
  1. 3.2 配置构建Angular应用——简单的笔记存储应用
		
    本节我们会通过构建一个简单的笔记存储应用(可以载入并修改一组简单的笔记)来学习如何应用Angular的特性.这个应用用到的特性有: 在JSON文件中存储笔记 展示.创建.修改和删除笔记 在笔记中使用M ...
    
		
    2. 
						
  2. 3.2.1 配置构建Angular应用——简单的笔记存储应用——编辑功能
		
    本节我们会接着上节课的内容,继续来完成使用Angular来创建简单的笔记存储应用,上一节课,我们完成了笔记的展示功能,本节课,我们来完成编辑功能. 编辑主要是两个功能:编辑现有的笔记以及创建新笔记.首 ...
    
		
    3. 
						
  3. 3.2.1 配置构建Angular应用——简单的笔记存储应用——展示功能
		
    本节我们会通过构建一个简单的笔记存储应用(可以载入并修改一组简单的笔记)来学习如何应用Angular的特性.这个应用用到的特性有: 在JSON文件中存储笔记 展示.创建.修改和删除笔记 在笔记中使用M ...
    
		
    4. 
						
  4. 大数据计算平台Spark内核解读
		
    1.Spark介绍 Spark是起源于美国加州大学伯克利分校AMPLab的大数据计算平台,在2010年开源,目前是Apache软件基金会的顶级项目.随着 Spark在大数据计算领域的暂露头角,越来越多 ...
    
		
    5. 
						
  5. 大数据计算：如何仅用1.5KB内存为十亿对象计数
		
    大数据计算:如何仅用1.5KB内存为十亿对象计数  Big Data Counting: How To Count A Billion Distinct Objects Using Only 1.5K ...
    
		
    6. 
						
  6. Octave Tutorial（《Machine Learning》）之第三课《数据计算》
		
    第三课 Culculating Data 数据计算 矩阵计算 1.简单的四则运算 2.相乘除,乘方运算(元素位运算) ".*"为对应元素的相乘计算 "./"为对 ...
    
		
    7. 
						
  7. 阿里云大数据计算服务 - MaxCompute (原名 ODPS)
		
    MaxCompute 是阿里EB级计算平台,经过十年磨砺,它成为阿里巴巴集团数据中台的计算核心和阿里云大数据的基础服务.去年MaxCompute 做了哪些工作,这些工作背后的原因是什么?大数据市场进入 ...
    
		
    8. 
						
  8. 大数据计算平台Spark内核全面解读
		
    1.Spark介绍 Spark是起源于美国加州大学伯克利分校AMPLab的大数据计算平台,在2010年开源,目前是Apache软件基金会的顶级项目.随着Spark在大数据计算领域的暂露头角,越来越多的 ...
    
		
    9. 
						
  9. MepReduce-开启大数据计算之门
		
    Hadoop MapReduce是一种编程模型,用于大规模数据集(大于1TB)的并行运算.早期的MapReduce(MR)框架简单明了,JobTracker作为MR框架的集中处理点,随着分布式系统集群 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 第八届蓝桥杯C/C++程序设计本科B组决赛 ——发现环(编程大题_签到题_tarjan判环)
			
    标题:发现环 小明的实验室有N台电脑,编号1~N.原本这N台电脑之间有N-1条数据链接相连,恰好构成一个树形网络.在树形网络上,任意两台电脑之间有唯一的路径相连. 不过在最近一次维护网络时,管理员误操 ...
    
			
    2. 
						
  2. 【二叉搜索树】PAT-天梯赛- L2-004. 这是二叉搜索树吗？
			
    大致题意: 一棵二叉搜索树可被递归地定义为具有下列性质的二叉树:对于任一结点,    其左子树中所有结点的键值小于该结点的键值:    其右子树中所有结点的键值大于等于该结点的键值:    其左右子树 ...
    
			
    3. 
						
  3. yum用法笔记
			
    yum是指通过linux系统的一个命令也是一个软件包管理工具,基于rpm管理,通过命令下载指定网站的包源,下载好之后自动解压和分配 下载yum:一般linux的服务器在出厂前都自带yum,包括虚拟机  ...
    
			
    4. 
						
  4. 1122  django属性操作orm字段数据操作
			
    目录 1. 静态文件的配置 手动静态文件的访问资源 静态文件的动态绑定 2.request方法 2.1 请求方式 2.2 获取前端的请求方式 request.method 2.3 request方法  ...
    
			
    5. 
						
  5. 前端学习笔记--CSS样式--文本
			
    1.文本与文字样式主要的属性: 子标签可以继承父标签的样式: 关于颜色: 文本属性: letter-spacing: line-height: text-align: 字体:
    
			
    6. 
						
  6. flask中使用ajax 处理前端请求 弹框展示
			
    菜小鱼初次使用 ajax,想前端提交数据,后端处理后,将结果以弹框的形式展示,在网上查看了好多,不停的调试,终于调通了 html: <html> <head></head ...
    
			
    7. 
						
  7. element-ui 限制只能输入number
			
    element-ui <el-form-item label="大于等于:"> <el-input @keyup.native="number" ...
    
			
    8. 
						
  8. ES6遍历器 生成器 学习整理
			
    遍历器[迭代器](Iterator) 就是这样一种机制.它是一种接口,为各种不同的数据结构提供统一的访问机制.任何数据结构只要部署 Iterator 接口,就可以完成遍历操作(即依次处理该数据结构的所 ...
    
			
    9. 
						
  9. SIGAI机器学习第十五集 支持向量机2
			
    讲授线性分类器,分类间隔,线性可分的支持向量机原问题与对偶问题,线性不可分的支持向量机原问题与对偶问题,核映射与核函数,多分类问题,libsvm的使用,实际应用 大纲: SVM求解面临的问题 SMO算 ...
    
			
    10. 
						
  10. 后台（一）vue+element-ui （按需加载）
			
    vue init webpack    项目名称 npm install axios                    //先安装! npm install --save axios vue-ax ...
    
			
    11.