Angular JS

原创 2015年07月09日 22:56:55

例子1: 在输入框中输入信息并动态显示出来:展示它的功能:数据绑定

<input type="text" ng-app ng-model="name">
hi:{{name}} 

例子2:

<div ng-app ng-controller="hi">
       {{one}}
</div>  

<script type="text/javascript">
   function hi($scope){
    $scope.one='你好';
     }
</script>    

例子3:创建一个模块(创建控制器)

注意点1:使用ng-controller指令可以将一个控制器对象附加到DOM元素上

注意点2,当我们创建了模块之后我们的ng-app不需要放到全局上面去

<div ng-app="myapp" ng-controller="mycontroller">{{say}}</div>  

<script type="text/javascript">
   var myapp=angular.module('myapp',[]);
       myapp.controller('controller',function($scope){
           $scope.say='你好Angular js!';
       })
</script>   

例子4:内置指令ng-click 可以将按钮、链接等其他任何DOM元素同点击事件进行绑定 ng-click指令将浏览器中的mouseup事件,同设置在DOM元素上的事件处理程序绑定在一起

<div ng-app="appone" ng-controller="mycontroller">
    <button ng-click="jia(1)">+</button>
    <button ng-click="jian(1)">-</button>
    <h4>提示:{{counter}}</h4>
</div>   


<script>
    var app=angular.module('appone',[]);
        app.controller('mycontroller',function($scope){
            $scope.counter=0;
            $scope.jia=function(a){
                if($scope.counter<9){
                    $scope.counter+=a
                }
               else{
                    window.location.reload(); //刷新页面
                }
            };
            $scope.jian=function(a){
                if($scope.counter>0){
                    $scope.counter-=a
                }   
            }
        })
</script>  

例子5: $watch进行监听时, AngularJS会对表达式或函数进行运算。

这里涉及到一个新的是知识点:$watch——我们根据名字就知道他是做什么用的:
监视——在这里它的作用是对模型中的数据进行监视,并且当数据发生改变的时候做
相应的响应AngularJS为我们提供了一个非常方便的$watch方法, 
它可以帮助我们在每个scope中监视其中的变量

<div ng-app="app">
    <input type="text" ng-model="name">
    <h4>共计:{{coun}}  字</h4>
</div>  

<script>
    angular.module('app',[]).run(['$rootScope',function($scope){
        $scope.coun=0;
        $scope.name='';
        $scope.$watch('name',function(){
            $scope.coun=$scope.name.length;
        })
    }])
</script>    

重要

ng-repeat用来遍历一个集合或为集合中的每个元素生成一个模板实例。
集合中的每个元素都会被赋予自己的模板和作用域。同时每个模板实例的作用域中都会暴露一些特殊的属性。

参数: $index:遍历的进度( 0...length-1 )。

$first:当元素是遍历的第一个时值为true。

$middle:当元素处于第一个和最后元素之间时值为true。

$last:当元素是遍历的最后一个时值为true。

$even:当$index值是偶数时值为true。

$odd:当$index值是奇数时值为true。

例子6:ng-repea

<div ng-app="myApp">
    <ul ng-controller="myController">
        <li ng-repeat="stu in people">
            {{stu.name}}
        </li>
    </ul>
</div>  

<script>
    angular.module('myApp',[]).controller('myController',function($scope){
        $scope.people=[
            {name:'张三',age:18},
            {name:'李四',age:19},
            {name:'万物',age:20}
        ]
    })
</script>  

例子7:点击删除按钮,删除数据 
例子8:按照 例子7 ,动态增加一个增加按钮,使数据增加在原数据的后面

<table ng-app="myApp" ng-controller="myController">
        <tr>
            <td>姓名</td>
            <td>年龄</td>
        </tr>
        <tr ng-repeat="stu in people" >
            <td>{{$index}}</td>
            <td>{{stu.name}}</td>
            <td>{{stu.age}}</td>
            <td><button ng-click="del($index)">删除</button></td>
        </tr>  
