AngleJS에서 어떻게 사용하나요?

이 글은 주로 AngularJS 사용법과 관련된 내용을 소개합니다. 필요하신 분들은 참고하시면 됩니다

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과 동일합니다.

이벤트 객체를 사용할 때 ng-click 및 기타 지침에서 $event를 전달해야 한다는 점에 유의해야 합니다.

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

Form command

ng-change

값이 변경되면 ng-model과 함께 사용할 수 있는 값이 있는 태그가 있을 때 유용합니다.

반드시 ng-model과 함께 사용해야 합니다

데이터 확인 가능

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

체크박스 선택 여부 제어

전용 설정 이것은 데이터를 통해 선택 여부만 제어할 수 있습니다

ng-model을 설정하면 이를 통해 데이터를 제어할 수 있습니다

disable과 readonly의 차이점

Form 요소는 비활성화 또는 읽기 전용 속성을 설정하여 설정할 수 있습니다. 비활성화됨을 설정한 후에는 사용자가 해당 필드를 사용할 수 없으며 읽기 전용

은 사용자만 비활성화할 수 있습니다. 즉, 사용자는 이를 실행할 수 없지만 양식은 계속 제출됩니다

카운트다운 급하게 구매하는 경우가 적음

$interval 서비스는 더티 데이터를 자동으로 확인할 수 있는 setInterval과 동일합니다.

삭제하려면 값을 할당한 다음 $interval.cancel( 타이머)

ng-show는 true로 표시됩니다. 숨기려면 false

ng-hide를 숨기려면 true로 설정하세요. false 표시

ng-if는 표시되지 않는 경우 노드가 DOM 문서에 없다는 점을 제외하면 ng-show와 동일합니다

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 이후 큰 변화가 있을 때, angle.js를 간소화하기 위해 이 기능이 제거되었습니다. (모듈)

Angular에도 있어야 합니다. 모듈에 "ngSanitize"를 넣어야 합니다

그런 다음 변수에 표시할 레이블을 걸어둔 다음 ng-bind-html

$scope.text= "<h1>"+$scope.name+"---111</h1>"
ng-bind-html=&#39;&#39;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'}'

표시 과정에서 노드가 내부적으로 작동하게 되어 성능이 좋지 않습니다. 이렇게 구성하고 표시되는 데이터를 업데이트하면 됩니다. view at a moment

AngularJS

ng-controller

객체 지향적 사고를 사용할 수 있습니다 Write Controller

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

서비스에 대해 실제로 많은 말을 했는데요.

AngularJS에서 서비스는 특정 기능을 통해 데이터와 상호 작용하는 데 사용됩니다.

$http service

$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의 데이터와 동일합니다. {}성공 성공 콜백

error error callback

여기서 JSONP 기술에 대해 이야기하겠습니다

JSONP는 도메인 간 문제를 해결하는 일반적인 방법입니다

교차 도메인 문제: 브라우저에는 동일 출처 정책이 있으므로 서로 다른 도메인 간에 데이터가 교환될 때 교차 도메인 문제가 발생합니다. 원본 출처 정책: 이는 동일한 프로토콜, 동일한 도메인 이름에서만 수행될 수 있습니다. , 동일한 포트로 데이터 상호작용

JSONP의 원칙: 동일 출처 정책의 영향을 받지 않는 스크립트 태그(콜백 함수를 사용함)의 src 속성을 사용할 수 있습니다. 콜백 기능을 설정하여 다른 도메인에서

데이터 수신

JSONP는 프런트엔드와 백엔드를 결합한 크로스 도메인 방식입니다. 프런트엔드에서 데이터를 요청하고 이를 사용해야 하기 때문입니다. 콜백 함수를 사용하려면 백엔드에서 데이터를 다시 콜백 함수에 넣어야 합니다.JSONP가 AJAX에 속합니까? Ajax는 xmlhttprequest 객체를 사용하여 비동기 데이터 상호 작용을 수행하는 기술을 말하며, JSONP는 scriptsrc 속성에 속하지 않습니다. JSONP를 사용할 때 주의해야 할 점은 무엇입니까?

게시물 교차 도메인 처리는 수행할 수 없습니다. 스크립트 태그와 콜백 함수는 각 요청마다 동적으로 생성되어야 하며 데이터 수집이 완료된 후에는 삭제되어야 합니다.

메서드가 jsonp인 경우 도메인 간 요청에 jsonp를 사용할 수 있지만 url 뒤에 콜백 값을 JSON_CALLBACK으로 작성해야 합니다.

Baidu 검색 예시

여기서 참조한 내용은 Angle-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 service

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 service

다중 콘솔 출력 모드

$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>

  <p class="container">
    <p 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>

    </p>
    <p ng-controller="secondController">
      <p>
        second-name:{{name}}<br>
        second-data-name:{{data.name}}<br>
        second-Data-name:{{Data.name}}
      </p>
    </p>
  </p>
</body>
<script src="../Base/angular.min.js"></script>
<script>
  var app=angular.module("myapp",[]);
  app.factory("Data",function () {
    return {
      name:&#39;lily&#39;
    }
  })
  app.controller("firstController",function ($scope,Data) {
    $scope.name="allen";
    $scope.data={
      name:&#39;tom&#39;
    }
    $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就是一个自定义模块

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

使用axios如何实现ajax请求（详细教程）

在JavaScript中如何实现弹性效果

使用JavaScript如何实现二叉树遍历

在axios中如何实现cookie跨域

위 내용은 AngleJS에서 어떻게 사용하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!