Tutoriel angulaire pour les débutants-js tutoriel-php.cn

Cette fois, je vous propose le tutoriel Angular novice. Quelles sont les précautions dans le tutoriel Angular novice. Voici des cas pratiques, jetons un oeil.

Qu'est-ce que l'UI

Pour une interface utilisateur, elle se compose en fait de trois parties principales :

Contenu : Quelles informations souhaitez-vous afficher ? Y compris les informations dynamiques et les informations statiques. Notez que le contenu ici n'inclut pas son format, comme l'anniversaire, et cela n'a rien à voir avec le fait qu'il soit affiché en rouge ou en vert, ou s'il est affiché en année, mois et jour

Apparence : Comment ces informations doivent-elles être affichées ? Cela inclut le formatage et le style. Les styles incluent également des styles statiques et des effets d'animation, etc.

Interaction : que se passe-t-il lorsque l'utilisateur clique sur le bouton Ajouter au panier ? Quels affichages doivent encore être mis à jour ?
Dans la technologie front-end, ces trois parties sont respectivement responsables de trois technologies : HTML est responsable de la description du contenu, CSS est responsable de la description de l'apparence et JavaScript est responsable de la réalisation de l'interaction.
S'ils sont plus abstraits, ils correspondent aux trois parties principales de MVC : contenu--Modèle, apparence---Vue, interaction--Contrôleur.
correspond au concept en contenu angulaire et statique--> Modèle, contenu dynamique--> portée, correspondance interactive--contrôleur, complexité de la partie apparence : CSS détermine le style et le filtre détermine le format.

Module

angular.module(abc&#39;&#39;) 引用模块abc
angular.module(&#39;abc&#39;,[]) 定义模块abc

Copier après la connexion

Portée

Tous les attributs appartenant à la portée de niveau supérieur peuvent être lus à partir de la portée de niveau inférieur, mais lorsque vous devez les écrire hérités attributs Lors de la saisie, le problème se pose : l'écriture entraînera la création d'une propriété du même nom sur la portée de niveau inférieur, mais ne modifiera pas les propriétés sur la portée de niveau supérieur.

Il existe deux manières d'afficher des informations dynamiques :

BindingExpression Directive La directive

est équivalente à un élément HTML<🎜 personnalisé. >, Angular l'appelle officiellement une extension DSL du langage HTML Selon les scénarios d'utilisation et les fonctions des instructions, elles peuvent être divisées en deux types d'instructions : type composant et type décoratif.

Le type de composant équivaut à diviser une page en plusieurs modules selon des points de fonction.

Les instructions décoratives ajoutent un comportement au DOM pour lui donner certaines capacités, telles que la mise au point automatique, la liaison bidirectionnelle, le cliquable (ngClick), l'affichage conditionnel, le masquage (ngShow, ngHide) et d'autres fonctionnalités. En même temps, il s'agit également d'un pont entre le modèle et la vue, permettant de synchroniser la vue et le modèle. La plupart des instructions dans Angular sont des instructions décoratives. Elles sont chargées de collecter et de créer $watch, puis d'utiliser le mécanisme de vérification sale d'Angular pour maintenir la vue synchronisée.

Directive Composant

angular.module(&#39;com.ngnice.app&#39;).directive(&#39;jobCategory&#39;,function(){    return {
        restrict:&#39;EA&#39;,
        scope:{
            configure:&#39;=&#39;//独立作用域
        },
        templateUrl:&#39;a.html&#39;,        //声明指令的控制器
        controller:function($scope){
            
        }
    }
});

Copier après la connexion

L'attribut restrict est utilisé pour indiquer la méthode d'application de cette directive. Sa valeur peut être E (élément), A (attribut), C (nom de classe). , M (commentaire) est n'importe quelle combinaison de lettres. Dans la pratique de l'ingénierie, E, A et EA sont couramment utilisés. Il n'est pas recommandé d'utiliser C et M.

scope a trois valeurs : non spécifié (non défini)/false/true ou un objet de hachage.

