AngularJS 框架

Posted Tracey_W

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AngularJS 框架相关的知识，希望对你有一定的参考价值。

AngularJS 通过 指令 扩展了 html，且通过 表达式 绑定数据到 HTML。

【Angular JS表达式】
  1、Angular JS使用双{{}}绑定方式。用于将表达式的内容输出到页面中。
       表达式可以是文字、运算符、变量等，也可以在表达式中进行运算输出结果
            eg.  <p>{{ 5+5+"Angular" }}</p>
       如果Angular.js文件放在文件下方，在页面刷新的瞬间看到{{}}表达式，可以使用<div ng-bind="name"></div>方式绑定
            eg.上式可以改为：<p ng-bind="5+5+\'Angular\' "></p>

<!--举例 两条语句作用相同-->
    <p>{{ 5+5+"Angular" }}</p> 
    <p ng-bind="5+5+\'Angular\' "></p>>

 示意图 

【AngularJS 常用指令】
      AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。
         1、ng-app：AngularJS所管辖的区域。一般写在body或HTML标签上，原则上一个页面只能有一个
                eg. <body ng-app=""></body>
         2、ng-model ：把元素值（比如输入域的值）绑定到应用程序的变量中。
                eg.<input type="text" ng-model = "name" />
         3、ng-bind：把应用程序变量中的值，输出到页面HTML视图中。可以与表达式{{}}互相替换。
                eg.<div ng-bind="name"></div>        
         4、ng-init：初始化AngularJS应用程序中的变量值；
                eg. <body ng-app="" ng-init=" name=\'jredu\' ">
                应用程序初始化时，name变量就赋有初值。

<!--AngularJS 绑定input与div(双向数据绑定)-->
<body ng-app="" ng-init="name=\'Genista\'">  <!--输入框前缀-->
    <input type="text" ng-model = "name" />
    <input type="text" ng-model = "name" />
    <div>{{name+"123"}}</div>    <!--表达式（会有bug，可以改变angularJS导入顺序来解决）-->
    <div ng-bind="name"></div>
</body>

 示意图 

【MVC 三层架构】
   1、Model（模型层）:应用程序中用于处理数据的部分（包括将数据保存或者修改到数据库、变量文件中）。
                                        在AngularJS中，Model 特指的是 应用程序中的各种数据。
        View（视图层）：用户可以看到的用于显示数据的页面。（只有view是用户可见的）
        Controller（控制器）：是链接Model和View的桥梁，负责从view读取数据、接收用户的操作输入；并将数据发送给model层。
      　　　　　　　　　　　  model对数据处理完毕后，将结果返回给 Controller，Controller再将结果返回给View层显示。

 如何 创建一个angular的模块，即ng-app="" 需要绑定的部分？
       需要接收两个参数： eg. var app = angular.module("myApp",[]);
          ① 模块名称：即 angular.module 双引号中绑定的名字。
          ② 数组：表示需要注入的模块名称，不需要注入其他模块，可用空数组代替。
            >>> Angular（2.0）将常用放入功能封装在angular.js，创建主模块时可以直接使用，无需注入。
            >>>而一些应用较少的功能，需要导入相应的JS文件，并且在[]中注入进这个模块，才可以使用。
            这就是AngularJS（1.0）中的【模块开发】和【依赖注入】。

 如何 在AngularJS模块上，创建一个控制器？

　　需要传入两个参数：    
         ① 控制器名字：即ng-controller需要绑定的名字
                 <div ng-controller="myCtrol">
         ② 控制器的构造函数，构造函数可以传入多个参数
               >>>如果又在函数中使用系统的内置对象，则必须通过函数的参数传入，否则不能使用
               >>>AngularJS 中的内置对象，都用$开头，例如 $scope,$rootScope

