Partager des exemples détaillés liés à Angularjs-js tutoriel-php.cn

Partager des exemples détaillés liés à Angularjs

零下一度

Libérer： 2017-07-03 14:14:55

original

1131 Les gens l'ont consulté

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.

1. Concepts de base :

AngularJS est conçu pour surmonter les lacunes du HTML dans la création d'applications. HTML est un bon langage déclaratif pour la conception d'affichages de texte pseudo-statiques, mais il est faible lorsqu'il s'agit de créer des applications WEB. J'ai donc fait quelques travaux (vous pouvez aussi considérer cela comme une petite astuce) pour que le navigateur fasse ce que je veux. Habituellement, nous utilisons les technologies suivantes pour résoudre les lacunes de la technologie des pages Web statiques dans la création d'applications dynamiques.

2. Version

　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

<.>La version actuelle est la 2.x. Ce n'est pas une mise à niveau basée sur la 1. Elle prône la composantisation, qui est similaire à Vue et React.

3. Fonctionnalités de base
Philosophie de conception MVC (ou MVVM) :

Beaucoup de gens y penseront Angularjs C'est un framework MVC frontal. Je pense que MVC n'est qu'une idée de conception. Je pense qu'il y a une ombre de MVVM dedans, car MVVM est mis à niveau sur la base de MVC et ajoute un bidirectionnel. fonction de liaison de données, mais ce n'est que mon opinion personnelle, corrigez-moi, dieux.

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

La modularisation et l'injection de dépendances sont le contenu principal d'AngularJs et le point culminant d'Angular.

Système de commande

Le système de commande est également le cœur d'Angular. Le système de commande est divisé en commandes intégrées et commandes personnalisées. Parmi elles, je pense que les commandes personnalisées sont. très puissant et peut réaliser de nombreuses fonctions puissantes. Les fonctions et les détails seront expliqués en détail lors de l'explication des instructions.

4. Domaines d'expertise

1) Application à page unique (SPA)

2) Programme CRUD

Il est possible que certains jardiniers ne comprennent pas très bien les applications monopage. Pour donner un exemple simple, par exemple, notre application multipage traditionnelle via le framework Iframe a l'inconvénient de charger plusieurs pages plusieurs fois. utilisez des segments HTML pour charger ou changer de mode. Je ne présenterai pas grand chose ici sur MPA et SPA. Vous pouvez les comprendre par Baidu.

AngularJs convient aux systèmes d'application CRUD, mais il ne convient pas aux applications avec des interactions de page fréquentes ou aux pages graphiques et les systèmes de jeu ne conviennent pas à ce framework.

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>

Copier après la connexion

2) Ajoutez le module ng-app sur l'élément html qui applique la portée angulaire. Si vous devez ajouter un contrôleur, ajoutez ng-controller. l'élément body. Il peut être placé sur n'importe quel élément. Cela indique la limite de l'application en utilisant Angular.

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

Copier après la connexion

　3. Ajoutez du code js et définissez des modules et des contrôleurs

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