例子8:      <td><button ng-click="zj()">更多</button></td>
    </table>  
        <input type="text" ng-model="name">

<script>
    angular.module('myApp',[]).controller('myController',function($scope){
        $scope.people=[
            {name:'张三',age:18},
            {name:'李四',age:19},
            {name:'万物',age:20}
        ]
        $scope.del=function(i){
          /*  alert(i);*/
            $scope.people.splice(i,1)
        }   
例子8:  $scope.zj=function(){
          $scope.tianjia={name:$scope.name}
        $scope.people.push($scope.tianjia)
    }
    })
</script>  

Angular4中调用js代码

Angular4中调用js代码 引言:Angular2开始采用TypeScript进行编码。本文讲述如何在Angular4项目中调用原生的 js 代码。 本文代码: http://git.osc...
  • Mingyueyixi
  • Mingyueyixi
  • 2017年06月24日 22:31
  • 7744

在Angular外部使用js调用Angular控制器中提供的函数方法或变量

Html代码如下所示:   1 DOCTYPE html> 2 html ng-app="myApp" id="myApp"> 3 head> 4 meta name=...
  • qq_26222859
  • qq_26222859
  • 2017年08月01日 18:45
  • 452

Angular JS模板注入漏洞分析

(一)漏洞分析 0x00背景 周末挖掘漏洞的过程中,发现了一个有意思的XSS,是运用了Angular JS的模板进行注入,从而执行了恶意代码,思路和技术比较新颖。Angular JS是一款比较流行...
  • u011721501
  • u011721501
  • 2016年05月26日 13:13
  • 2209

AngularJS进阶(二十九)AngularJS项目开发技巧之localStorage存储

AngularJS项目开发技巧之localStorage存储 绪       项目开发完毕,测试阶段发现后台管理端二维码生成有问题,问题在于localStorage的存储。如下图左所示,二维码生成完毕...
  • sunhuaqiang1
  • sunhuaqiang1
  • 2016年01月16日 20:59
  • 51133

AngularJS 输入验证

AngularJS 表单和控件可以验证输入的数据。 输入验证 在前面的几个章节中,你已经学到关于 AngularJS 表单和控件的知识。 AngularJS 表单和控件可以提供验...
  • Jane617_min
  • Jane617_min
  • 2016年01月04日 16:00
  • 1275

如何在AngularJs中调用第三方插件库

在AngularJs中我们会不可避免的使用第三方库,例如jquery插件库。我们不能散乱的在AngularJS中引入这些库,例如在controller中。那么应该怎么在Angular中使用第三方库呢?...
  • vuturn
  • vuturn
  • 2016年04月28日 11:22
  • 16071

angular js 各种功能函数介绍

把angular js 的一些功能函数记录下来,就相当于做做笔记!! 1.angualar.bind  :将对象绑定进 函数中,    如: var obj = { name: "Any" };...
  • ios_king
  • ios_king
  • 2016年07月29日 10:36
  • 3181

创建自己的AngularJS - 作用域和Digest(四)

作用域第一章 作用域和Digest(四)联合$apply调用 - $applyAsync不论在digest里面还是外面调用$evalAsync去延迟工作,他实际是为之前的使用案例设计的。之所以在set...
  • fangjuanyuyue
  • fangjuanyuyue
  • 2016年04月11日 10:15
  • 3817

创建自己的AngularJS - 作用域继承(一)

作用域作用域继承(一)Angular作用域继承机制直接建立在Javascript原型继承基础上,并在其根部加入了一些内容。这意味着当你理解了Javascript原型链后,将对Angular作用域继承有...
  • fangjuanyuyue
  • fangjuanyuyue
  • 2016年04月26日 17:22
  • 7124

订单案例—angularjs

DOCTYPE html> html> head> meta charset="UTF-8"> title>title> style> table { width: 100%; ...
  • HXgg0114
  • HXgg0114
  • 2018年01月12日 12:00
  • 32
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Angular JS
举报原因:
原因补充:

(最多只允许输入30个字)