關於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,如:
aa
表單指令
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="
{{name}}---111
"
這樣可不行哦,這是1.3前的,從1.3以後大換血的時候,為了精簡angular.js,把這個玩意給弄出去了,得用一個外掛(模組)
還得在angular.module裡面給放進"ngSanitize"
然後需要把要顯示的標籤掛在一個變數上,然後設定給ng-bind-html
$scope.text= "
"+$scope.name+"---111
"
ng-bind-html=''text“
ng-non-bindable
這個指令可以讓表示式不解析
{{name}}
ng-include
可以引入一個html程式碼片段,也需要變數來定義,程式碼片段裡也可以寫表示式等
$scope.text='html/a.html';
ng-include='text'
注意,因為其實內部是ajax請求的,所以需要伺服器環境下
ng-model-options='{updateOn:'blur'}'
繫結資料在顯示的過程中,內部會一直操作節點,效能不好,可以這樣配置一下,在某個時刻去更新檢視顯示的資料就ok
AngularJS
ng-controller
可以用物件導向的思維來寫controller
{{name}}
{{myFun.age}}
{{myFun.sex}}
myapp.controller("myController",["$scope",myFun])
function myFun($scope){
$scope.name='allen';
this.sex='male'
}
myFun.prototype.age="18"
再來說服務,服務其實已經說了很多了。
angularJS中,服務是用來透過某些功能
$http服務
能進行資料互動
$http({
url:"
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:"
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:"
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("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找到兄弟作用域,然後使用資料,需要注意的是,如果是初始資料型別的話就不能做資料雙向繫結了
第三種是定義服務,把需要共享的資料做成服務,這樣就都可以用了
first-name:{{name}}
first-data-name:{{data.name}}
first-Data-name:{{Data.name}}
second-name:{{name}}
second-data-name:{{data.name}}
second-Data-name:{{Data.name}}
自定義模組
所有的模組都有服務,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就是一個自定義模組
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/31543790/viewspace-2285660/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 關於with 臨時表 as的一些用法
- 關於sqlplus用法的一些總結SQL
- 關於git分支的一些用法(持續更新中…)Git
- 關於angularjs的載入方式AngularJS
- 關於oracle with as用法Oracle
- 關於AI、關於chatGPT的幾十種用法AIChatGPT
- vue中 關於$emit的用法VueMIT
- 關於JavaScript中arguments的用法JavaScript
- 關於linux的test用法Linux
- 關於lag函式的用法函式
- [轉]關於oracle with as用法Oracle
- AngularJS Filter用法詳解AngularJSFilter
- AngularJS 中的一些坑AngularJS
- 關於Python的super用法研究Python
- 關於JDBC用法的練習 (轉)JDBC
- 關於SHOW_SPACE()工具的用法
- angularJS的router用法簡單介紹AngularJS
- 關於position的一些理解
- 關於機器學習的一些看法機器學習
- 關於table的一些操作
- 關於oracle的一些命令Oracle
- 關於MongoDB的一些PPTMongoDB
- 學習AngularJs:Directive指令用法AngularJS
- css關於/deep/的解釋和用法CSS
- 關於sed的用法。 - V2EXV2EX
- oracle面試題[關於case when的用法]Oracle面試題
- 關於SHOW_SPACE()工具的用法(轉)
- 關於Canvas的一些經驗Canvas
- 《關於MySQL的一些騷操作》MySql
- 關於position定位的一些理解
- 關於CodeReview的一些思考View
- 關於蘋果銷量的一些看法蘋果
- 關於面試的一些個人看法面試
- 關於ASM的一些理論ASM
- 關於Redis的一些小問題Redis
- 關於 Masonry 的一些思考(下)
- 關於一些變數的使用變數
- 關於“運維”的一些思索運維