关于 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 相关文章推荐
input、button的不同type值在ajax提交表单时导致的陷阱
Feb 24 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
Dec 07 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
Jul 23 Javascript
原生JavaScript生成GUID的实现示例
Sep 05 Javascript
JS中字符串trim()使用示例
May 26 Javascript
浅析JS操作DOM的一些常用方法
May 13 Javascript
js实现带三角符的手风琴效果
Mar 01 Javascript
Web安全之XSS攻击与防御小结
Dec 13 Javascript
深入浅出 Vue 系列 -- 数据劫持实现原理
Apr 23 Javascript
利用JS如何获取form表单数据
Dec 19 Javascript
js判断在哪个浏览器打开项目的方法
Jan 21 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
Feb 10 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 MsSql server时遇到的中文编码问题
2009/06/11 PHP
非常好用的两个PHP函数 serialize()和unserialize()
2012/02/04 PHP
php实现用于计算执行时间的类实例
2015/04/18 PHP
php实现的后台表格分页功能示例
2017/10/23 PHP
php实现的表单验证类完整示例
2019/08/13 PHP
jQuery 1.2.x 升? 1.3.x 注意事项
2009/05/06 Javascript
jquery实现鼠标拖动图片效果示例代码
2014/01/09 Javascript
javascript实现网页背景烟花效果的方法
2015/08/06 Javascript
javascript 判断两个日期之差的示例代码
2015/09/05 Javascript
深入浅析AngularJS和DataModel
2016/02/16 Javascript
JS在onclientclick里如何控制onclick的执行
2016/05/30 Javascript
ES6新特性四:变量的解构赋值实例
2017/04/21 Javascript
Angularjs修改密码的实例代码
2017/05/26 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
2018/03/08 Javascript
angularJs中$scope数据序列化的实例
2018/09/30 Javascript
NodeJS搭建HTTP服务器的实现步骤
2018/10/12 NodeJs
解决Vue的项目使用Element ui 走马灯无法实现的问题
2020/08/03 Javascript
VUE Elemen-ui之穿梭框使用方法详解
2021/01/19 Javascript
全面解析js中的原型,原型对象,原型链
2021/01/25 Javascript
Python中用sleep()方法操作时间的教程
2015/05/22 Python
Python编程中time模块的一些关键用法解析
2016/01/19 Python
如何将python中的List转化成dictionary
2016/08/15 Python
浅谈numpy生成数组的零值问题
2018/11/12 Python
python 实现单通道转3通道
2019/12/03 Python
python爬虫基础知识点整理
2020/06/02 Python
浅谈sklearn中predict与predict_proba区别
2020/06/28 Python
Pycharm安装python库的方法
2020/11/24 Python
英国男士时尚网站:Dandy Fellow
2018/02/09 全球购物
Petmate品牌官方网站:宠物用品
2018/11/25 全球购物
Daisy London官网:英国最大的首饰集团IBB旗下
2019/02/28 全球购物
法人委托书范本格式
2014/09/15 职场文书
思想政治表现评语
2015/01/04 职场文书
鲁冰花观后感
2015/06/10 职场文书
2016思想纪律作风整顿心得体会
2016/01/23 职场文书
python 如何执行控制台命令与操作剪切板
2021/05/20 Python
Windows下用Nginx配置https服务器及反向代理的问题
2021/09/25 Servers