关于 angularJS的一些用法


Posted in Javascript onNovember 29, 2017

AngularJS

事件指令:

ng-click/dblclick
ng-mousedown/up
ng-mouseenter/leave
ng-mousemove/over/out
ng-keydown/up/press
ng-focus/blur
ng-submit

和ng-click一样,都是给dom绑定事件的

需要注意的是,使用事件对象的时候,需要在ng-click等指令里传入$event,如:

<button ng-click="clickFn($event)" class="btn btn-danger">aa</button>

表单指令

ng-change

当值发生改变的时候就会有用

有value值的一些个标签,能ng-model的,才能用哟

必须要ng-model配合使用

可以做数据验证

ng-disabled 控制元素是否可用
ng-readonly
ng-checked

控制checkbox是否被选中

只设置这个只能通过数据来控制是否选中

设置ng-model就可以通过它来控制数据

disabled和readonly的区别

表单元素都可以通过设置disabled或者readonly属性对其禁用,disabled设置了之后,用户不可以使用,并且表单不会提交该字段,readonly

仅是用户禁用,也就是说,用户不可操作,但是表单依然会提交

倒计时抢购小案例

$interval服务相当于setInterval,可以自动进行脏数据检验

清除的话需要赋值然后$interval.cancel(timer)

ng-show 为true显示。false隐藏

ng-hide 为true 隐藏。false 显示

ng-if 和ng-show 一样,只不过是如果不显示的时候,节点不在dom文档中

var app = angular.module("myapp",[])
app.controller("myController",function ($scope,$interval) {
$scope.num=1
$scope.canBuy = false
$scope.time = 5
  var timer = $interval(function () {
   $scope.time--;
   if($scope.time<=0){
    $scope.canBuy=true
    $interval.cancel(timer)     
   }
  },1000)
 })

ng-bind相关

ng-bind有一个问题,加上之后就不能在数据变量后面加别的东东了,这个标签里面只能显示这条数据,其他的就不行了比如

{{name}}---111
用ng-bind-template就好
ng-bind-template="{{name}}---111"

又有问题了,不能解析标签

没事,用ng-bind-html

ng-bind-html="<h1>{{name}}---111</h1>"

这样可不行哦,这是1.3前的,从1.3以后大换血的时候,为了精简angular.js,把这个玩意给弄出去了,得用一个插件(模块)

还得在angular.module里面给放进"ngSanitize"

然后需要把要显示的标签挂在一个变量上,然后设置给ng-bind-html

$scope.text= "<h1>"+$scope.name+"---111</h1>"
ng-bind-html=''text“
ng-non-bindable

这个指令可以让表达式不解析

<h3 ng-non-bindable>{{name}}</h3>

ng-include

可以引入一个html代码片段,也需要变量来定义,代码片段里也可以写表达式等

$scope.text='html/a.html';
ng-include='text'

注意,因为其实内部是ajax请求的,所以需要服务器环境下

ng-model-options='{updateOn:'blur'}'

绑定数据在显示的过程中,内部会一直操作节点,性能不好,可以这样配置一下,在某个时刻去更新视图显示的数据就ok

AngularJS

ng-controller

可以用面向对象的思维来写controller

<div ng-controller="myController as myFun"> 
{{name}}<br>
{{myFun.age}}<br>
{{myFun.sex}}
</div>
myapp.controller("myController",["$scope",myFun])
function myFun($scope){
 $scope.name='allen';
 this.sex='male'
}
myFun.prototype.age="18"

再来说服务,服务其实已经说了很多了。

angularJS中,服务是用来通过某些功能

$http服务

能进行数据交互

$http({
 url:"http://datainfo.duapp.com/shopdata/getclass.php",
 method:"get",
 params:{}
}).success(function(data){
 $scope.dataList=data;
}).error(function(error){
 console.log(error)
})

method 代表传递方法 get、post

url 数据接口

params 提交的数据 相当于$.ajax里的data:{}

success 成功回调

error 错误回调

这里要说下JSONP技术

JSONP是解决跨域问题的一种常见方式

跨域问题:因为浏览器有同源策略,所以当不同域间进行数据交互的时候就会出现跨域问题

同源策略:只有在同协议,同域名,同端口的情况下才能进行数据交互

JSONP的原理:可以利用script标签(会使用回调函数来接收数据)的src属性不受同源策略的影响,可以请求到不同域的数据,通过设置回调函

数来接收数据

JSONP是前后端结合的跨域方式:因为前端请求到数据后需要在回调函数中使用,所以后端得将数据放回到回调函数中

JSONP属于AJAX吗?ajax是指通过使用xmlhttprequest对象进行异步数据交互的技术,jsonp是依靠scriptsrc属性来获取的,不属于ajax

JSONP有什么缺点,使用的时候需要注意什么?

不能post跨域处理,需要注意的是:每次请求应该动态的创建script标签和回调函数,数据获取完成后销毁。

如果method是jsonp的话,就可以用jsonp去跨域请求,但是注意要在url后写关于callback的值为JSON_CALLBACK

