Home > Web Front-end > JS Tutorial > Basics of getting started with angularJS_AngularJS

Basics of getting started with angularJS_AngularJS

WBOY
Release: 2016-05-16 16:15:07
Original
1237 people have browsed it

angular   

All libraries used, all CDNs used:

Copy code The code is as follows:


.angular data binding example, this is the most basic, all branches and leaves of angular start from here:.

Copy code The code is as follows:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">


angular
  
   


   
   

       

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

       

           

               
                {{data}}
                <script><br>                     app.controller("bf", function($scope) {<br>                         $scope.data = "testData";<br>                         //$scope.$apply();<br>                     });<br>                 </script>
           

       

   



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

复制代码 代码如下:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">


angular
  
   


   
   

       

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

       

           

               
               

                       

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

  •                

                <script><br>                     //angular.module("arr-app", []);<br>                     function arrCon($scope) {<br>                         $scope.flag = 0;<br>                         $scope.bered = function(i) {<br>                             $scope.flag = i;<br>                         };<br>                         $scope.lists = [<br>                             {name : "hehe",<br>                                 age:10},<br>                             {<br>                                 name : "xx",<br>                                 age : 20<br>                             },<br>                             {<br>                                 name : "yy",<br>Age: 2<br>                                                                                                                                                                                                                                            Name: "jj",<br> Age: 220<br>                                                                                                    } ]<br>                     };<br>                                                                                                                                                                                                                                                                                                             </div><br> </body><br> </html><br> <br><br> <br>.DEMO of data filter: <br> <br><br> </div> <p>Copy code</p> <p></p> <div class="codetitle"> The code is as follows:<span><div class="codebody" id="code19833"> <br> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"><br> <html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>"><br> <head><br> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br> <title>angular</title><br>   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><br>     <script src="<a href="http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script">http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script</a>><br>     <script src="<a href="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script">http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script</a>><br>     <link href="<a href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css">http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css</a>" rel="stylesheet"><br>     <script src="<a href="http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js">http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js</a>" type="text/javascript"></script>


   
   

       

            数据过滤器;
       

       

            {{sourCode}}
           

            {{sourCode | up}}
       

        <script><br>             function filte($scope) {<br>                 $scope.sourCode = "hehe lala dudu oo zz";<br>             };<br>             app.filter("up" ,function() {<br>                 return function(ipt) {<br>                     return ipt.replace(/ (w)/g,function($0,$1) {<br>                         return " " $1.toUpperCase();<br>                     });<br>                 }<br>             });<br>         </script>
   



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

复制代码 代码如下:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">


angular
  
   


   
   

       

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

       

            {{json}}
            <script><br>                 app.factory("ff", function() {<br>                     return {<br>                         "noting" : "json"<br>                     };<br>                 });<br>                 app.controller("factory", function($scope, ff) {<br>                     $scope.json = ff;<br>                 });<br>             </script>
       

   

   

       

            angular的指令;
       

         

                 do you content for?
                                                                                                                             app.directive("heh", function() {
                       return {
                          restrict: "AE",
Replace : true,
transclude : true,
template : '
'
                    };
                 })
                                                                                                                                                                                                  





Using the .ng-switch directive (this is very similar to the template, it is our common angular method of clicking to hide and show the Tab plug-in)::

Copy code The code is as follows:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">
http://www.w3.org/1999/xhtml">


angular
  
   


   
   

       

            ng-switch的使用
       

       

           

               

                       
  • 1

  •                    
  • 2

  •                    
  • other

  •                

             

             

                 
                       
                 
             

       

       
   



ng-src和ng-href;

复制代码 代码如下:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">


angular
  
   


   
   

       

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

       

           
               
           

       

       
   



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

复制代码 代码如下:

   

       

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

       

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

       

       


   
   

       

            使用模板
       

       

                       
           
                           
           

           

               
           

       

         


   
   

       

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

       

            {{hehe}}
           
           

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

           

           
       

         


   
   

       

            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

  •                                                                                                                                            

    These tools and methods are similar to other libraries;
                     angular.element is a small JQ for anguarLite to select elements;
                                                                                                     Angular.module is a method of module element;
                                                                                                                                                                                                                   






    Usage of ng-transclude (this is the official case), the code is as follows:

    Copy code

    The code is as follows:

    http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
    ">
    http://www.w3.org/1999/xhtml">


    angular
      
       


       
       

           

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

           

               

                 

                 

                  {{text}}
               

           

           



              

    NGPaste and ngmouseup and ngkeyup, ngmodeloptions ....... For reference to the official use, just check the API, (the official wants FQ;)
                                                                                                        
    Popular Tutorials
    More>
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template