Maison > interface Web > js tutoriel > Bases pour démarrer avec angulaireJS_AngularJS

Bases pour démarrer avec angulaireJS_AngularJS

WBOY
Libérer: 2016-05-16 16:15:07
original
1237 Les gens l'ont consulté

angulaire   

Toutes les bibliothèques utilisées, tous les CDN utilisés :

Copier le code Le code est le suivant :


Exemple de liaison de données .angular, c'est le plus basique, toutes les branches et feuilles d'angular commencent à partir d'ici :.

Copier le code Le code est le suivant :

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


angulaire
  
   


   
   

       

            angulaire最强大的东西,数据的绑定reliure
       

       

           

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

       

   



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

复制代码 代码如下 :

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>                     fonction arrCon ($ scope) {<br>                         $scope.flag = 0;<br>                         $scope.bered = fonction(i) {<br>                             $scope.flag = je;<br>                         };<br>                         $scope.lists = [<br>                             {nom : "héhé",<br>                                 âge : 10},<br>                             {<br>                                 nom : "xx",<br>                                 âge : 20<br>                             },<br>                             {<br>                                 nom : "aa",<br>Âge : 2<br>                                                                                                                                                                                                                                            Nom : "jj",<br> Âge : 220<br>                                                                                                    } ]<br>                     };<br>                                                                                                                                                                                                                                                                                                         </div><br> </corps><br> </html><br> <br><br> <br>.DEMO du filtre de données : <br> <br><br> </div> <p>Copier le code</p> <p></p> <div class="codetitle"> Le code est le suivant :<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> <tête><br> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br> <titre>angulaire</titre><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}}
           

            {{code sour | vers le haut}}
       

        <script><br>             fonction filtre ($ scope) {<br>                 $scope.sourCode = "héhé lala dudu oo zz";<br>             };<br>             app.filter("up",function() {<br>                 fonction de retour (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的指令;
       

         

                 êtes-vous satisfait ?
                                                                                                                             app.directive("heh", function() {
                       retourner {
                          restreindre : "AE",
Remplacer : vrai,
transclure : vrai,
modèle : '
'
                    };
                 })
                                                                                                                                                                                              





En utilisant la directive .ng-switch (c'est très similaire au modèle, c'est notre méthode angulaire courante de clic pour masquer et afficher le plug-in Tab) : :

Copier le code Le code est le suivant :

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


angulaire
  
   


   
   

       

            ng-switch的使用
       

       

           

               

                       
  • 1

  •                    
  • 2

  •                    
  • autre

  •                

             

             

                  test
                  test     
                  test
             

       

       
   



ng-src和ng-href;

复制代码 代码如下 :

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


angulaire
  
   


   
   

       

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

  •              
  • angular.module

  •              
  • angular.noop

  •              
  • angular.reloadWithDebugInfo

  •                                                                                                                                                                                                                         

  •                           
  • angular.uppercase

  •                                                                                                                                          

    Ces outils et méthodes sont similaires à d'autres bibliothèques ;
                     angulaire.element est un petit JQ permettant à anguarLite de sélectionner des éléments ;
                                                                                                     Angular.module est une méthode d'élément de module ;
                                                                                                                                                                                                               






    Utilisation de ng-transclude (c'est le cas officiel), le code est le suivant :

    Copier le code

    Le code est le suivant :

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


    angular
      
       


       
       

           

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

           

               

                 

                 

                  {{text}}
               

           

           



              

    NGPaste et ngmouseup et ngkeyup, ngmodeloptions ....... Pour référence à l'utilisation officielle, vérifiez simplement l'API, (le fonctionnaire veut FQ ;)
                                                                                                    
    Tutoriels populaires
    Plus>
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal