angularJS 入门基础

an gular 　　

所有用到的库, 全部用的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}}

            

        

        
'  

                            ''  

                          ''

              };

          })

          .controller('ExampleController', ['$scope', function($scope) {

            $scope.title = 'Lorem Ipsum';

            $scope.text = 'Neque porro quisquam est qui dolorem ipsum quia dolor...';

          }]);

        

    

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

　　

    

    

    

    

    

    


        


            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