关于 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 相关文章推荐
JS方法调用括号的问题探讨
Jan 24 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
Jun 04 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
Aug 24 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
Feb 22 Javascript
jQuery UI库中dialog对话框功能使用全解析
Apr 23 Javascript
JS随机数产生代码分享
Feb 24 Javascript
vue debug 二种方法
Sep 16 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
Apr 17 Javascript
Vue CLI3中使用compass normalize的方法
May 30 Javascript
js函数柯里化的方法和作用实例分析
Apr 11 Javascript
video.js添加自定义组件的方法
Dec 09 Javascript
EXTJS7实现点击拖拉选择文本
Dec 17 Javascript
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批量采集下载美女图片的实现代码
2013/06/03 PHP
PHP生成图片验证码、点击切换实例
2014/06/25 PHP
jquery重新播放css动画所遇问题解决
2013/08/21 Javascript
jquery 3D 标签云示例代码
2014/06/12 Javascript
jquery操作HTML5 的data-*的用法实例分享
2014/08/17 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
2015/09/23 Javascript
JS解决iframe之间通信和自适应高度的问题
2016/08/24 Javascript
原生JS实现图片懒加载(lazyload)实例
2017/06/13 Javascript
浅谈JavaScript的innerWidth与innerHeight
2017/10/12 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
2018/01/03 Javascript
微信小程序switch开关选择器使用详解
2018/01/31 Javascript
JS实现点击按钮可实现编辑功能
2018/07/03 Javascript
微信小程序自定义组件components(代码详解)
2019/10/21 Javascript
浅谈Vue.use到底是什么鬼
2020/01/21 Javascript
Vue.js暴露方法给WebView的使用操作
2020/09/07 Javascript
[54:29]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第二场
2018/04/09 DOTA
合并Excel工作薄中成绩表的VBA代码,非常适合教育一线的朋友
2009/04/09 Python
python爬虫教程之爬取百度贴吧并下载的示例
2014/03/07 Python
python实现数据预处理之填充缺失值的示例
2017/12/22 Python
ActiveMQ:使用Python访问ActiveMQ的方法
2019/01/30 Python
利用ctypes获取numpy数组的指针方法
2019/02/12 Python
Python3批量移动指定文件到指定文件夹方法示例
2019/09/02 Python
pytorch 模型的train模式与eval模式实例
2020/02/20 Python
基于CSS3的animation属性实现微信拍一拍动画效果
2020/06/22 HTML / CSS
澳大利亚男士西服品牌:M.J.Bale
2018/02/06 全球购物
Under Armour澳大利亚官网:美国知名的高端功能性运动品牌
2018/02/22 全球购物
微软加拿大官方网站:Microsoft Canada
2019/04/28 全球购物
int和Integer有什么区别
2013/05/25 面试题
肯尼迪就职演说稿
2013/12/31 职场文书
大学四年职业生涯规划书范文
2014/01/02 职场文书
酒店总经理职务说明书
2014/02/26 职场文书
人力资源主管职责范本
2014/03/05 职场文书
车间主任岗位职责
2014/03/16 职场文书
你离财务总监还有多远?速览CFO的岗位职责
2019/11/18 职场文书
CentOS MySql8 远程连接实战
2022/04/19 MySQL
python井字棋游戏实现人机对战
2022/04/28 Python