Einführung in die Grundlagen von AngularJS-js-Tutorial-php.cn

Einführung in die Grundlagen von AngularJS

零到壹度

Freigeben： 2022-12-07 09:49:43

Original

2020 Leute haben es durchsucht

Der Inhalt dieses Artikels handelt von der grundlegenden Einführung in angularjs. Jetzt kann ich ihn mit Ihnen teilen.

Wichtige Punkte:

Front-End-JS-Framework: Es kapselt die Verwendung von JS zur Entwicklung repetitiver Front-End-Funktionen, erweitert HTML und ist hauptsächlich Wird für die Seitenbedienung und -anzeige verwendet.

Kern: MVC, Modularisierung, bidirektionale Datenbindung, Abhängigkeitsinjektion, semantische Tags, Ausdrücke usw. [Empfohlene verwandte Video-Tutorials: AngularJS-Video-Tutorial]

Zwei-Wege-Datenbindung

Einführung relevanter js-Dateien

<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
       <title></title>
       <!--引入Angularjs-->
       <script type="text/javascript" src="../js/angular.min.js" ></script>
    </head>
    <body>
       <!--匿名应用模块-->
       <p ng-app="">
           <input ng-model="username" name="username"/>
           <input ng-model="username"/>
           <p>{{username}}</p>
           <p ng-bind="username"></p>
       </p>
    </body>
</html>

Nach dem Login kopieren

ng-app=““Anonymes Anwendungsmodul, im Allgemeinen muss ein Name geschrieben werden, um die spätere Initialisierung zu erleichtern ng -model: Binden Sie den Wert des

-Formularelements

automatisch an die interne Variable von Angularjs.

ng-bind: Die Funktion entspricht dem Ausdruck, die Verwendung ist jedoch unterschiedlich. Wird im Allgemeinen zum Binden von Nicht-Formularelementen und zum Anzeigen von Variablen verwendet. Der Unterschied zwischen

ng-bind und {{}}: Ersteres ersetzt den gesamten Inhalt der Sub-Tags des Tags durch den Inhalt der Variablen, während letzteres nur den Inhalt der Variablen am anzeigt aktuelle Position.

Basierend auf modularisiertem MVC (MVVM)

Ansicht: Bezieht sich hauptsächlich auf statische HTML-Seitendaten-Tags, die hauptsächlich zur Anzeige verwendet werden.

Modell: Füllt hauptsächlich nur einige Daten der Ansicht und der logischen Verarbeitung aus. Zum Beispiel JSON, Variable

Steuerung: Etwas JS-Code, Schreiblogik. Hauptsächlich, um das Modell abzurufen, die Ansicht zu füllen, Daten aus der Ansicht abzurufen und das Modell zu füllen.

Konvertierung zwischen m und vm:

var username=”XiaoQi”;
$scope.username=username;

Nach dem Login kopieren

Zum Beispiel Variable:

Die Variable von vm ist tatsächlich an das Attribut in der globalen Variablen $scope gebunden.

Auf der Seite: {{username}}

Hinweis: Angularjs-Variablen können nicht zu $scope auf der Seite hinzugefügt werden.

Wenn die Variable durch interne JS wie den Timer geändert wird, kann Angularjs standardmäßig keine bidirektionale Datenbindungsanzeige implementieren und $.digest muss verwendet werden, um eine Benachrichtigung (Aktualisierung) zu erzwingen

<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
       <title></title>
       <!--引入Angularjs-->
       <script type="text/javascript" src="../js/angular.min.js" ></script>
    </head>
    <body>
       <!--<p ng-app="myApp" ng-controller="myCtrl"  ng-init="username=&#39;Jack&#39;">-->
       
       <p ng-app="myApp" ng-controller="myCtrl">
           
           <input ng-model="username"/>
           <p>{{username}}</p>
       </p>
       
       <!--控制器-->
       <script type="text/javascript">
           //初始化应用模块
           //参数1：应用模块的名字
           //参数2：使用扩展模块，这里没有
           var myApp=angular.module("myApp",[]);
           //初始化控制器：认为控制器绑定了一堆js
           //参数1：控制器的名字
           //参数2：js函数
           myApp.controller("myCtrl",["$scope",function ($scope) {
              //初始化变量
              $scope.username="XiaoQi";
              //可以写任何的js
           }]);
           
       </script>
    </body>
</html>

Nach dem Login kopieren

Beispiel für die Initialisierung von Inhalten beim Öffnen der Seite:

Hinweis:

Bei benannten Anwendungsmodulen und Controllern definiert sind, dann muss es mit js initialisiert werden!

Dependency Injection DI

