angularJS 入门基础

angular 　　

所有用到的库, 全部用的CDN：

复制代码 代码如下:
   
   
   
   

.angular的数据绑定实例,这个是最基础的,angular的所有枝叶全部从这里开始:.

复制代码 代码如下:





　　
   
   
   
   


   
   
       
            angular最强大的东西,数据的绑定binding
       
       
           
               
                {{data}}
               
           
       
   

通过angular,展示数组对应的数据;.

复制代码 代码如下:





　　
   
   
   
   


   
   
       
            通过angular,展示数组对应的数据;
       
       
           
               
                    .s{
                        color:#f00;
                    }
                    li{
                        cursor: pointer;
                    }
               
               

                   
• 
                          {{i.name}}----{{i.age}}
                     

               

               
           
       
   

.数据过滤器的DEMO：

复制代码 代码如下:





　　
   
   
   
   


   
   
       
            数据过滤器;
       
       
            {{sourCode}}
           

            {{sourCode | up}}
       
       
   

.factory工厂, $provider, service等等都是一样样的, 不要感觉很难, 其实就是看出一个数据模型或者实例就好了;：

复制代码 代码如下:





　　
   
   
   
   


   
   
       
            angular中的factory就相当于一个公用的实例方法,可以理解为一个多个控制器都可以用的函数;
       
       
            {{json}}
           
       
   
   
       
            angular的指令;
       
       
            do you content for?
           
       
   

.ng-switch指令的使用(这个跟模板很想的,就是我们常见的点击隐藏和显示Tab插件的angular首先):：

复制代码 代码如下:





　　
   
   
   
   


   
   
       
            ng-switch的使用
       
       
           
               

                   
• 1

                   
• 2

                   
• other

               

             
             
                  test
                  test     
                  test
             
       
       
   

ng-src和ng-href;

复制代码 代码如下:





　　
   
   
   
   


   
   
       
            ng-src和ng-href的使用(如果使用src或者href的话,HTML初始化的时候就会加载,肯定是不行的)
       
       
           
               
           
       
       
   

如何操作页面的样式,这个直接改绑定的数据模型就好了：

复制代码 代码如下:
   
       
            angular对样式进行操作;(jQ是手动选择元素对元素样式进行操作,angular提供了一种更屌的方法,把元素的属性赋值给一个变量,你只要改变这个变量即可)
       
       
           
                hehe--o(^▽^)o哇;
           
       
       
   

angular中的模板如何使用,这个要配合路由器使用比较叼:

复制代码 代码如下:





　　
   
   
   
   


   
   
       
            使用模板
       
       
                       
           
                           
           
           
                change
           
       
       
   

如何使用$scope.$watch实时改变绑定界面的模板:

复制代码 代码如下:





　　
   
   
   
   


   
   
       
            updateangular的通知数据更新三种方式$scope.$digest(),$scope.$apply(),以及通过$scope.$watch监听进行更新;
       
       
            {{hehe}}
           
           
                the value set by $scope.$watch ==>> {{wat}}
           
           

           
                applay;
           
       
       
   

angular中自己定义的工具方法

复制代码 代码如下:





　　
   
   
   
   


   
   
       
            angular中的工具方法列表
       
       
           
             

angular.bind

             

angular.bootstrap

             

angular.copy

             

angular.element

             

angular.equals

             

angular.extend

             

angular.forEach

             

angular.fromJson

             

angular.identity

             

angular.injector

             

angular.isArray

             

angular.isDate

             

angular.isDefined

             

angular.isElement

             

angular.isFunction

             

angular.isNumber

             

angular.isObject

             

angular.isString

             

angular.isUndefined

             

angular.lowercase

             

angular.module

             

angular.noop

             

angular.reloadWithDebugInfo

             

angular.toJson

             

angular.uppercase

           
           
                这些工具方法跟其他库差不多;
                angular.element是anguarLite选择元素的小JQ;
               

                angular.module是模块元素的方法;
           
       
   

ng-transclude的使用(这个是官方的案例)，代码如下:

复制代码 代码如下:





　　
   
   
   
   


   
   
       
            ng-transclude的使用(这个是官方的案例):
       
       
           
             

             

              {{text}}
           
       
       
   

一下验证邮箱准确性的例子:

复制代码 代码如下:





　　
   
   
   
   


   
   
       
            ngPaste以及ngMouseup和ngKeyup,ngModelOptions....等方法参考官方的使用,要用查API就好了,(官方的要FQ哦;)
       
       
       
            如果不用ng-message组件的错误提示如下;
       
       

        https://yearofmoo.github.io/ngMessages/">老外写的DEMO
       
       
   

setTimeout和setInterval都是经过angular包装过的，返回的是延迟对象的实例:

复制代码 代码如下:





　　
   
   
   
   


   
   
       
            $timeout和$interval,这两个服务;
       
       
           
               
                   

setInterval
                   

                    $interval(fn, delay, [count], [invokeApply]);
                   

               
               
                   

timeout
                   

                    $timeout(fn, [delay], [invokeApply]);
                   

               
           
           
               
                    0%
               
           
           
                start