Angular JS的正确打开姿势——简单实用（下）

    前  言

絮叨絮叨

　继上篇内容，本篇继续讲一下这款优秀并且实用的前端插件AngularJS。

 

六、 AngularJS中的HTTP

6.1先看看JQuery的Ajax写法

 

 $ajax({
   method : "get",
   url : ".....",
   success : function(){},
   error : function(){}
 });

 

6.2$HTTP写法

 

$http({
  method : "get",/*请求的方法*/
  url : "h51701.json"/*请求的地址*/
}).then(function(obj){
   /*请求成功的回调函数*/
   alert("请求成功");
   $scope.data=obj.data;
},function(){
    /*请求失败的回调函数*/
    alert("请求失败");
});

 

 

还有一种简写方式：

可以直接简写为get或者post方式
$http.get('/someUrl').then(successCallback, errorCallback);
$http.post('/someUrl', data).then(successCallback, errorCallback);

如：

$http.get("h51701.json",{/*需要传递给后台的数据*/})
.then(function(){
  alert("请求成功");
},function(){
  alert("请求失败");
})

 

 

七、 AngularJS中的select和表格

 

7.1使用数组作为数据源

 

使用数组作为数据源
1、item表示数组中的每一项！
2、循环出的option中，value的值，默认为item
3、option显示出的内容(<option></option>标签中的文字)是由item.site for决定的！

<select ng-model="site" ng-options="item.site for item in sites"></select>

<script type="text/javascript">
  angular.module("app",[])
  .controller("ctrl",function($scope){
　　$scope.sites = [

   　　{site : "Google", url : "http://www.google.com"},

  　　{site : "Runoob", url : "http://www.runoob.com"},
  　　{site : "Taobao", url : "http://www.taobao.com"}
　　];

})

 

这种写法，默认生成的option效果如下：

<option value='{site : "Google", url : "http://www.google.com"}'>Google</option>

 

7.2以对象作为数据源

 

以对象作为数据源
1、 (key,value) 第一项表示对象的键，第二项表示对象的值；
2、 option的value，永远都是对象的值！
3、 option显示出的内容(<option></option>标签中的文字)是由...for 决定的！也就是说 for前面是什么，option标签中就是什么。

<select ng-model="site3" ng-options="key for (key,value) in sitess">

<script type="text/javascript">
        angular.module("app",[])
        .controller("ctrl",function($scope){
            $scope.sitess = {
                site01 : "Google",
                site02 : "Runoob",
                site03 : "Taobao"
            }
        })
    </script>

 

这种写法，默认生成的option效果如下：

<option value=" value "> <!--key/value(取决于for前面的内容)--> </option>

 

6.3ng-options 和 ng-repeat

 

1、ng-options使用时，是将指令添加在select上；
ng-repeat使用时，试讲指令添加在option上；

2、 ng-options使用时，必须同步给select标签绑定ng-model；
ng-repeat使用时，不一定需要绑定ng-model

3、 ng-options使用时，我们只需要关心for前面的部分，即option标签中显示的文字；而option的value会自动分配，不由我们决定。 (使用数组作为数据源是，value就是数组的每一项；使用对象作为数据源是，value永远都是对象的值)
ng-repeat使用，除了要指定option标签中显示的文字，还需要手动指定value中的内容，如果没有指定则默认没有value；

 实例：

<table width="400" border="1">
  <tr>
    <th>序号</th>
    <th>姓名</th>
  </tr>
  <tr ng-repeat="item in options">
    <!--
       ng-repeat遍历是，$index 表示当前的行索引！
     -->
    <td>{{$index + 1}}</td>
    <td>{{item}}</td>
  </tr>
</table>

<script type="text/javascript">
  angular.module("app",[])
  .controller("ctrl",function($scope){
      $scope.options = ["张三","李四","王二麻子","赵六","李二狗"];
  })
</script>

 

 

 

八、 AngularJS中的DOM与事件

 

8.1DOM中的几个小指令

1、ng-disabled="true/false"
　　传入true表示禁用，传入false表示可用

<button ng-disabled="!myCheck">YES</button>
        
        <lable>
            是否同意Jasper很萌？<input type="checkbox" ng-model="myCheck" />
        </lable>
        <p>{{myCheck}}</p>

 

 

 

