angularJS 入门基础

angular 　　

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

复制代码 代码如下:

   
   
   
   

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

复制代码 代码如下:

　　
   
   
   
   


   
   

       

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

       

           

               
                {{data}}
               
           

       

   

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

复制代码 代码如下:

　　
   
   
   
   


   
   

       

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

       

           

               
               

                   
• 
                          {{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组件的错误提示如下;
       

         

            Enter your email address:
           
           
           

              You forgot to enter your email address...
           

           

              You did not enter your email address correctly...
           

         

         
       

       

        老外写的DEMO
       

       
   

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

复制代码 代码如下:

　　
   
   
   
   


   
   

       

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

       

           

               
                   

setInterval

                   

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

               
               
                   

timeout

                   

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

               
           

           

               

                    0%
               

           

           
                start