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. jcmd命令实战
			
    继续来根据之前的那篇infoq的文章的介绍熟悉工具,上一次咱们学习使用了: 接下来学习它里面提到的另一个工具: jcmd是一个非常之强大的命令行工具,能输出很多很多的信息,也是在处理JVM的一些问题经 ...
    
			
    2. 
						
  2. JDBC课程1-实现Driver接口连接mysql数据库、通用的数据库连接方法（使用文件jdbc.properties）
			
    package day_18; import jdk.internal.util.xml.impl.Input; import org.junit.Test; import java.io.Input ...
    
			
    3. 
						
  3. DT6.0二次最后一次开发插件-手机端熊掌号定时提交
			
    今天写完这个,就是DT6.0最后开放的插件,因为群里的朋友需要,就写了一个适合DT6的手机端定时插件.不过个人还是喜欢7.0的版本,7.0的插件在上几期分享了,今天就不过多说了! 我这个是初成品,改善 ...
    
			
    4. 
						
  4. Javascript基础（1）
			
    1 Javascript介绍 1.1 js是一款运行在客户端的网页编程语言 1.2 组成部分 (1)ECMAScript:ECMAScript不是一门语言,而是一个标准.符合这个标准的比较常见的有:J ...
    
			
    5. 
						
  5. MySQL查询去重
			
    方法一: distinct select count(distinct CName) from Course 方法二: 使用分组 group by select count(1) from Cours ...
    
			
    6. 
						
  6. js中event.preventDefault()和 event.stopPropagation( )  方法详解
			
    event.preventDefault() 1.首先event.preventDefault()是通知浏览器不要执行与事件关联的默认动作,例如:  这里a标签的默认事件是跳转,这里我们告诉浏览器取消 ...
    
			
    7. 
						
  7. java线程中yield(),sleep(),wait()区别详解
			
    1.sleep() 使当前线程(即调用该方法的线程)暂停执行一段时间,让其他线程有机会继续执行,但它并不释放对象锁.也就是说如果有synchronized同步快,其他线程仍然不能访问共享数据.注意该方 ...
    
			
    8. 
						
  8. 011——C#创建ecxel文件（附教程）
			
    (一)参考文献:[C#]创建表格(.xlsx)的典型方法 (二)视频教程:https://v.qq.com/x/page/t30068qfex5.html (三)下载地址:https://downlo ...
    
			
    9. 
						
  9. Spring第四天
			
    顾问包装通知 通知(advice)是Spring中的一种比较简单的切面,只能将切面织入到目标类的所有方法中,而无法对指定方法进行增强 顾问(advisor)是Spring提供的另外一种切面,可以织入到 ...
    
			
    10. 
						
  10. 004_Python3 注释
			
    确保对模块, 函数, 方法和行内注释使用正确的风格 Python中的注释有单行注释和多行注释:Python中单行注释以 # 开头,例如::# 这是一个注释print("Hello, Worl ...
    
			
    11.