前端开发

 首页 > 前端开发 > AngularJS > angularJS 入门基础_AngularJS_自学php网

angularJS 入门基础_AngularJS_自学php网

分享到：
【字体：大 中 小】
导读：
          这篇文章主要介绍了angularJS 入门基础的相关资料,需要的朋友可以参考下...

angular 　　

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

复制代码 代码如下:
   
   
   
   

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

复制代码 代码如下:




angular
　　
   
   
   
   


   
   


       

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

       

           

               
                {{data}}
               
           

       

   



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

复制代码 代码如下:




angular
　　
   
   
   
   


   
   


       

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

       

           

               
               

                       

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

    •                

               
           

       

   



.数据过滤器的DEMO：

复制代码 代码如下:




angular
　　
   
   
   
   


   
   


       

            数据过滤器;
       

       

            {{sourCode}}
           

            {{sourCode | up}}
       

       
   



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

复制代码 代码如下:




angular
　　
   
   
   
   


   
   


       

            angular中的factory就相当于一个公用的实例方法,可以理解为一个多个控制器都可以用的函数;
       

       
            {{json}}
           
       

   

   

       

            angular的指令;
       

       

            do you content for?
           
       

   



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

复制代码 代码如下:




angular
　　
   
   
   
   


   
   


       

            ng-switch的使用
       

       

           

               

                       
  • 1

    •                    
  • 2

    •                    
  • other

    •                

             

             

                 
                       
                 
             

       

       
   



ng-src和ng-href;

复制代码 代码如下:




angular
　　
   
   
   
   


   
   


       

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

       

           
               
           
       

       
   



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

复制代码 代码如下:
   


       

            angular对样式进行操作;(jQ是手动选择元素对元素样式进行操作,angular提供了一种更屌的方法,把元素的属性赋值给一个变量,你只要改变这个变量即可)
       

       

           
                hehe--o(^▽^)o哇;
           
       

       
   

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

复制代码 代码如下:




angular
　　
   
   
   
   


   
   


       

            使用模板
       

       

                       
           
                           
           

           

               
           

       

       
   



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

复制代码 代码如下:




angular
　　
   
   
   
   


   
   


       

            updateangular的通知数据更新三种方式$scope.$digest(),$scope.$apply(),以及通过$scope.$watch监听进行更新;
       

       

            {{hehe}}
           
           

                the value set by $scope.$watch ==>> {{wat}}
           

           

           
       

       
   



angular中自己定义的工具方法

复制代码 代码如下:




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的使用(这个是官方的案例)，代码如下:

    复制代码 代码如下:




    angular
    　　
       
       
       
       


       
       


           

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

           

               

                 

                 

                  {{text}}
               

           

           
       



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

    复制代码 代码如下:




    angular
    　　
       
       
       
       


       
       


           

                ngPaste以及ngMouseup和ngKeyup,ngModelOptions....等方法参考官方的使用,要用查API就好了,(官方的要FQ哦;)
           

           
           

                如果不用ng-message组件的错误提示如下;
           

             

               
               
               
               

                  You forgot to enter your email address...
               

               

                  You did not enter your email address correctly...
               

             

             
           

           

            老外写的DEMO
           

           
       



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

    复制代码 代码如下:




    angular
    　　
       
       
       
       


       
       


           

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

           

               

                   
                       

    setInterval


                       


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


                   
                   
                       

    timeout


                       


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


                   
               

               

                   

                        0%
                   

               

               
           

           
       



    分享到：
    angularJS结合canvas画图例子_AngularJS_...
    这里给大家分享一个angularJS结合canvas画图例子,效果非常不错，赞一个先。 复制代码 代码如下:                                                            //引用angular.directives-round-progress这个模块;      var APP = angul...
    angularJS 中$scope方法使用指南_Angular...
    复制代码 代码如下: 无标题文档             {{item}} + {{m}}     var app = angular.module("app", []); function c($scope){     $scope.items = [1,2,2,3,4,5,5];     $scope.m = "string"; }; app.directive("dir",function($parse){     return {   ...
    •         php迷，一个php技术的分享社区，专属您自己的技术摘抄本、收藏夹。
    • 在这里……

    Tags

    网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱  冀ICP备18013926号-2