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

Introduction aux bases d'AngularJS

零到壹度

Libérer： 2022-12-07 09:49:43

original

1959 Les gens l'ont consulté

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 :

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.

<!--引入路由模块-->
       <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>

Copier après la connexion

Ecriture : url+#+sous-chemin (à afficher au milieu)

Présentation du routage module：

ng-view : utilisé pour afficher le contenu des résultats de routagequand : déclaration de jugement

modèle : le résultat du HTML, prend en charge les balises htmltemplateUrl : prend en charge le chargement d'autres pages

Recommandations associées :

Téléchargez toutes les versions d'AngularJS

Résumé d'apprentissage d'AngularJSLa différence entre angulairejs et angulaire4. Pourquoi utiliser angulaire4tutoriel d'introduction angulaire

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Introduction aux bases d'AngularJS

Points clés :

Liaison de données bidirectionnelle

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.

Parcours répété