在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
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="<h1>{{name}}---111</h1>"
$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'
ng-model-options='{updateOn:'blur'}'
AngularJS
ng-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='allen'; this.sex='male' } myFun.prototype.age="18"
$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) })
url 資料介面
params 提交的資料相當於$.ajax裡的data:{}success 成功回呼error 錯誤回呼這裡要說下JSONP技術JSONP是解決跨域問題的一種常見方式
跨域問題:因為瀏覽器有同源策略,所以當不同域間進行資料互動的時候就會出現跨域問題同源策略:只有在同協議,同域名,同端口的情況下才能進行資料交互JSONP的原理:可以利用script標籤(會使用回調函數來接收資料)的src屬性不受同源策略的影響,可以請求到不同域的數據,透過設定回呼函
#數來接收資料
JSONP是前後端結合的跨域方式:因為前端請求到資料後需要在回呼函數中使用,所以後端得將資料放回回呼函數中JSONP屬於AJAX嗎? ajax是指透過使用xmlhttprequest物件進行非同步資料互動的技術,jsonp是依賴scriptsrc屬性來取得的,不屬於ajaxJSONP有什麼缺點,使用的時候需要注意什麼? 不能post跨域處理,需要注意的是:每次請求應該動態的建立script標籤和回呼函數,資料取得完成後銷毀。 如果method是jsonp的話,就可以用jsonp去跨域請求,但是注意要在url後寫關於callback的值為JSON_CALLBACK#百度搜尋小例子
這裡引用的是angular-sanitize.jsvar 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");
例如
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:'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的使用方法?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

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

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

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

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

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

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

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

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

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

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

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

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

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

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