Lorsque non spécifié ou faux, cela signifie que cette directive ne nécessite pas de nouveau champ d'application. Il accède directement aux
propriétés et méthodes sur la portée existante, ou n'a pas besoin d'accéder à la portée. S'il existe une nouvelle directive de portée ou de portée indépendante sur le même nœud, utilisez-la directement, sinon utilisez directement la portée parent. Lorsque est vrai, cela signifie qu'il a besoin d'une nouvelle portée. Lorsque
est un objet de hachage, cela signifie qu'il nécessite une portée indépendante.

{    name:&#39;@&#39;,//绑定字面量
    details:&#39;=&#39;,//绑定变量
    onUpdate:&#39;&&#39;//绑定事件
}

Copier après la connexion

La méthode d'utilisation est la suivante :

<user-details name=&#39;test&#39; details=&#39;details&#39; on-update=&#39;updateIt(times)&#39;></user-details>

Copier après la connexion

Pour les instructions de type composant, le plus important est l'affichage des informations sur le contenu, donc la fonction de lien de l'instruction est généralement pas impliqué, mais doit être utilisé autant que possible. Placer éventuellement la logique métier dans le contrôleur.

angular
    .module(&#39;com.ngnice.app&#39;)
    .directive(&#39;twTitle&#39;,function(){        return {            //作用域
            restrict:&#39;A&#39;,            link:function(scope,element,attrs){
                
            }
        }
    });

Copier après la connexion

Les instructions de type décorateur sont principalement utilisées pour ajouter des comportements et maintenir la synchronisation entre la vue et le modèle, elles sont donc différentes des instructions de type composant. Nous devons souvent effectuer des opérations DOM. Son attribut restrict est généralement A, qui est la méthode de déclaration d'attribut, plus conforme à la sémantique du décorateur : ce n'est pas le corps principal du contenu, mais un connecteur avec des capacités comportementales supplémentaires.

Comprendre MVVM

$scope peut être considéré comme ViewModel, et le contrôleur est la fonction JavaScript qui décore et traite ce ViewModel.

Tutoriel angulaire pour les débutants

Le pattern MVVM en angulaire est principalement divisé en quatre parties :

Vue qui se concentre sur l'affichage et le rendu de l'interface en angulaire elle contient un. groupe de modèles de vue de directive déclarative

ViewModel : c'est le corps adhésif de View et Model. Il est responsable de l'interaction et de la collaboration entre View et Model. Il est responsable de fournir les données affichées à View et un moyen de les afficher. Vue pour faire fonctionner le modèle. Dans angulaire, $scope joue le rôle de ViewModel. Il existe deux sources de données différentes sur le ViewModel : l'une est constituée de données commerciales qui affichent des informations et l'autre est constituée de données dérivées qui décrivent des interactions, telles que : des cases à cocher dans des tableaux, If. vous cliquez sur Sélectionner tout, toutes les cases à cocher de la liste seront sélectionnées. Ici, vous avez besoin de données dérivées similaires à isSelectAll à placer dans ViewModelh.

Modèle : Il s'agit d'un support d'encapsulation de données lié à la logique métier, c'est-à-dire un objet de domaine. Le modèle ne se soucie pas de la façon dont il sera affiché ou utilisé, il ne doit donc contenir aucune logique liée à l'affichage de l'interface. Dans les pages Web, la plupart des modèles sont des données renvoyées par le serveur ajax ou des objets de configuration globale. Le service dans Angular est le meilleur moyen d'encapsuler et de traiter cette logique métier liée au modèle. Ces objets de domaine peuvent être réutilisés par le contrôleur ou d'autres services.

contrôleur Ce n'est pas l'élément central du modèle MVVM, mais il est responsable de l'initialisation de l'objet ViewModel. Il appellera un ou plusieurs services pour obtenir l'objet domaine et mettra les résultats dans l'initialisation de l'objet ViewModel. Il appellera un ou plusieurs services pour obtenir l'objet de domaine et placera le résultat sur l'objet ViewModel. De cette manière, l’interface de l’application peut atteindre un état initial utilisable lorsqu’elle commence à se charger. Il peut ajouter des fonctions comportementales pour décrire les interactions sur le ViewModel, telles que addItemToShopCart() pour répondre à l'événement ng-click

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article Pour un contenu plus passionnant. , veuillez faire attention à php Chinois Autres articles connexes en ligne !

Lecture recommandée :

Tutoriel Node.js pour les débutants (2)

Tutoriel Node.js pour les novices (1 ) )

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!