【AngularJS的作用域】
         ① $scope：局部作用域，声明在$scope上的属性和方法，只能在当前的Controller使用；
         ② $rootScope：根作用域，声明在$scope上的属性和方法，可以在整个ng-app所含范围内使用。
         >>>如果没有使用 $scope 声明变量，而是直接使用ng-model在HTML标签中绑定的数据的作用域为：
         1、如果ng-mode写在某个 Controller 中，则这个变量会默认绑定到当前的Controller的$scope上；
         2、如果ng-mode没有写在任何一个 Controller 中，则这个变量会默认绑定到  Controller的 $rootScope 上；

        【注】 AngularJS中的父子作用域
        1、AngularJS中，子作用域只能访问父作用域中的变量，二不能修改父作用域的变量；
        2、为了解决上述问题，可以将副作用域中的变量声明为引用数据类型，例如对象等。
            这样可以在子作用域中，直接修改对象属性，而不需要修改对象本身保存的地址。
            见"myCtrol1"举例

<div ng-controller="myCtrol1">
    <input type="text" ng-model="name" placeholder="myCtrol1 name" /> <!--局部变量-->
    <div ng-bind="name+\'------------myCtrol1的name\'"></div>
    <div ng-bind="age+\'------------myCtrol1的age\'"></div>
            
    <input type="text" ng-model="test" placeholder="myCtrol1 test" /> <!--局部变量-->
    <input type="text" ng-model="obj.test" placeholder="myCtrol1 obj.test" /> <!--局部变量-->
            
    <!--父子作用域-->
    <mark ng-bind="test+\'myCtrl1-test\'"></mark>
    <mark ng-bind="obj.test+\'myCtrl1-obj.test\'"></mark>
            
</div>  
    <mark ng-bind="test+\'全局-test\'"></mark><br />
    <mark ng-bind="obj.test+\'全局-obj.test\'"></mark><br /> 
<script type="text/javascript">
        var app = angular.module("myApp",[]);
        app.controller("myCtrol1",function($rootScope){
            $rootScope.test = "aaaaa";
            $rootScope.obj = {
                test :"bbbbb",
            };
        });
</script>

 示意图 

【AngularJS中的过滤器】
    过滤器可以使用一个管道字符（|）添加到表达式和指令中。
      1、系统内置的过滤器
        currency：将数字格式化为货币形式。
        filter：从数组项中选择一个子集。
        orderBy：根据某个表达式排列数组。
        lowercase：格式化字符串为小写。        
        uppercase：格式化字符串为大写。

　　2、自定义过滤器（写在控制器外面） ，同时 需要传递过滤参数。
         调用过滤器实例：
             传入参数4，将被 过滤函数 的 num形参 所接收。

<script type="text/javascript">
angular.module("app",[])
/*实现隐藏手机号码后四位*/        
.filter("hideTel",function(){
    return function(text,num){
        num = num>0&&num<11?num:3;
        text = text+"";
        var newTest = text.substring(0,11-num) +text.substring(11-num,11).replace(/\\d/g,"*");                
        return newTest;
    }           
})
</script>

【AngularJS中的服务Service】
    1、内置服务：
         要是服务，必须要把服务名通过controller的构造函数的参数注入进来！
         服务内置的服务，统一使用$开头，服务中的属性和方法统一使用$$开头！自定义服务时，需注意与系统服务的写法区分开
         $location：返回当前页面的URL地址信息，第一个对象。
         $http：向服务器发送请求，应用响应服务器传送过来的数据。相当于JQuery中的Ajax
         $timeout：相当于setTimeout();

　2、自定义服务
         第一个参数是 服务名;
         第二个参数是自定义服务的构造函数。我们自定义的服务，本质是一个对象。
         对象的属性，可以在构造函数中，使用this.属性表示；
         对象的方法，可以在构造函数中，使用this.方法表示；