百度搜索小例子

这里引用的是 angular-sanitize.js

var app = angular.module("myapp",['ngSanitize'])
app.controller("myController",function ($scope,$http) {
  $http({   url:"http://datainfo.duapp.com/shopdata/getclass.php",
   method:"post",
   params:{a:1}
  }).success(function (results) {
   $scope.dataList = results
  }).error(function (error) {
   console.log(error)
  })
 })
 app.controller("yourController",function ($scope,$http) {
  $scope.search = function () {
   $http({    url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
    method:"jsonp",
    params:{
     wd:$scope.wd,
     cb:'JSON_CALLBACK'
    }
   }).success(function (results) {
    $scope.dataList = results.s
   })
  }
 })

$location服务

console.log($location.absUrl())//输出绝对地址
console.log($location.host())//输出域名
console.log($location.port())//输出端口
console.log($location.protocol())//协议
$location.path("aaa")//在路由中控制切换页面
console.log($location.path()) // #/aaa

$log 服务

多种控制台输出模式

$log.info("info");
$log.warn("warn");
$log.error("error");
$log.log("log");

angularJs对服务供应商配置

例如

myapp.config(["$interpolateProvider",function($interpolateProvider){
 $interpolateProvider.startSymbol("!!");
 $interpolateProvider.endSymbol("!!");
}])

angular就不认识{{}}了,开始变成!!!!

自定义服务 三种

1.factory

myapp.factory('serviceName',function(){
  return ....
})

可以return 字符串、数组、函数、对象(使用最多,最和逻辑)

引入方法和angualr自带的前面加$的服务完全一样,使用方法取决于return出来的是什么东西,自定义服务的服务名还是别加$了

eq:返回一个 两个数之间的随机数的服务

myapp.factory("myService",function(){
 return {
  getRandom:function(a,b){
   return Math.random()*(b-a)+a;
  }
 }
})

自定义的服务可以依赖注入其他服务

myapp.factory('myHttpService',['$http',function($http){
   return {
     $http({
       url:......
     })      
     }
}])

eq:下一个自定义的http服务

myapp.factory("myHttpService",["$http",function($http){
  return {
    http:function(url,sfn,efn){
      $http({
        url:url,
        method:"get"
      }).success(sfn).error(efn)
    }
  }
}])
myHttpService.http("http://datainfo.duapp.com/shopdata/getclass.php",function(data){
  console.log(data)
},function(data){
  console.log(data)
})

2.provider

可以通过去自定义一个服务供应商去定义一个服务,写法有区别,服务功能性的东西需要嵌套一层返回

