suchen

Heim >Web-Frontend >js-Tutorial >Grundlagen für den Einstieg in angleJS_AngularJS

Grundlagen für den Einstieg in angleJS_AngularJS

WBOY
WBOYOriginal
2016-05-16 16:15:071233Durchsuche

eckig 　　

Alle verwendeten Bibliotheken, alle verwendeten CDNs:

Code kopieren Der Code lautet wie folgt:


.Angular-Datenbindungsbeispiel, dies ist das einfachste, alle Zweige und Blätter von Angular beginnen hier:.

Code kopieren Der Code lautet wie folgt:

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


angular
　　
   


   
   

       

            eckig最强大的东西,数据的绑定Bindung
       

       

           

               
                {{Daten}}
                <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,展示数组对应的数据;
       

       

           

               
                    .s{
                        Farbe:#f00;
                    }
                    li{
                        Cursor: Zeiger;
                    }
               
               

                       

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

    •                

                <script><br>                     //angular.module("arr-app", []);<br>                     Funktion arrCon($scope) {<br>                         $scope.flag = 0;<br>                         $scope.bered = function(i) {<br>                             $scope.flag = i;<br>                         };<br>                         $scope.lists = [<br>                             {Name: „hehe“,<br>                                 Alter: 10},<br>                             {<br>                                 Name: „xx“,<br>                                 Alter: 20<br>                             },<br>                             {<br>                                 Name: „yy“,<br>Alter: 2<br>                                                                                                                                                                                                                                 Name: „jj“,<br> Alter: 220<br>                                                                                                } ]<br>                     };<br>                                                                                                                                                                                                                                                                                                 </div><br> </body><br> </html><br> <br><br> <br>.DEMO des Datenfilters: <br> <br><br> </div> <p>Code kopieren</p> <p></p> <div class="codetitle"> Der Code lautet wie folgt:<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> <Kopf><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>             Funktion filte($scope) {<br>                 $scope.sourCode = "hehe lala dudu oo zz";<br>             };<br>             app.filter("up" ,function() {<br>                 Rückgabefunktion(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的指令;
       

         

                 Inhalten Sie für?
                                                                                                                        app.directive("heh", function() {
                       zurück {
                          einschränken: „AE“,
Ersetzen: true,
transclude: wahr,
Vorlage: '
'
                    };
                 })
                                                                                                                                                                                           





Verwenden der .ng-switch-Direktive (diese ist der Vorlage sehr ähnlich, es ist unsere übliche Winkelmethode zum Klicken, um das Tab-Plug-in anzuzeigen und auszublenden)::

Code kopieren Der Code lautet wie folgt:

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.isUndefiniert

    •              
  • angular.lowercase

    •              
  • angular.module

    •              
  • angular.noop

    •              
  • angular.reloadWithDebugInfo

    • & Lt; li rollen = "Präsentation" & gt; & lt; a href = "###" & gt; Angular.tojson & lt;/a & gt; & lt;/li & gt;
                              
  • angular.uppercase

    •                                                                                                                                      

    Diese Tools und Methoden ähneln anderen Bibliotheken;
                     angle.element ist eine kleine JQ für anguarLite zur Auswahl von Elementen;
                                                                                              Angular.module ist eine Methode des Modulelements;
                                                                                                                                                                                                            






    Verwendung von ng-transclude (dies ist der offizielle Fall), der Code lautet wie folgt:

    Code kopieren

    Der Code lautet wie folgt:

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


    angular
    　　
       


       
       

           

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

           

               

                 

                 

                  {{text}}
               

           

           



              

    NGPaste und ngmouseup und ngkeyup, ngmodeloptions ....... Als Referenz zur offiziellen Verwendung schauen Sie sich einfach die API an (der Beamte möchte FQ;)