<script type="text/javascript">
    angular.module("app",[])
   .controller("ctrl",function($scope,$location,$timeout,$interval,hexafy){      // 控制器（调用自定义服务不加$符号）
        $scope.local = $location.$$host;

        $timeout(function(){
            $scope.time = "两秒后出现！";
        },2000);
            
        $scope.num = 0;           // 用$声明一个变量
        $interval(function(){
            $scope.num++;
        },1000);
                    
/*service 自定义服务的使用*/
          $scope.gn=hexafy.gn;        
          $scope.num1 = hexafy.func(10);           
        })         
            
    .service("hexafy",function(){
        this.gn = "将十进制转换为十六进制";     // 使用this.属性 把变量添加到函数上
        this.func = function(num){                 // this.方法
        return num.toString(16);
            }         
    }    
</script>

 示意图 

【AngularJS中的DOM和事件】

　　1、DOM

　　ng-disabled="false" 　　传入true表示禁用，传入false表示可用       
       ng-show="false"　　传入true表示显示，传入false表示隐藏  
       ng-hide="false"　　 传入true表示隐藏，传入false表示显示

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

<body ng-app="app" ng-controller="ctrl">
        <!--【ng-disabled】-->
        <button ng-disabled="!myCheck">点击</button>
        <label>
            <input type="checkbox" ng-model="myCheck" /> 是否同意协议
        </label>
        <p>{{myCheck}}</p>
        <!--【ng-show】-->
        <label>
            <input type="checkbox" ng-model="myCheck1" /> 是否显示
        </label>
        <p ng-show="myCheck1">哈哈，来咯！</p>
        <!--【ng-hide】-->
        <label>
            <input type="checkbox" ng-model="myCheck2" /> 是否隐藏
        </label>
        <p ng-hide="myCheck2">呜呜，拜拜！</p>
</body>

示意图

【AngularJS的表单验证】
    1、表单中，常用的验证操作：
            $dirty    表单有填写记录
            $valid    字段内容合法的
            $invalid    字段内容是非法的
            $pristine    表单没有填写记录
            $error  表单验证不通过的错误信息
    2、验证时，必须给form和input，设置name属性。
          给form和input设置name后，会自动将表单信息绑定到$scope 作用域中。所以，可以直接使用formName.inputName.$验证操作   得到验证结果
            eg.
            formName.inputName.$dirty = "true"  表示表单被填写过
            formName.inputName.$invalid = "true"  表示表单输入内容不合法
            formName.inputName.$error.required= "true"  表示表单设置了必填，但是没有输入
        【注】$error 支持的验证
       　　    required/minlength/maxlength/partten/email/number/data/url等
     3、为了避免AngularJS的验证与HTML5的验证表单冲突！例如，type = "email" required等，H5也会进行验证，可以给form添加 "novalidate" 属性，禁用HTML5的验证功能。

用户名验证功能——代码举例 ↓↓↓

<div class="panel-body">
     <form class="form-horizontal" novalidate="novalidate" name="form">
         <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=" required" ng-minlength="6" ng-maxlength="12"/>        
                      <p style="color: aquamarine; 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">用户名长度最多12位</span>
                      </p>
                                
               </div>
           </div>
       </form>
 </div>

示意图

【AngularJS中使用动画】
    1、导入angular-animate.js
    2、 如果页面中没有自定义app模块，则可以直接绑定系统模块ng-app="ngAnimate"
          如果页面中有自定义的app模块，则可以在自定义模块的数组中，注入ngAnimate。
         angular.module("app",["ngAnimate"])
      
    3、 当使用ng-show、ng-hide显示或者隐藏元素的时候， 系统会自动添加或者移除.ng-hide这个class类；
      
    4、 当使用ng-if/ng-switch/ng-repeat等其他指令，需要分别设置显示后和隐藏后的两种class样式：
          显示后的class： .ng-enter-active,.ng-leave{}
          隐藏后的class： .ng-enter,.ng-leave-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-left: -200px;*/
          }         
       .ng-enter-active,.ng-leave{
             width: 200px;
             height: 200px;
             background-color: red;
           }
        .ng-enter,.ng-leave-active{
              width: 0px;
              height: 0px;
              background-color: green;      
           }
 </style>

<body ng-app="app" ng-controller以上是关于AngularJS 框架的主要内容，如果未能解决你的问题，请参考以下文章
 

 从 AngularJS url 中删除片段标识符（# 符号）


 初入AngularJS基础门


 AngularJS ——ngResourceRESTful APIs 使用


 浅谈AngularJS中的$parse和$eval


 AngularJS


 text 来自Codyhouse框架的Browserlist片段源代码