2、ng-show="true/false" 是否显示
　　传入true表示显示，传入false表示隐藏


　　ng-hide同上 是否隐藏
　　传入true表示隐藏，传入false表示显示

 

<lable>
  <input type="checkbox" ng-model="myShow" />是否显示？
</lable>
<p ng-show="myShow">我显示出来啦！</p>

 

 

<lable>
  <input type="checkbox" ng-model="myHide" />是否隐藏？
</lable>
<p ng-hide="myHide">我隐藏啦！</p>

 

 

 

3、ng-if: 是否移除元素
　　当传入true是显示，传入false时移除
　　效果与ng-show相同，但是ng-show和ng-hide只是隐藏，而ng-if

 

4、hg-bind-html ： 相当于innerhtml
　　而ng-bind 相当于innerText

　　注意，要使用hg-bind-html，必须导入angular-sanitize.js文件进行安全验证。同时需要在声明模块的时候，在数组中注入安全验证模块'ngSanitize'

 

<div ng-bind-html="html"></div>

<script type="text/javascript">
   angular.module("app",[]).controller("ctrl",function($scope){
   $scope.html = '<h1>hahaha</h1>';</script>

 

 

5、ng-checked 设置复选框或单选矿的状态
　　传入true设置当前复选框被选中

<input type="checkbox" ng-model="all"> Check all<br><br>

<input type="checkbox" ng-checked="all">Volvo<br>
<input type="checkbox" ng-checked="all">Ford<br>
<input type="checkbox" ng-checked="all">Mercedes

 

 

 

6、ng-class: 用于设置给元素添加class类
　　可选值有以下几种情况:
　　① 可以是字符串.表示直接给元素添加对应的class。多个class之间，用空格分隔
　　② 可以是对象。对象的键表示class名字，对象的值为true或false，当值为true时表示添加对应的class
　　③ 可以是数组，数组中的值可以是字符串或对象，判断规则同上。

<style type="text/css">
  .div{
     width: 200px;
     height: 200px;
     background-color: red;
  }
  .div1{
     width: 200px;
     height: 200px;
     background-color: green;
  }
  .div3{
     color: blue;
  }
</style>

 

 

<div ng-class="'div div2'">这是一个div</div>
<lable>
  <input type="checkbox" ng-model="myClass" />是否给div添加样式？
</lable>
<div ng-class="{'div':myClass,'div1':!myClass}">这是一个div</div>
<div ng-class="[{'div':myClass,'div1':!myClass},'div3']">这是一个div</div>

 

 

 

8.2事件

 

AngularJS中的事件
AngularJS中的事件只能触发绑定在AngularJS作用域上面的属性和方法

<button ng-click="func()">点我弹个窗</button>
<button ng-mouseover="func()">mouseover</button>
<button ng-mouseout="func()">mouseout</button>
<button ng-mouseleave="func()">mouseleave</button>

<script type="text/javascript">
  angular.module("app",[]).controller("ctrl",function($scope){
  　　$scope.func=function(){
    　　 alert("Jasper真萌！")
  　　}
　　})
</script>

 

 

 

 

 九、AngularJS中的表单和输入验证

 

1、表单中，常用的验证操作：
　　$dirty 表单有填写记录
　　$valid 字段内容合法的
　　$invalid 字段内容是非法的
　　$pristine 表单没有填写记录
　　$error 表单验证不通过的错误信息
2、验证时，必须给form和input，设置name属性。
　　给form和input设置了name后，会自动将表单信息绑定到$scope作用域中。所以，可以直接使用formName.inputName.$验证操作， 得到验证结果
　　例如：
　　formName.inputName.$dirty = "true"; 表示表单被填写过！
　　formName.inputName.$invalid = "true"; 表示表单输入内容不合法！
　　formName.inputName.$error.required = "true"; 表示设置了必填，但是没有输入

 

注意:
$error支持的验证：
　　required /minlength /maxlength /partten /eami l/number /date /url等。

 

3、为了避免AngularJS的验证与html5的表单验证冲突！！比如说 type = "email" required等,h5也会进行验证，
　　那么可以给form添加“novalidate”属性，禁用HTML5的验证功能

<div class="container" style="width: 400px;margin: 50px auto; padding: 0px;">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <div class="panel-title" style="text-align: center;">用户注册</div>
                </div>
                <div class="panel-body">
                    <form class="form-horizontal" name="form" novalidate="novalidate">
                        <div class="row">
                            <div class="col-xs-3">用户名</div>
                            <div class="col-xs-9">
                                <input type="text" class="form-control" name="name" ng-model="user.name" required ng-minlength="6" ng-maxlength="12"/>
                                <p style="color: red; margin: 0px; " ng-show="form.name.$invalid && form.name.$dirty">
                                    <span ng-show="form.name.$error.required">用户名必填</span>
                                    <span ng-show="form.name.$error.minlength">用户名长度最小6位</span>
                                    <span ng-show="form.name.$error.maxlength">用户名长度最大16位</span>
                                </p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-3">邮箱</div>
                            <div class="col-xs-9">
                                <input type="email" class="form-control" name="email" ng-model="user.email" required/>
                                <p style="color: red; margin: 0px; " ng-show="form.email.$invalid && form.email.$dirty">
                                    <span ng-show="form.email.$error.required">邮箱必填</span>
                                    <span ng-show="form.email.$error.email">邮箱不合法</span>
                                </p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-3">密码</div>
                            <div class="col-xs-9">
                                <input type="password" class="form-control" name="pwd" ng-model="user.pwd" pattern="^\w{6,18}$" required="required"/>
                                <p style="color: red; margin: 0px; " ng-show="form.pwd.$invalid && form.pwd.$dirty">
                                    <span ng-show="form.pwd.$error.pattern">密码只能有6-18位的字母数字下划线组成</span>

                                </p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-3">确认密码</div>
                            <div class="col-xs-9">
                                <input type="text" class="form-control" name="repwd" ng-model="user.repwd" required="required"/>
                                <p style="color: red; margin: 0px;" ng-show="form.repwd.$dirty&&user.pwd!=user.repwd"></p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-5">
                                <input type="submit" value="注册" class="btn btn-success" ng-disabled="form.$invalid || user.pwd!=user.repwd"/>
                            </div>
                            <div class="col-xs-5">
                                <input type="submit" value="重置"  class="btn btn-warning"/>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        

 

 

十、 AngularJS中的动画

 

 

在AngularJS中使用动画：
1、导入angular-animate.js
2、如果页面中没有自定义app模块，则可以直接绑定系统模块ng-app="ngAnimate"
　　如果页面中有自定义app模块，则可以在自定义模块的数组中，注入ngAnimate
　　angular.module("app",["ngAnimate"])
3、当使用ng-show、ng-hide显示或者隐藏元素的时候，系统会自动添加或者移除.hg-hide这个类;
4、当使用ng-if、ng-switch、ng-repeat等其他指令，需要分别设置显示后和隐藏后 的两种class样式

显示后的class：
　　.hg-enter-active,.ne-leaave{}
隐藏后的class：
　　.hg-enter,.ne-leaave-active{}

<style type="text/css">
  .div{
     width: 200px;
     height: 200px;
     background-color: red;
     transition: all ease 1s;
  }
  .ng-hide{
     width: 0px;
     height: 0px;
     background-color: green;
     margin-right: -200px;
 }
 .ng-enter-active,.ne-leaave{}{
     width: 200px;
     height: 200px;
     background-color: red;
     margin: 200px;
  }
  .ng-enter,.ne-leaave-active{
    width: 0px;
    height: 0px;
    background-color: green;
    margin: 0px;
  }
</style>

 

 

<input type="checkbox" ng-model="myCheck"/>隐藏div
<div class="div" ng-show="!myCheck">这是一个div</div>

 

 

 

 

 

十一、 AngularJS中的路由

 

在AngularJS中使用路由：
1. 导入路由文件：angular-route.js

2. 在主模块中注入"ngRoute"。 rg:angular.module("app",["ngRoute"])

3. 将超链接改写为路由格式。 --> "#/标记"
<a href="#/">首页</a> 首页直接使用 #/ 表示
<a href="#/page1">page1</a> 其他页面"#/标记" 表示

4. 在config配置阶段，注入$routeProvider，进行路由配置：

5. 在页面的合适位置，添加ng-view，用于承载路由打开的页面：
<div ng-view></div> 或 <ng-view></ng-view>


【路由对象中接受的可选参数：】
① template： 自定义HTML模板，会直接将这段HTML记载到ng-view中；
② templateUrl： 导入外部的HTML模板文件。 为了避免冲突，外部的HTML应该是一个代码片段，即只保留body以内的部分。
③ controller： 在当前HTML模板上，执行的controller函数。会生出新的作用域$scope. 可以接受字符串(声明好的controller名字),也可以直接接受函数。

>>> 注意： 使用ng-view打开的页面，controller中的作用域是属于当前页面作用域的子作用域！！ 依然符合Angular中父子作用域"能读不能写"的要求！
>>> 所以： 如果需要在ng-view中修改当前作用域的变量，必须把这个变量声明为对象的属性！！

④ redirectTo：重定向。一般用于.otherwise()中，用于重定向回首页！

<style type="text/css">
            ul{
                overflow: hidden;
            }
            li{
                width: 100px;
                height: 40px;
                text-align: center;
                float: left;
                line-height: 40px;
                list-style: none;
                cursor: pointer;
            }
            li a{
                text-decoration: none;
                color: black;
            }
            li:hover{
                background-color: yellow;
            }
            #div1{
                width: 1000px;
                height: 500px;
                margin: 20px auto;
                border: 2px solid red;
            }
        </style>

<body ng-app="app" ng-controller="ctrl">
        
        <ul>
            <li><a href="#/">首页</a></li>
            <li><a href="#/page1">page1</a></li>
            <li><a href="#/page2">page2</a></li>
            <li><a href="#/page3">page3</a></li>
            <li><a href="#/page4">page4</a></li>
        </ul>
        <input type="text" ng-model="test" />
        <p>{{test}}</p>
        <p>{{obj.test}}</p>
            
        
    </body>

<script type="text/javascript">
    angular.module("app",["ngRoute"])
.config(function($routeProvider){
    $routeProvider
    .when("/",{template:'<h1 style="color:red;">这是首页</h1>'})
    .when("/page1",{templateUrl:"page.html",controller:"ctrl1"})
    .when("/page2",{templateUrl:"page.html",controller:function($scope){
        $scope.text = "这是ctrl不知道是几控制器！！"
    }})
    .when("/page3",{templateUrl:"page.html"})
    .when("/page4",{})
    .otherwise({redirectTo:"/"})
})
.controller("ctrl",function($scope){
    $scope.test = "这是一段测试文字！";
    $scope.obj = {
        test:"这是一个测试对象！"
    }
})
.controller("ctrl1",function($scope){
    $scope.text = "这是ctrl1控制器！";
})
</script>

 

AngularJS允许用户自定义指令！！
例如： <div ng-view></div> 或 <ng-view></ng-view>
1. 使用.directive()声明一个自定义指令；
2. 定义指令时，指令名必须使用驼峰命名法； 而调用指令时，用"-"链接
.directive("jiangHao") --> <jiang-hao><jiang-hao>
 .directive("jianghao") --> <jianghao><jianghao>
3. 定义指令时，对象中使用的属性：
① template: 调用指令时，生成的模板
 ② restrict: 用于声明指令允许的调用方式：
 E->允许标签名表明 A->允许属性调用 C->允许类名调用 M->允许注释调用
 默认值为：EA
如果需要注释调用，必须再添加一个属性：replace:true,而且注释调用前必须添加"directive:" eg:<!-- directive: jiang-hao -->

<body ng-app="app" ng-controller="ctrl">
        <div id="div1" ng-view></div>
        <!--<ng-view></ng-view>-->
        
        
        <jiang-hao></jiang-hao>
        <div jiang-hao></div>
        
        <div class="jiang-hao"></div>
        <!-- directive:jiang-hao -->
            
        
    </body>

<script type="text/javascript">
.directive("jiangHao",function(){
    return {
        restrict : "EACM",
        replace:true,
        template:"<h1>这是一个自定义指令</h1>",
        
    }
})
</script>