Je suis resté à la maison pendant deux jours ce week-end, et j'ai continué à partager du contenu lié à Angularjs pendant mon temps libre à midi. Aujourd'hui, je partagerai principalement l'introduction générale à Angularjs et la partie liaison de données. sujet.
angualrjs1.x : Actuellement une version relativement stable.
angulairejs2.x : écrit sur la base de TypeScript. Il a beaucoup changé sur la base de 1.x et est orienté vers le développement mobile. Il est écrit selon les normes ES6
dernière version d'Angularjs4.x
3. Fonctionnalités de base
Philosophie de conception MVC (ou MVVM) :
Liaison de données bidirectionnelle :
La liaison de données bidirectionnelle n'est pas proposée par AngularJs. Elle existe depuis longtemps. Le WPF de Microsoft utilise les idées MVVM et. les frameworks front-end. Knockoutjs a le concept de liaison bidirectionnelle de données.
Modularisation et injection de dépendances
Système de commande
4. Domaines d'expertise
1) Application à page unique (SPA) 2) Programme CRUD
5. Composition de l'application AngularJs
Toute application ng est composée de types de modules tels que des contrôleurs, des services, des instructions, des itinéraires, des filtres, etc. . Composition, permettez-moi d'utiliser un schéma pour représenter la relation : 6. Module (module) Dans . Le module AngularJS est une existence essentielle, comprenant de nombreux aspects, tels que le contrôleur, la configuration, le service, l'usine, la directive, la constante, etc.
Comment créer le module :
angulaire.module('myApp',[]);
Comment utiliser le module :
Ajoutez ng-appAvantages de l'utilisation de modules :
1) Gardez l'espace de noms global propre ;
2) Plus facile à écrire du code de test
3) Facile à réutiliser le code entre différentes applications ;
4) Utilisez des déclarations pour faciliter la compréhension des gens.
7. Utilisation d'AngularJs dans l'application 1) Lorsque vous utilisez Angular dans l'application, référencez d'abord le code de la bibliothèque js du framework angulaire. dans la page.
<head> <meta charset="UTF-8"> <title>首页</title> <!--引用AngularJs库 --> <script type="text/javascript" src="/lib/angular-1.3.0.14/angular.js?1.1.11"></script> </head>
<body ng-app="myapp" ng-controller="myCtrl"> <!-- 1、表达式绑定 --> <h1>{{expression}}</h1> <!-- 2、指令绑定--> <h2>{{ngmodel}}</h2> <input type="text" ng-model="ngmodel"> <!-- 3、ng-bind绑定--> <h3 ng-bind="ngbind"></h3> <h3 class="ng-bind:ngbind"></h3> <!-- 4、ng-bind-html绑定--> <h4 ng-bind-html="htmlbind"></h4> <!-- 5、ng-bind-template --> <h5 ng-bind-template="{{ngbind}},{{1+1}}"></h5> </body>
À partir de l'extrait de code ci-dessus, vous pouvez voir comment définir les méthodes du module et du contrôleur, et la signification de chaque paramètre est commentée.
Le code source sera partagé avec tout le monde sur GitHub le moment venu, et tout le monde pourra le télécharger.
Je partagerai autant de contenu avec vous aujourd'hui. La prochaine fois, je partagerai avec vous du contenu lié à la liaison des données et au contrôleur. Merci pour votre soutien, et n'hésitez pas à me corriger s'il y a quelque chose qui ne va pas !
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!