首頁 web前端 js教程 在angularJS的使用方法?

在angularJS的使用方法?

Jun 23, 2018 pm 04:38 PM
angularjs 用法

這篇文章主要介紹了關於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一樣,都是給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=&#39;&#39;text“
ng-non-bindable
登入後複製

這個指令可以讓表達式不解析

<h3 ng-non-bindable>{{name}}</h3>
登入後複製

ng -include

可以引入一個html程式碼片段,也需要變數來定義,程式碼片段裡也可以寫表達式等

$scope.text=&#39;html/a.html&#39;;
ng-include=&#39;text&#39;
登入後複製

注意,因為其實內部是ajax請求的,所以需要伺服器環境下

ng-model-options=&#39;{updateOn:&#39;blur&#39;}&#39;
登入後複製

綁定資料在顯示的過程中,內部會一直操作節點,效能不好,可以這樣配置一下,在某個時刻去更新視圖顯示的資料就ok

AngularJS

ng-controller
登入後複製

可以用物件導向的思維來寫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服務

能進行資料互動

$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",[&#39;ngSanitize&#39;])
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:&#39;JSON_CALLBACK&#39;
    }
   }).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(&#39;serviceName&#39;,function(){
  return ....
})
登入後複製

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

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

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

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

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

myapp.factory(&#39;myHttpService&#39;,[&#39;$http&#39;,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 (&#39;myHttpService&#39;,[&#39;$http&#39;,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跨域

以上是在angularJS的使用方法?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

解析JSP註解的使用方法和分類 解析JSP註解的使用方法和分類 Feb 01, 2024 am 08:01 AM

JSP註解的分類及用法解析JSP註解分為兩種:單行註解:以結尾,只能註解單行程式碼。多行註解:以/*開頭,以*/結尾,可以註解多行程式碼。單行註解範例多行註解範例/**這是一段多行註解*可以註解多行程式碼*/JSP註解的用法JSP註解可以用來註解JSP程式碼,使其更易於閱

WPSdatedif函數的用法 WPSdatedif函數的用法 Feb 20, 2024 pm 10:27 PM

WPS是一款常用的辦公室軟體套件,其中的WPS表格功能被廣泛用於資料處理和計算。在WPS表格中,有一個非常有用的函數,即DATEDIF函數,它用於計算兩個日期之間的時間差。 DATEDIF函數是英文單字DateDifference的縮寫,它的語法如下:DATEDIF(start_date,end_date,unit)其中,start_date表示起始日期

Python函數介紹:isinstance函數的用法和範例 Python函數介紹:isinstance函數的用法和範例 Nov 04, 2023 pm 03:15 PM

Python函數介紹:isinstance函數的用法和範例Python是一門功能強大的程式語言,提供了許多內建函數,使得程式設計變得更加方便和有效率。其中一個非常有用的內建函數是isinstance()函數。本文將介紹isinstance函數的用法和範例,並提供具體的程式碼範例。 isinstance()函數用來判斷一個物件是否是指定的類別或類型的實例。該函數的語法如下

Python函數介紹:abs函數的用法和範例 Python函數介紹:abs函數的用法和範例 Nov 03, 2023 pm 12:05 PM

Python函數介紹:abs函數的用法和範例一、abs函數的用法介紹在Python中,abs函數是一個內建函數,用於計算給定數值的絕對值。它可以接受一個數字參數,並傳回該數字的絕對值。 abs函數的基本語法如下:abs(x)其中,x是要計算絕對值的數值參數,可以是整數或浮點數。二、abs函數的範例下面我們將透過一些具體的範例來展示abs函數的用法:範例1:計算

如何正確使用C語言的exit函數 如何正確使用C語言的exit函數 Feb 18, 2024 pm 03:40 PM

c語言exit函數怎麼用,需要具體程式碼範例在C語言中,我們常常需要在程式中提前終止程式的執行,或是在某個特定的條件下退出程式。 C語言提供了exit()函數來實作這個功能。本文將介紹exit()函數的用法,並提供對應的程式碼範例。 exit()函數是C語言中的標準函式庫函數,它包含在頭檔中。它的作用是終止程式的執行,並且可以帶一個整數

MySQL ISNULL 函數詳解及用法介紹 MySQL ISNULL 函數詳解及用法介紹 Mar 01, 2024 pm 05:24 PM

MySQL中的ISNULL()函數是用來判斷指定表達式或列是否為NULL的函數。它傳回一個布林值,如果表達式為NULL則回傳1,否則回傳0。 ISNULL()函數可以在SELECT語句中使用,也可以在WHERE子句中進行條件判斷。 1.ISNULL()函數的基本語法:ISNULL(expression)其中,expression是要判斷是否為NULL的表達式或

使用蘋果快速指令的方法 使用蘋果快速指令的方法 Feb 18, 2024 pm 05:22 PM

蘋果快捷指令怎麼用隨著科技的不斷發展,手機成為了人們生活中不可或缺的一部分。而在眾多手機品牌中,蘋果手機憑藉其穩定的系統和強大的功能一直備受用戶的喜愛。其中,蘋果快捷指令這項功能更是讓用戶的手機使用體驗更加便利和有效率。蘋果快捷指令是蘋果公司為其iOS12及更高版本推出的一項功能,透過建立和執行自訂指令,幫助用戶簡化手機操作流程,以達到更有效率的工作和

使用CSS Transform進行元素的變換 使用CSS Transform進行元素的變換 Feb 24, 2024 am 10:09 AM

CSS中Transform的用法CSS的Transform屬性是一種非常強大的工具,可以對HTML元素進行平移、旋轉、縮放和傾斜等操作。它可以大大改變元素的外觀,使網頁更有創意和動態。在本文中,我們將詳細介紹Transform的各種用法,並提供具體的程式碼範例。一、平移(Translate)平移是指將元素沿著x軸和y軸移動指定的距離。它的語法如下:tran

See all articles