AngularJS----服務，表單，模塊

時間  2019-12-05
標籤 angularjs 服務 表單 模塊 欄目 AngularJS 简体版
原文   原文鏈接

服務是一個函數或對象，AngularJS中能夠建立本身的服務或使用內建服務。$http是AngularJS中最多見的服務，服務向服務器發送請求，應用響應服務器傳送過來的數據。php

  • $http服務

它是AngularJS中的一個核心服務，用於讀取遠程服務器(Web)的數據。$http.get(utl)用於讀取數據的函數。也就是get請求服務器。html

1
2
3
4
5
6
app.controller( "outController" , function ($scope,ahui_out,$http){
     $scope.hex=ahui_out.myFunc(255);
     $http.get( "welcome.html" ). then ( function (response){
         $scope.myWelcome=response.data;
     });
});

咱們經過$http.get()獲得的是數組數據，以後須要在頁面上進行遍歷輸出。angularjs

1
2
3
4
5
6
app.controller( "getController" , function ($scope,$http){
     $http.get( "http://www.runoob.com/try/angularjs/data/Customers_JSON.php" )
     .success( function (response){
         $scope.names=response.records   //這裏到時候返回的是一個數組names[]
     });
});
  • timeout服務

至關於JS中的window.setTimeout函數。sql

  • interval服務

至關於JS中的window.setInterval函數。數組

1
2
3
4
5
6
7
8
9
10
11
12
13
app.controller( "myController" , function ($scope,$location,$timeout,$interval){
     $scope.myUrl=$location.absUrl();          //找到url
     $scope.myHeader= "zhanghui" ;
     //延遲顯示 ---至關於js中的setTimeout();
     $timeout( function (){
         $scope.myHeader= "zheng de shi ni ma ?" ;
     },2000);
     $scope.theTime=new Date ().toLocaleTimeString();
     //至關於js中的setInterval();
     $interval( function (){
     $scope.theTime=new Date ().toLocaleTimeString();       
     },1000);   
});

以前覺得這裏的參數只能寫幾個，沒想到基本的均可以寫，它裏面是個parametr性質的。瀏覽器

  • 建立自定義服務

咱們能夠本身建立服務給其設置功能，就至關於前面的兩個同樣。服務器

1
2
3
4
5
6
7
8
9
app.controller( "outController" , function ($scope,ahui_out){
     $scope.hex=ahui_out.myFunc(255);
});
//自定義模板,這裏就至關於咱們以前的timeout,interval,location等。
app.service( "ahui_out" , function (){
     this.myFunc= function (x){
         return  x.toString(16);
     }
});

利用service函數能夠參加自定義的服務，服務名爲ahui_out。在控制器中就可使用它。app

AngularJS中的select選擇框

能夠利用AngularJS往選擇框中輸入值，進行選擇。ide

1
2
3
4
<div ng-controller= "xuanController" >
     < select  ng-model= "selectedName"  ng-options= "x for x in names" >
     </ select >
</div>
1
2
3
4
//選擇框
  app.controller( "xuanController" , function ($scope){
$scope.names=[ '1' , '2' , '3' ];
});

image

如今把選擇的數據都放在了ng-model=」selectedSite」中。可使用ng-repeat，可是兩者是有區別的，ng-repeat指令時經過數組來循環HTML代碼來建立下拉列表，可是ng-options指令更適合建立下拉列表，ng-repeat是一個字符串，ng-options的選項是一個對象。函數

AngularJS HTML DOM

提供HTML DOM元素的屬性提供綁定應用數據的指令。

  • ng-disabled指令

    直接綁定應用程序數據到html的disabled屬性。其實就和HTML中的disable屬性同樣。

  • ng-show指令

    隱藏或顯示一個html元素，主要是根據value的值來顯示和隱藏元素的。ng-hide恰好和它相反，true隱藏，false不隱藏。

AngularJS模塊

模塊定義了一個應用程序，是應用程序中的不一樣部分的容器，是應用控制器的容器，控制器一般屬於一個模塊。

1
var app=angular.module( "myApp" ,[]);

在模塊定義中[ ]參數用於定義模塊的依賴關係，要是模塊之間有關係，那麼會在中括號寫上依賴的模塊名字。

注意：對於咱們的js腳本，一般是要放在<body>元素的最底部。這回提升網頁的加載速度。

AngularJS表單與驗證

終於到表單了，其實此次的項目主要是學習表單和驗證，由於項目中使用的就是這個。

1
2
3
4
5
6
7
8
app.controller( "FormController" , function ($scope){
     $scope.master={username: 'ahui' ,pwd: '123321' };
     //方法
     $scope.reset= function (){
         $scope. user =angular.copy($scope.master);
     };
     $scope.reset();
});
1
2
3
4
5
6
7
8
9
10
<div ng-controller= "FormController" >
     <form novalidate>
         登陸名：<input type= "text"  ng-model= "user.username" /><br/>
         密碼：<input type= "text"  ng-model= "user.pwd" />
         <button ng-click= "reset()" >RESET</button>
     </form>
     <hr/>
     <p>{{ user }}</p>
     <p>{{master}}</p>
</div>

裏面其他的東西應該能夠看懂，主要是novalidate，這個是你在須要使用表單時使用，用於重寫標準的HMLT5驗證。是新增的，禁用了瀏覽器的默認驗證。

AngularJS表單和控件能夠提供驗證功能，並對用戶輸入的非法數據進行警告。在裏的驗證只是前提，減小服務器端的壓力，服務器端的驗證是必不可少的。

使用了ng-show屬性，顯示一些錯誤信息到表單外面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<div ng-controller= "form" >           
            <form name = "myForm"  novalidate>
                <p>
                    用戶名：<br/>
                    <input type= "text"  ng-model= "user"  required name = "user" />
                    <span style= "color:red"  ng-show= "myForm.user.$dirty && myForm.user.$invalid" >
                    <span ng-show= "myForm.user.$error.required" >用戶名是必須的</span>
                    </span>                   
                </p>
                <p>
                    密碼：<br/>
                    <input type= "text"  ng-model= "pwd"  name = "pwd"  required/>
                    <span style= "color:red"  ng-show= "myForm.pwd.$dirty&&myForm.pwd.$invalid" >
                      <span ng-show= "myForm.pwd.$error.required" >密碼是必須的</span>                     
                    </span>               
                </p>
                <p>
                    郵箱：<br/>
                    <input type= "email"  name = "email"  ng-model= "email"  required/>
                    <span style= "color:red"  ng-show= "myForm.email.$dirty&&myForm.email.$invalid" >
                        <span ng-show= "myForm.email.$dirty&&myForm.email.$invalid" >郵箱不能爲空</span>
                        <span ng-show= "myForm.email.$error.email" >非法郵箱</span>
                    </span>
                </p>
                <p>
                    <input type= "submit"
                    ng-disabled= "
                    myForm.user.$dirty&&
                    myForm.user.$invalid||
                    myForm.email.$dirty&&
                    myForm.email.$invalid||
                    myForm.pwd.$dirty&&
                    myForm.pwd.$invalid" />
                </p>          
            </form>           
        </div>

image

image

上面圖中是代碼中驗證輸入的內容的作法。感受這個很不爽，須要寫不少的小代碼在這裏面。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程