AngularJs bootstrap explication détaillée et code d'échantillon

Auteur：Eve Cole Date de mise à jour：2025-08-28 04:00:03

Le premier article de la série AngularJS Étude des notes, j'espère que je pourrai continuer à l'écrire. Le contenu de cet article provient principalement du contenu du document http://docs.angularjs.org/guide/, mais il ajoute également certains de vos propres résultats de compréhension et de tentative.

1. Résumé

Cet article explique le processus d'initialisation angulaire et comment initialiser manuellement angulaire lorsque vous en avez besoin.

2. Tag Angular <Script>

Cet exemple est utilisé pour montrer comment intégrer Angular à travers le chemin recommandé pour atteindre l'initialisation automatique.

 <! doctype html> <html xmlns: ng = "http://angularjs.org" ng -pp> <body> ... <script src = "angular.js"> </ body> </html>

Placez la balise Sciprt en bas de la page. Cela peut empêcher le chargement de HTML en chargeant Angular.js, réduisant ainsi le temps de chargement de l'application. Nous pouvons obtenir la dernière version d'Angularjs dans http://code.angularjs.org. Pour des raisons de sécurité, ne vous référez pas directement à cette adresse dans le produit pour charger le script. Mais si c'est juste pour la recherche et l'apprentissage, peu importe que ce soit une connexion directe.

SELECT: Angular- [version] .js est une version qui est pratique à lire et convient au développement quotidien et au débogage.

SELECT: Angular- [version] .min.js est une version compressée et obscurcie qui convient à une utilisation dans le produit final.

Placer "ng-app" dans le nœud racine de l'application. Si vous voulez que Angular commence automatiquement votre application, vous pouvez généralement la placer dans la balise <html>.

Si nous avons besoin d'utiliser la syntaxe directive de style old school "ng:", alors nous devons ajouter un xml-namespace dans la balise HTML à "s'il vous plaît" IE. (C'est une raison historique, et nous ne recommandons pas d'utiliser NG :)

3. Initialisation automatique

Angular sera automatiquement initialisé dans l'événement DomContent Télélé, et Angular trouvera le nœud racine d'application spécifié par vous via la directive NG-App. S'il est trouvé, Angular fera ce qui suit:

Directives de charge liées au module.

Créez un injecteur lié à l'application (Dependency Manager).

Spécifiez le nœud racine avec NG-App et démarrez le travail "Compilation" pertinent du DOM. En d'autres termes, une partie de la page (pas <html>) peut être utilisée comme nœud racine, limitant ainsi la portée d'Angular.

 <! Doctype html> <html lang = "zh-cn"> <éadf> <meta charset = "utf-8"> <title> bootstrap-uto </ title> <style type = "text / css"> .ng-cloak {affiche: aucun; } </ style> </ head> <body> voici l'extérieur de ng-app ~~ {{{1 + 2}} <div ng-app> Voici l'intérieur de ng-app ~~~ {{1 + 3 * 2}} </div> <script src = "../ angular-1.0.1.js" type = "text / javascript"> </ body>

Remarque: le "ng-coak" est utilisé avant la fin de la compilation angulaire.js (oui! C'est vrai! C'est avant que la compilation ne soit terminée, pas avant que le processus de chargement de l'application ne soit bien. Class = "Ng-Coak". Une fois la compilation terminée, cette classe ou l'attribut sera supprimé.

4. Initialisation manuelle

Si nous souhaitons contrôler davantage le processus d'initialisation (par exemple, vous devez charger Angular.js via le chargeur de script ou faire des opérations avant la page de compilation angulaire), nous pouvons utiliser une méthode de démarrage manuellement appelée.

L'exemple suivant est équivalent à l'utilisation de NG-App, la directive:

 <! Doctype html> <html lang = "zh-cn"> <éadf> <meta charset = "utf-8"> <title> bootstrap-manual </tapie> <style type = "text / css"> .ng-coak {affichage: aucun; } </ style> </ head> <body> Voici l'extérieur de ng-app ~~ {{1 + 2}} <div id = "rootofApp"> Ceci est à l'intérieur de Ng-App ~~~ {{1 + 3 * 2}} </div> <script src = "../ Angular-1.0.1.js" type = "Text / Javascript"> </ Script> type = "text / javascript"> angular.element (document) .ready (function () {angular.bootstrap (angular.Element (document.getElementById ("rootofApp")));}); </cript> </ body> </html>

Autrement dit, notre code peut être écrit dans les étapes suivantes:

1. Une fois la page et les autres code chargés, trouvez le nœud racine du modèle d'application;

2. Appelez Angular.bootstrap et laissez Angular compiler le modèle dans une application de liaison exécutable et bidirectionnelle!

Nous continuerons à ajouter des articles pertinents à l'avenir. Merci pour votre soutien à ce site!