AngularJS----服务，表单，模块

时间 2019-12-05

原文原文链接

服务是一个函数或对象，AngularJS中能够建立本身的服务或使用内建服务。$http是AngularJS中最多见的服务，服务向服务器发送请求，应用响应服务器传送过来的数据。php

$http服务

它是AngularJS中的一个核心服务，用于读取远程服务器(Web)的数据。$http.get(utl)用于读取数据的函数。也就是get请求服务器。html

 
        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

 
        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函数。数组

 
        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性质的。浏览器

建立自定义服务

咱们能够本身建立服务给其设置功能，就至关于前面的两个同样。服务器

 
        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

 
        <div ng-controller= 
        "xuanController" 
        > 
       
        < 
        select  
        ng-model= 
        "selectedName"  
        ng-options= 
        "x for x in names" 
        > 
       
        </ 
        select 
        > 
       
        </div>

 
        //选择框 
       
        app.controller( 
        "xuanController" 
        , 
        function 
        ($scope){ 
       
        $scope.names=[ 
        '1' 
        , 
        '2' 
        , 
        '3' 
        ]; 
       
        });

如今把选择的数据都放在了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模块

模块定义了一个应用程序，是应用程序中的不一样部分的容器，是应用控制器的容器，控制器一般属于一个模块。

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

在模块定义中[ ]参数用于定义模块的依赖关系，要是模块之间有关系，那么会在中括号写上依赖的模块名字。

注意：对于咱们的js脚本，一般是要放在<body>元素的最底部。这回提升网页的加载速度。

AngularJS表单与验证

终于到表单了，其实此次的项目主要是学习表单和验证，由于项目中使用的就是这个。

 
        app.controller( 
        "FormController" 
        , 
        function 
        ($scope){ 
       
        $scope.master={username: 
        'ahui' 
        ,pwd: 
        '123321' 
        }; 
       
        //方法 
       
        $scope.reset= 
        function 
        (){ 
       
        $scope. 
        user 
        =angular.copy($scope.master); 
       
        }; 
       
        $scope.reset(); 
       
        });

 
        <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属性，显示一些错误信息到表单外面。

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

上面图中是代码中验证输入的内容的作法。感受这个很不爽，须要写不少的小代码在这里面。