Introduction aux bases d'AngularJS-js tutoriel-php.cn

Le contenu de cet article concerne l'introduction de base à angularjs. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer.

Points clés :

Framework JS front-end : il encapsule l'utilisation de JS pour développer des fonctions répétitives front-end, étend le HTML et est principalement utilisé pour le fonctionnement et l’affichage de la page.

Core : MVC, modularisation, liaison de données bidirectionnelle, injection de dépendances, balises sémantiques, expressions, etc. [Tutoriels vidéo associés recommandés : Tutoriel vidéo AngularJs]

Liaison de données bidirectionnelle

Introduction des fichiers js pertinents

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

Copier après la connexion

ng-app=””Module d'application anonyme, nécessite généralement d'écrire un nom pour faciliter l'initialisation ultérieure ng -model : Liez automatiquement la valeur de l'élément de formulaire

à la variable interne Angularjs.

ng-bind : La fonction est équivalente à l'expression, mais l'utilisation est différente. Généralement utilisé pour lier des éléments non-formulaires et afficher des variables. La différence entre

ng-bind et {{}} : le premier remplacera tout le contenu des sous-balises de la balise par le contenu de la variable, tandis que le second affichera simplement le contenu de la variable au position actuelle.

Basé sur MVC modularisé (MVVM)

Vue : fait principalement référence aux balises de données de page statiques HTML, principalement utilisées pour l'affichage.

Modèle : ne remplit principalement que certaines données de la vue et du traitement logique. Par exemple, json, variable

contrôle : du code js, écrire une logique. Principalement pour obtenir le modèle, remplir la vue, obtenir les données de la vue et remplir le modèle.

Conversion entre m et vm :

1 2	`var` `username=”XiaoQi”;` `$scope.username=username;`

Copier après la connexion

Par exemple, variable :

La variable de vm est en fait liée à l'attribut dans la variable globale $scope.

Sur la page : {{username}}

Remarque : les variables Angularjs ne peuvent pas être ajoutées à $scope sur la page.

Si la variable est modifiée par des js internes tels que timer, alors par défaut Angularjs ne peut pas implémenter l'affichage bidirectionnel de liaison de données, et vous devez utiliser $.digest pour forcer la notification (actualisation)

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

Copier après la connexion

Exemple d'initialisation du contenu à l'ouverture de la page :

Remarque :

Si les modules d'application et les contrôleurs sont nommés sont définis, alors il doit être initialisé à l'aide de js !

Injection de dépendance 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>

Copier après la connexion

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

Copier après la connexion

Liaison d'événement de bouton

Parcours répété

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

product : Écrivez-le simplement, l'objet angulaire js temporaire lors de chaque parcours, fait ici référence à chaque objet json.

Mécanisme de routage
Avant : include inclut les pages, qui réutilisent uniquement les pages, mais les pages réutilisées sont également rafraîchies dans leur ensemble.

Grâce au routage angulaire js, un rafraîchissement partiel peut être obtenu, et des têtes et des queues répétées peuvent être réalisées sans rafraîchissement. Et effet de page unique multi-vue.

Implémentation sous-jacente : implémentée via # (ancre) en html.

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

Copier après la connexion

Exemple officiel :

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