myapp. provider ('myHttpService',['$http',function($http){
   return {
     $get:function(){
     return:{//这里才是输出
     } 
     }
}])

外面return出来的是这个服务的供应商,供应商的$get方法里返回的才是供我们使用的部分,可以通过更改供应商的部分参数来控制服务的功能,

eq:还是返回一个范围内的随机数,但是通过配置供应商的一个值来控制服务返回的是整数还是小数

myapp.provider("myService",function(){
  return {
    isInt:true,
    $get:function(){
      var that=this;
      return {
        getRandom:function(a,b){
          var num=Math.random()*(b-a+1)+a;
          if(that.isInt){
            return Math.floor(num);
          }else{
            return(num)
          }
        }
      }
    }
  }
})
myapp.config(["myServiceProvider",function(myServiceProvider){
  myServiceProvider.isInt=false;
}])

通过这种方法创建的服务是可以配置供应商的

3.service

通过这种方法创建出来的只能是对象
最简单的创建方式,自带返回,支持面向对象的写法

myapp.service("myService",function(){
    this.getRandom=function(a,b){
      return Math.random()*(b-a)+a;
    }
})

myapp.service("myService",aaa)
function aaa(){
  this.getRandom=function(a,b){
    return Math.random()*(b-a)+a;
  }
}

多个控制器间数据的共享

实现多个控制器数据共享的方法有这样三种,

第一种比较简单,就是把数据放到父作用域上,就都可以访问了

第二种就是在控制器里通过$$prevSibling找到兄弟作用域,然后使用数据,需要注意的是,如果是初始数据类型的话就不能做数据双向绑定了

第三种是定义服务,把需要共享的数据做成服务,这样就都可以用了

<body>

  <div class="container">
    <div ng-controller="firstController">
      <input type="text" class="form-control" ng-model="name">
      <input type="text" class="form-control" ng-model="data.name">
      <input type="text" class="form-control" ng-model="Data.name">
      <p>
        first-name:{{name}}<br>
        first-data-name:{{data.name}}<br>
        first-Data-name:{{Data.name}}
      </p>

    </div>
    <div ng-controller="secondController">
      <p>
        second-name:{{name}}<br>
        second-data-name:{{data.name}}<br>
        second-Data-name:{{Data.name}}
      </p>
    </div>
  </div>
</body>
<script src="../Base/angular.min.js"></script>
<script>
  var app=angular.module("myapp",[]);
  app.factory("Data",function () {
    return {
      name:'lily'
    }
  })
  app.controller("firstController",function ($scope,Data) {
    $scope.name="allen";
    $scope.data={
      name:'tom'
    }
    $scope.Data=Data;
  })
  app.controller("secondController",function ($scope,Data) {
    $scope.name=$scope.$$prevSibling.name;
    $scope.data=$scope.$$prevSibling.data;
    $scope.Data=Data;
  })
</script>

自定义模块

所有的模块都有服务,ng-app这个模块理由¥scope什么的服务,

咱们自己也可以写一个模块,然后里面可以去写服务

这样就可以把某些服务写在某个自定义的模块里,实现重复调用

例如把随机数的例子写在一个自定义的模块里

var myModule=angular.module("myModule",[]);
myModule.service("myService",function(){
  this.ran=function(a,b){
   return Math.random()*(a+b)-a;
  }
})
var myapp=angular.module("myapp",["myModule"]);
myapp.controller("myController",["$scope","$log","myService",function($scope,$log,myService){
 $log.log(myService.ran(5,10))
}])

其实像angualr.sanitize.js就是一个自定义模块

总结

以上所述是小编给大家介绍的angularJS的一些用法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript forEach通用循环遍历方法
Oct 11 Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
Aug 07 Javascript
ListBox实现上移,下移,左移,右移的简单实例
Feb 13 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
Oct 17 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
Mar 26 Javascript
JS实现简单路由器功能的方法
May 27 Javascript
jq checkbox 的全选并ajax传参的实例
Apr 01 Javascript
通过命令行创建vue项目的方法
Jul 20 Javascript
vue mixins组件复用的几种方式(小结)
Sep 06 Javascript
浅谈JavaScript闭包
Apr 09 Javascript
vue缓存的keepalive页面刷新数据的方法
Apr 23 Javascript
vue backtop组件的实现完整代码
Apr 07 Vue.js
ReactNative之FlatList的具体使用方法
Nov 29 #Javascript
ReactNative 之FlatList使用及踩坑封装总结
Nov 29 #Javascript
jQuery图片加载失败替换默认图片方法汇总
Nov 29 #jQuery
jquery animate动画持续运动的实例
Nov 29 #jQuery
angularjs实现时间轴效果的示例代码
Nov 29 #Javascript
bootstrap响应式工具使用详解
Nov 29 #Javascript
JavaScript的setter与getter方法
Nov 29 #Javascript
You might like
如何使用PHP中的字符串函数
2006/10/09 PHP
仿AS3实现PHP 事件机制实现代码
2011/01/27 PHP
php删除文本文件中重复行的方法
2015/04/28 PHP
php实现处理输入转义字符的代码
2015/11/08 PHP
Yii中CArrayDataProvider和CActiveDataProvider区别实例分析
2016/03/02 PHP
php 判断字符串编码是utf-8 或gb2312实例
2016/11/01 PHP
php接口实现拖拽排序功能
2018/04/23 PHP
PHP正则表达式处理函数(PCRE 函数)实例小结
2019/05/09 PHP
jquery ajax提交表单数据的两种实现方法
2010/04/29 Javascript
ejs v9 javascript模板系统
2012/03/21 Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
2013/02/25 Javascript
JS脚本defer的作用示例介绍
2014/01/02 Javascript
javascript简单性能问题及学习笔记
2014/02/04 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
2014/02/19 Javascript
js实现获取div坐标的方法
2015/11/16 Javascript
详解微信小程序设置底部导航栏目方法
2017/06/29 Javascript
Vue 指令实现按钮级别权限管理功能
2019/04/23 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
2019/09/28 Javascript
vue实现购物车选择功能
2020/01/10 Javascript
微信小程序canvas截取任意形状的实现代码
2020/01/13 Javascript
Vue基于iview table展示图片实现点击放大
2020/08/05 Javascript
[02:43]DOTA2亚洲邀请赛场馆攻略——带你走进东方体育中心
2018/03/19 DOTA
python自动化测试之从命令行运行测试用例with verbosity
2014/09/28 Python
python中字典dict常用操作方法实例总结
2015/04/04 Python
python中星号变量的几种特殊用法
2016/09/07 Python
Python多继承顺序实例分析
2018/05/26 Python
Django发送邮件和itsdangerous模块的配合使用解析
2019/08/10 Python
Pure Collection美国官网:来自英国羊绒专家的奢华羊绒
2017/11/19 全球购物
学校校庆演讲稿
2014/05/22 职场文书
护士辞职信怎么写
2015/02/27 职场文书
学校中秋节活动总结
2015/03/23 职场文书
小学少先队活动总结
2015/05/08 职场文书
2015年网管个人工作总结
2015/05/22 职场文书
师德培训心得体会2016
2016/01/09 职场文书
高三数学教学反思
2016/02/18 职场文书
oracle表分区的概念及操作
2021/04/24 Oracle