Heim > Artikel > Web-Frontend > Einführung in die Grundlagen von AngularJS

Einführung in die Grundlagen von AngularJS

零到壹度Original: 2018-04-21 10:37:562023Durchsuche

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>

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;

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>

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

table>

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>

<!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>

Button-Ereignisbindung

Wiederholte Durchquerung

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>

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>

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!

mvc json html 封装 include 全局变量 JS 对象事件

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：js-Code zur Implementierung des RechnersNächster Artikel：js-Code zur Implementierung des Rechners

In Verbindung stehende Artikel

Mehr sehen