Maison > interface Web > js tutoriel > Analyse du processus d'initialisation AngularJS (bootstrap)_AngularJS

Analyse du processus d'initialisation AngularJS (bootstrap)_AngularJS

WBOY
Libérer: 2016-05-16 16:28:43
original
1192 Les gens l'ont consulté

Aperçu

Cette section explique le processus d'initialisation d'AngularJS et comment vous pouvez modifier l'initialisation d'AngularJS si nécessaire.

La balise <script> d'AngularJS </strong></p> <p>Cet exemple montre notre méthode recommandée d'intégration d'AngularJS, appelée « auto-initialisation ». </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="79377" class="copybut" id="copybut79377" onclick="doCopy('code79377')"><u>Copier le code</u></a></span> Le code est le suivant :</div> <div class="codebody" id="code79377"> <br> <!doctype html><br> <html xmlns:ng="http://angularjs.org" ng-app><br> <corps><br> ...<br> <script src="angular.js"><script><br> </corps><br> </html><br> </div> <p><strong>formatDate</strong></p> <p>1. Placez la balise script dans le code ci-dessus en bas de la page. Placer la balise script en bas raccourcit le temps de chargement de l'application car le chargement du HTML ne sera pas bloqué par le chargement des scripts angulaires.js. Vous pouvez obtenir la dernière version sur http://code.angularjs.org. Veuillez ne pas référencer cette URL dans votre code, car cela exposerait les risques de sécurité de votre site. S'il s'agit d'un développement expérimental, il n'y a aucun problème pour créer un lien vers notre site. </p> <p>1).angular-[version].js est une version lisible adaptée au développement et au débogage. <br> 2).angular-[version].min.js est une version compressée et obscurcie, adaptée au déploiement dans des produits matures. </p> <p>2. Veuillez placer la directive ng-app dans le nœud racine de votre application. Si vous souhaitez qu'AngularJS exécute automatiquement l'intégralité du programme <html> <br> </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="71091" class="copybut" id="copybut71091" onclick="doCopy('code71091')"><u>Copier le code</u></a></span> Le code est le suivant :</div> <div class="codebody" id="code71091"> <br> <html ng-app><br> </div> <p>3. Si vous souhaitez utiliser l'ancienne version de la syntaxe d'instruction : ng :, vous devez également écrire l'espace de noms XML en <html> pour que AngularJS fonctionne correctement sous IE. (Cela est fait pour certaines raisons historiques, nous ne recommandons pas de continuer à utiliser la syntaxe ng:.) </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="49065" class="copybut" id="copybut49065" onclick="doCopy('code49065')"><u>Copier le code</u></a></span> Le code est le suivant :</div> <div class="codebody" id="code49065"> <br> <html xmlns:ng="http://angularjs.org"><br> </div> <p><strong>Initialisation automatique</strong></p> <p>AngularJS s'exécutera lorsque l'événement DOMContentLoaded sera déclenché et trouvera la portée racine de votre application via la directive ng-app. Si la directive ng-app est trouvée, AngularJS : </p> <p>1. Charger les modules liés au contenu de la commande. <br> 2. Créez une application "injecteur". <br> 3. Ayez déjà l'étiquette de la directive ng-app comme nœud racine pour y compiler le DOM. Cela vous permet de spécifier uniquement une partie du DOM pour votre application AngularJS. </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="88586" class="copybut" id="copybut88586" onclick="doCopy('code88586')"><u>Copier le code</u></a></span> Le code est le suivant :</div> <div class="codebody" id="code88586"> <br> <!doctype html><br> <html ng-app="optionalModuleName"><br> <corps><br> Je peux ajouter : {{ 1 2 }}.<br> & Lt; script src = "angulaire.js" & gt; & lt;/script & gt; </corps><br> </html><br> <br> </div> <p>Initialisation manuelle<strong></strong> </p>Si vous devez contrôler activement le processus d'initialisation, vous pouvez utiliser la méthode d'exécution manuelle du programme de démarrage. Par exemple, vous l'utiliserez lorsque vous utiliserez un "chargeur de script" ou que vous devrez effectuer certaines opérations avant qu'AngularJS compile la page. <p> </p>L'exemple suivant montre la méthode d'initialisation manuelle d'AngularJS. Son effet équivaut à l'utilisation de la directive ng-app. <p> </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="70023" class="copybut" id="copybut70023" onclick="doCopy('code70023')">Copier le code<u></u></a> Le code est le suivant :</span><div class="codebody" id="code70023"> <br> <!doctype html><br> <html xmlns:ng="http://angularjs.org"><br> <corps><br> Bonjour {{'Monde'}} !<br>             <script src="http://code.angularjs.org/angular.js"></script>
                                                                                                  angulaire.element(document).ready(function() {
               angulaire.bootstrap(document);
            });
                                                                                     



Voici quelques séquences que votre code doit suivre :

1. Une fois la page et tous les scripts chargés, recherchez le nœud racine du modèle HTML - généralement le nœud racine du document.

2. Appelez api/angular.bootstrap pour compiler le modèle dans une application de liaison de données bidirectionnelle exécutable.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal