Quels sont les scénarios d'application d'angularjs ? Introduction aux scénarios d'application d'angularjs-js tutoriel-php.cn

Quels sont les scénarios d'application d'angularjs ? Introduction aux scénarios d'application d'angularjs

寻∝梦

Libérer： 2018-09-06 14:27:18

original

2784 Les gens l'ont consulté

Cet article vous parle principalement des scénarios d'application d'angularjs, ainsi que de l'introduction de l'application d'angularjs. Il n'y a pas beaucoup de contenu. J'espère que tout le monde pourra le lire attentivement

Tout d'abord, parlons des scénarios d'application d'angularjs :

Le principe de fonctionnement d'AngularJS est le suivant : le modèle HTML sera analysé dans le DOM par le navigateur, et la structure du DOM devient une entrée pour le compilateur AngularJS. AngularJS parcourra le modèle DOM pour générer les instructions NG correspondantes. Toutes les instructions sont responsables de la définition de la liaison de données pour la vue (c'est-à-dire ng-model en HTML). Par conséquent, le framework NG ne commence à fonctionner qu’après le chargement du DOM. Il est essayé sur les grands navigateurs et les grands projets de sites Web.

Parlons maintenant des scénarios d'application d'angularjs :

Angular est un framework populaire au niveau de l'entreprise que de nombreux programmeurs utilisent pour créer et maintenir des applications Web complexes. Angular jouit d'une énorme popularité et est utilisé par autant d'entreprises que Domino's Pizza : Ryanair, iTunes Connect, PayPal Checkout, Google. Angular est un framework open source alimenté par Google. Angular se considère comme une extension HTML permettant de créer des applications Web complexes. Si vous êtes également familier avec TypeScript, vous pouvez découvrir comment écrire Angular 2.

Angular adopte l'architecture MVC. Il fournit une double liaison de données entre la couche Modèle et la couche Vue. L'avantage de cette méthode de liaison de données est que quel que soit le côté des données modifié, les données des deux côtés seront automatiquement mises à jour. Cela vous aide à créer des composants View consommables. Il fournit également un cadre de services pour une interaction facile entre les services front-end et back-end. Mieux encore, c'est du JavaScript simple.

Quand utiliser AngularJS ? Lorsque vous créez une application frontale Web complexe et que vous avez besoin d'un framework de module unique pour tout gérer.

Introduction à l'application AngularJS :

Application angulaire : utilisez HTML avec une syntaxe étendue angulaire pour écrire des modèles, utilisez des classes de composants pour gérer ces modèles et utilisez des services pour ajouter une application logique. Les composants et les services sont packagés et publiés dans des modules. Démarrez l'application en démarrant le module racine. Angular prend le relais et affiche le contenu de l'application dans le navigateur, et répond aux interactions de l'utilisateur conformément aux instructions d'utilisation que nous fournissons.

Ces termes sont très importants tout au long du développement d'applications angulaires. (Si vous souhaitez en savoir plus sur Angularjs, rendez-vous sur le site PHP chinois

AngularJS Reference Manual colonne)

Les 8 principaux éléments constitutifs des applications angulaires :

modules modules
composants
modèle modèle
Métadonnées métadonnées
liaison de données liaison de données
directive
services
Injection de dépendances

modules angulaires :

les applications angulaires sont modulaires et possèdent leur propre système de modules appelé module angulaire/ NgModules.

Qu'est-ce qu'un module exactement ? Que signifie la modularité en angulaire ?

Une application angulaire possède au moins un module (module racine) appelé AppModule.

La plupart des applications disposent de nombreux autres modules de fonctionnalités, formés par un ensemble de classes de domaine, de flux de travail ou d'agrégations fonctionnelles étroitement liées.

Tous les modules en angulaire sont une classe avec le décorateur @NgModule.

Les modules d’Angular sont des cours ! ! !

Les décorateurs sont des fonctions utilisées pour décorer les classes JavaScript. Responsable de l'attachement des métadonnées aux classes.

NgModule est une fonction de décorateur qui reçoit un objet de métadonnées décrivant les propriétés du module. Les attributs sont :
déclarations : afficher les classes appartenant à ce module. Angular possède trois classes de vues : les composants, les directives et les pipelines.
exports : un sous-ensemble de déclarations qui peuvent être utilisées pour les modèles de composants dans d'autres modules.
importations : les classes du modèle de composant de ce module doivent être exportées par d'autres modèles.
fournisseurs : le créateur du service. Ce module les ajoute à la table globale des services afin qu'ils soient accessibles depuis n'importe quelle partie de l'application.
bootstrap : identifie la vue principale (composant racine) de l'application. Seul le module racine peut définir cette propriété.

Voici un module racine simple :

// app.module.ts
import { NgModule }   from &#39;@angular/core&#39;;
import { BrowserModule } from &#39;@angular/platform-browser&#39;;
// @NgModle 装饰器函数，接受一个对象，对象有几个属性
@NgModule({
 imports:   [ BrowserModule ],
 providers:  [ Logger ],
 declarations: [ AppComponent ],
 exports:   [ AppComponent ],
 bootstrap:  [ AppComponent ]
})
// AppComponent 的 export 语句导出，根模块不需要导出，其他组件不需导入根模块。
export class AppModule { }

Copier après la connexion

Amorcez le module racine pour démarrer l'application. Guidez l'AppModule dans le fichier main.ts :

// app/main.ts
import { platformBrowserDynamic } from &#39;@angular/platform-browser-dynamic&#39;;
// 从app.module 文件导入了 AppModule
import { AppModule } from &#39;./app.module&#39;;
platformBrowserDynamic().bootstrapModule(AppModule);

Copier après la connexion

À l'heure actuelle, le projet n'a que le fichier app/app.module.ts et app/main.ts. Le premier définit le module racine de. l'application et ce dernier y fait référence pour démarrer l'application.

D'accord, c'est l'article présentant les scénarios d'application et les applications d'angularjs (si vous souhaitez en savoir plus sur angulairejs, je vous recommande d'aller dans la colonne

AngularJS Learning Manual du site PHP chinois Study ), si vous avez des questions, vous pouvez laisser un message ci-dessous.

[Recommandation de l'éditeur]

Quelles sont les différences entre Angularjs et Vue ? Détails de comparaison entre angulairejs et Vue

Quels sont les avantages d'angularjs ? Voici les sept avantages d'angularjs que vous devez connaître

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!