Latest web development tutorials

AngularJS Applications

Le moment est venu de créer un véritable AngularJS une seule page des applications Web (page unique application web, SPA) a.

Des exemples d'applications AngularJS

Vous avez appris suffisamment de connaissances sur AngularJS, vous pouvez maintenant commencer à créer votre première application AngularJS:

Mes notes



Restant Word Count:100


Expliquer l'application

AngularJS exemples

<Html ng-app = "myNoteApp ">
<Head>
<Meta charset = "utf-8 ">
<Script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
</ Head>
<Body>

<Div ng contrôleur = "myNoteCtrl ">

<H2> mes notes </ h2>

<P> <textarea ng-modèle = "message" cols = lignes "40" = "10"> </ textarea> </ p>

<P>
<Bouton ng-cliquez sur = "save ()"> Enregistrer </ button>
<Bouton ng-cliquez sur = "clear ()"> Effacer </ button>
</ P>

<P> Nombre de caractères restants: <span ng-bind = "left ()"> </ span> </ p>

</ Div>

<Script src = "myNoteApp.js"> </ script>
<Script src = "myNoteCtrl.js"> </ script>

</ Body>
</ Html>

Essayez »

Fichiers Application "myNoteApp.js":

var app = de angular.module ( "myNoteApp", []);

Fichier contrôleur "myNoteCtrl.js":

app.controller ( "myNoteCtrl", function ($ portée) {
$ Scope.message = "";
$ Scope.left = function () {return 100 - $ scope.message.length;};
$ Scope.clear = function () {$ scope.message = "";};
$ Scope.save = function () {alert ( "Note Saved");};
});

<Html> est l' application AngularJS: ng-app = conteneur "myNoteApp":

<Html ng-app = "myNoteApp ">

<div> HTML pages dans le contrôleur: ng-controller = "myNoteCtrl" champ d' application:

<Div ng contrôleur = "myNoteCtrl ">

directive ng-modèle bind <textarea> au message variable du contrôleur:

<textarea ng-modèle = "messages " cols = lignes "40" = "10"> </ textarea>

Deux ng-événement click appelle la fonction de contrôleur clear () et save ():

<Bouton ng-cliquez sur = "save ()"> Enregistrer </ button>
<Bouton ng-cliquez sur = "clear ()"> Effacer </ button>

commande ng-bind pour lier la fonction de contrôleur gauche () pour <span>, est utilisé pour afficher les caractères restants:

Nombre de caractères restants: <span ng -bind = "left ()"> </ span>

Applications des fichiers de bibliothèque nécessaires pour exécuter après AngularJS chargement:

<Script src = "myNoteApp.js"> </ script>
<Script src = "myNoteCtrl.js"> </ script>

AngularJS Application Architecture

Des exemples de ce qui précède est un AngularJS complet d'une seule page des applications Web (page unique d'applications Web, SPA).

<Html> contient l' application de AngularJS (ng-app =).

<Div> définit le champ d'application (ng-controller =) AngularJS contrôleur.

Les demandes peuvent être faites dans un grand nombre de contrôleurs.

Le dossier de candidature (mon ... app.js) définit l'application du code du modèle.

Un ou plusieurs fichiers de contrôleurs (mon ... Ctrl.js) définit le code du contrôleur.

Résumé - Comment ça marche?

directive ng-app dans l'élément racine de l'application.

Pour une seule page des applications Web (page unique application web, SPA), les applications de racine habituellement <html> élément.

Un ou plusieurs directive ng-contrôleur définit le contrôleur d'application. Chaque contrôleur est doté des éléments HTML de de sa propre définition de la portée.

AngularJS démarrer automatiquement en cas HTML DOMContentLoaded. Si vous trouvez directive ng-app, AngularJS module d'instruction de chargement, et ng-app comme la racine de l'application à compiler.

racine de l'application peut être une petite partie de la page entière, ou pages, si elle est une petite partie sera une compilation plus rapide et l'exécution.