<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
       <title></title>
       <!--引入Angularjs-->
       <script type="text/javascript" src="../js/angular.min.js" ></script>
    </head>
    <body>
       <!--视图-->
       <p ng-app="myApp" ng-controller="myCtrl">
           <input ng-model="username"/>
           <input type="button" value="清空数据1" ng-click="clearMsg()"/>
           <input type="button" value="清空数据2" ng-click="username=&#39;&#39;"/>
           <p>Hello {{username}}</p>
       </p>
       <!--控制器-->
       <script type="text/javascript">
           //初始化应用模块
           var myApp=angular.module("myApp",[]);
           //初始化控制器
           myApp.controller("myCtrl",["$scope",function($scope){
              //初始化一个angularjs的事件
              $scope.clearMsg=function(){
                  //清空数据
                  $scope.username="";
              };
           }]);
       </script>
    </body>
</html>

Nach dem Login kopieren

<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
       <title></title>
       <!--引入Angularjs-->
       <script type="text/javascript" src="../js/angular.min.js" ></script>
    </head>
    <body>
       <!--视图-->
       <p ng-app="myApp" ng-controller="myCtrl">
           <table border="1">
              <tr>
                  <th>序号</th>
                  <th>商品编号</th>
                  <th>商品名称</th>
                  <th>商品价格</th>
              </tr>
              <tr ng-repeat="product in  products">
                  <td>{{$index+1}}</td>
                  <td>{{product.id}}</td>
                  <td>{{product.name}}</td>
                  <td>{{product.price}}</td>
              </tr>
           </table>
       </p>
       <!--控制器-->
       <script type="text/javascript">
           angular.module("myApp",[])
           .controller("myCtrl",["$scope",function($scope){
              //json数组
              $scope.products=[
                  {"id":1001,"name":"电视机","price":998},
                  {"id":1002,"name":"洗衣机","price":988898}
              ];
           }])
        </script>
    </body>
</html>

Nach dem Login kopieren

Button-Ereignisbindung

Wiederholte Durchquerung

< td valign="top" style="word-break: break-all;">

Produkt: Schreiben Sie, was Sie wollen, ein temporäres AngularJS-Objekt für jede Durchquerung, hier bezieht sich auf jedes JSON-Objekt.

Routing-Mechanismus
Vorher: Einschließen schließt Seiten ein, die nur Seiten wiederverwenden, aber die wiederverwendeten Seiten werden auch als Ganzes aktualisiert.

Durch AngularJS-Routing kann eine teilweise Aktualisierung erreicht werden, und wiederholte Head-and-Tail-Operationen können ohne Aktualisierung realisiert werden. Und Multi-View-Einzelseiteneffekt.

zugrunde liegende Implementierung: implementiert durch # (Anker) in HTML.

<!--引入路由模块-->
       <script type="text/javascript"  src="../js/angular-route.min.js"  ></script>

Nach dem Login kopieren

Offizielles Beispiel:

<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
       <title></title>
       <!--引入Angularjs-->
       <script type="text/javascript" src="../js/angular.min.js" ></script>
       <!--引入路由模块-->
       <script type="text/javascript" src="../js/angular-route.min.js" ></script>
    </head>
    <body>
       <p ng-app="myApp">
           <p>===========我是头<br />
              <a href="#/">首页</a>
              <a href="#/computer">电脑分类</a>
              <a href="#/money">财务管理</a>
           </p>
           <!--路由中的包含的页面的显示，只能有一个元素-->
           <p ng-view></p>
           
           <p>==========我是脚</p>
           
       </p>
    
    
       <!--控制器-->
       <script type="text/javascript">
           angular.module("myApp",[&#39;ngRoute&#39;])
           //angularjs的配置，在配置中配置路由内容
           .config([&#39;$routeProvider&#39;, function($routeProvider){
                $routeProvider
                //template中支持html标签
                   .when(&#39;/&#39;,{template:&#39;这是<h1>首页页面</h1>&#39;})
                   //.when(&#39;/computer&#39;,{template:&#39;这是电脑分类页面&#39;})
                   .when(&#39;/computer&#39;,{templateUrl:&#39;computer.html&#39;})
                   .when(&#39;/money&#39;,{template:&#39;这是财务页面&#39;})
                   //如果都匹配不上，则跳转到一个页面
                   .otherwise({redirectTo:&#39;/&#39;});
           }]);
       </script>
    </body>
</html>

Nach dem Login kopieren

Schreiben: URL+#+Unterpfad (wird in der Mitte angezeigt)

Einführung in das Routing Modul:

ng-view: wird verwendet, um den Inhalt der Routing-Ergebnisse anzuzeigenwann: Urteilsaussage

Vorlage:HTML-Ergebnisse, unterstützt HTML-TagstemplateUrl: unterstützt das Laden anderer Seiten

Verwandte Empfehlungen:

Alle Versionen von AngularJS herunterladen

AngularJS-LernzusammenfassungDer Unterschied zwischen AngularJS und Angular4. Warum Angular4 verwendenAngular-Einführungs-Tutorial

Das obige ist der detaillierte Inhalt vonEinführung in die Grundlagen von AngularJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!