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

Grundlagen für den Einstieg in angleJS_AngularJS

May 16, 2016 pm 04:15 PM
angularjs Erste Schritte – Grundlagen

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;)
                                                                                                      

    Heiße KI -Werkzeuge

    Undresser.AI Undress

    Undresser.AI Undress

    KI-gestützte App zum Erstellen realistischer Aktfotos

    AI Clothes Remover

    AI Clothes Remover

    Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

    Undress AI Tool

    Undress AI Tool

    Ausziehbilder kostenlos

    Clothoff.io

    Clothoff.io

    KI-Kleiderentferner

    AI Hentai Generator

    AI Hentai Generator

    Erstellen Sie kostenlos Ai Hentai.

    Heiße Werkzeuge

    Notepad++7.3.1

    Notepad++7.3.1

    Einfach zu bedienender und kostenloser Code-Editor

    SublimeText3 chinesische Version

    SublimeText3 chinesische Version

    Chinesische Version, sehr einfach zu bedienen

    Senden Sie Studio 13.0.1

    Senden Sie Studio 13.0.1

    Leistungsstarke integrierte PHP-Entwicklungsumgebung

    Dreamweaver CS6

    Dreamweaver CS6

    Visuelle Webentwicklungstools

    SublimeText3 Mac-Version

    SublimeText3 Mac-Version

    Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

    Die neuesten 5 AngularJS-Tutorials im Jahr 2022, vom Einstieg bis zur Beherrschung Die neuesten 5 AngularJS-Tutorials im Jahr 2022, vom Einstieg bis zur Beherrschung Jun 15, 2017 pm 05:50 PM

    Javascript ist eine sehr einzigartige Sprache, was die Organisation des Codes, das Programmierparadigma des Codes und die objektorientierte Theorie betrifft. Die Frage, ob Javascript eine objektorientierte Sprache ist, wird seit langem diskutiert Es gibt offensichtlich schon seit langem eine Antwort. Auch wenn Javascript seit zwanzig Jahren vorherrscht, schauen Sie sich einfach das „Black Horse Cloud Classroom JavaScript Advanced Framework“ an, wenn Sie beliebte Frameworks wie jQuery, Angularjs und sogar React verstehen möchten Design-Video-Tutorial“.

    Verwenden Sie PHP und AngularJS, um eine reaktionsfähige Website zu erstellen und ein hochwertiges Benutzererlebnis zu bieten Verwenden Sie PHP und AngularJS, um eine reaktionsfähige Website zu erstellen und ein hochwertiges Benutzererlebnis zu bieten Jun 27, 2023 pm 07:37 PM

    Im heutigen Informationszeitalter sind Websites zu einem wichtigen Instrument für Menschen geworden, um Informationen zu erhalten und zu kommunizieren. Eine responsive Website kann sich an verschiedene Geräte anpassen und den Benutzern ein qualitativ hochwertiges Erlebnis bieten, was zu einem Hotspot in der modernen Website-Entwicklung geworden ist. In diesem Artikel erfahren Sie, wie Sie mit PHP und AngularJS eine responsive Website erstellen, um ein qualitativ hochwertiges Benutzererlebnis zu bieten. Einführung in PHP PHP ist eine serverseitige Open-Source-Programmiersprache, die sich ideal für die Webentwicklung eignet. PHP bietet viele Vorteile, z. B. einfache Erlernbarkeit, plattformübergreifende Funktionalität, umfangreiche Toolbibliothek und Entwicklungseffizienz

    Erstellen Sie Webanwendungen mit PHP und AngularJS Erstellen Sie Webanwendungen mit PHP und AngularJS May 27, 2023 pm 08:10 PM

    Mit der kontinuierlichen Entwicklung des Internets sind Webanwendungen zu einem wichtigen Bestandteil des Informationsaufbaus in Unternehmen und zu einem notwendigen Mittel für Modernisierungsarbeiten geworden. Um die Entwicklung, Wartung und Erweiterung von Webanwendungen zu vereinfachen, müssen Entwickler ein technisches Framework und eine Programmiersprache wählen, die ihren Entwicklungsanforderungen entspricht. PHP und AngularJS sind zwei sehr beliebte Webentwicklungstechnologien. Sie sind serverseitige bzw. clientseitige Lösungen und können die Entwicklungseffizienz und das Benutzererlebnis von Webanwendungen erheblich verbessern. Vorteile von PHPPHP

    Grundlegendes Tutorial zur WPS-Tabelleneingabe in der mobilen Version Grundlegendes Tutorial zur WPS-Tabelleneingabe in der mobilen Version Mar 20, 2024 pm 06:46 PM

    Heutige Mobiltelefone sind nicht nur ein Kommunikationsmittel, sondern ihre Funktionen beschränken sich nicht nur auf das Versenden von Nachrichten und das Tätigen von Telefongesprächen. Jetzt ist auch die Intelligenz in unser Leben eingedrungen und hat Computer praktisch ersetzt. Heute lernen wir mit Ihnen den Inhalt der mobilen Version des Basis-Tutorials für den Einstieg in WPS-Tabellen kennen. 1. Klicken Sie auf die WPS-Software im Mobiltelefon. Im Allgemeinen werden Mobiltelefone mit dieser Software geliefert. Wenn nicht, können Sie eine für die zukünftige Verwendung herunterladen. Im Allgemeinen wird das zuletzt angezeigte Dokument angezeigt. Klicken Sie auf die dritte Schaltfläche unten, die Schaltfläche „Neu“. 2. Wir möchten eine Tabelle erstellen. Klicken Sie daher in der Mitte auf das Symbol „Tabelle“. 3. Sie können mit der Bearbeitung der Tabelle beginnen. Die Tastatur und allgemeine Werkzeuge finden Sie im Menü unten.

    Verwenden Sie PHP und AngularJS, um eine Online-Dateiverwaltungsplattform zu entwickeln, die die Dateiverwaltung erleichtert Verwenden Sie PHP und AngularJS, um eine Online-Dateiverwaltungsplattform zu entwickeln, die die Dateiverwaltung erleichtert Jun 27, 2023 pm 01:34 PM

    Mit der Popularität des Internets nutzen immer mehr Menschen das Netzwerk, um Dateien zu übertragen und zu teilen. Aus verschiedenen Gründen kann die Verwendung herkömmlicher FTP- und anderer Methoden zur Dateiverwaltung jedoch nicht den Anforderungen moderner Benutzer gerecht werden. Daher ist die Einrichtung einer benutzerfreundlichen, effizienten und sicheren Online-Dateiverwaltungsplattform zu einem Trend geworden. Die in diesem Artikel vorgestellte Online-Dateiverwaltungsplattform basiert auf PHP und AngularJS. Sie kann problemlos Dateien hochladen, herunterladen, bearbeiten, löschen und andere Vorgänge ausführen und bietet eine Reihe leistungsstarker Funktionen wie Dateifreigabe, Suche,

    So verwenden Sie PHP und AngularJS für die Frontend-Entwicklung So verwenden Sie PHP und AngularJS für die Frontend-Entwicklung May 11, 2023 pm 05:18 PM

    Mit der Popularität und Entwicklung des Internets wird die Front-End-Entwicklung immer wichtiger. Als Frontend-Entwickler müssen wir verschiedene Entwicklungstools und -technologien verstehen und beherrschen. Unter ihnen sind PHP und AngularJS zwei sehr nützliche und beliebte Tools. In diesem Artikel erklären wir, wie Sie diese beiden Tools für die Frontend-Entwicklung verwenden. 1. Einführung in PHP PHP ist eine beliebte serverseitige Open-Source-Skriptsprache. Sie eignet sich für die Webentwicklung und kann auf Webservern und verschiedenen Betriebssystemen ausgeführt werden. Die Vorteile von PHP sind Einfachheit, Geschwindigkeit und Komfort

    Wie verwende ich AngularJS in der PHP-Programmierung? Wie verwende ich AngularJS in der PHP-Programmierung? Jun 12, 2023 am 09:40 AM

    Mit der Popularität von Webanwendungen erfreut sich das Frontend-Framework AngularJS immer größerer Beliebtheit. AngularJS ist ein von Google entwickeltes JavaScript-Framework, das Sie beim Erstellen von Webanwendungen mit dynamischen Webanwendungsfunktionen unterstützt. Andererseits ist PHP für die Backend-Programmierung eine sehr beliebte Programmiersprache. Wenn Sie PHP für die serverseitige Programmierung verwenden, bringt die Verwendung von PHP mit AngularJS dynamischere Effekte auf Ihre Website.

    Einführung in die Grundlagen von AngularJS Einführung in die Grundlagen von AngularJS Apr 21, 2018 am 10:37 AM

    Der Inhalt dieses Artikels befasst sich mit der grundlegenden Einführung in AngularJS. Jetzt kann ich ihn mit Ihnen teilen.

    See all articles