wie ng-App mit leeren Modul in AngularJS arbeitet

Ich bin neu in AngularJS, so mich bitte entschuldigen, wenn es sehr grundlegende Frage ist:wie ng-App mit leeren Modul in AngularJS arbeitet

folgender Code fine.So arbeitet, was ich in der Textbox tippe wird immer wie erwartet auf der Konsole gedruckt:

<!DOCTYPE html> 
<html lang="en-US" ng-app=""> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
    <body> 
     <div > 
     <p>Name : <input type="text" ng-model="name"></p> 
     {{name}} 
     </div> 
    </body> 
</html>

wenn jedoch I ng-app verändern = "" in ng-app = " "oder anderer Text wie ng-app =" abc" in der obigen Code, tut funktioniert nicht.Mein Verständnis ist, dass es ein Modul mit diesem Namen oder mit leerem Namen erwartet, aber dann was heißt es, wenn es mit ng-app = "" arbeitet.

Quelle

2017-02-25 user2603985

Das ist eine gute Frage, denken viele von uns vielleicht nicht, warum es funktioniert. Lass mich das hier erklären.

Hier ist eine Antwort auf Ihre Frage.

Wenn Sie AngularJs in Ihrem Projekt enthalten entweder durch script-tag oder durch Bower, npm etc eine Datei geladen Angular.js erhalten genannt.

Diese Datei hat viele Funktionen wie normale JS-Dateien enthalten. Einer von ihnen ist angularInit.

angularInit:

Diese Funktion ist verantwortlich für die Erfassung der module name gegeben und wird mit angular.module() dieses Modul Namen übereinstimmen.

Werfen Sie einen Blick auf angulatInit function.

function angularInit(element, bootstrap) { 
    var appElement, 
     module, 
     config = {}; 

    // The element `element` has priority over any other element. 
    forEach(ngAttrPrefixes, function(prefix) { 
    var name = prefix + 'app'; 

    if (!appElement && element.hasAttribute && element.hasAttribute(name)) { 
     appElement = element; 
     module = element.getAttribute(name); 
    } 
    }); 
    forEach(ngAttrPrefixes, function(prefix) { 
    var name = prefix + 'app'; 
    var candidate; 

    if (!appElement && (candidate = element.querySelector('[' + name.replace(':', '\\:') + ']'))) { 
     appElement = candidate; 
     module = candidate.getAttribute(name); 
    } 
    }); 
    if (appElement) { 
    if (!isAutoBootstrapAllowed) { 
     window.console.error('AngularJS: disabling automatic bootstrap. <script> protocol indicates ' + 
      'an extension, document.location.href does not match.'); 
     return; 
    } 
    config.strictDi = getNgAttribute(appElement, 'strict-di') !== null; 
    bootstrap(appElement, module ? [module] : [], config); 
    } 
}

Wenn wir einen Teil dieser Funktion extrahieren,

forEach(ngAttrPrefixes, function(prefix) { 
    var name = prefix + 'app'; 

    if (!appElement && element.hasAttribute && element.hasAttribute(name)) { 
     appElement = element; 
     module = element.getAttribute(name); 
    } 
    });

Der obere Teil ist der Ort, wo die Magie auftritt.

daß erste ngAttrPrefixes sehen, die ein array

var ngAttrPrefixes = ['ng-', 'data-ng-', 'ng:', 'x-ng-'];

Erläuterung desjenigen Teils des Codes ist:

ngAttrPrefixes wird forEach Funktion geschleift werden.code: (forEach(ngAttrPrefixes, function(prefix) {)
wir für ng-app oder "Daten-ng-APP oder suchen 'ng: app' oder" x-ng-APP unter Verwendung code: (var name = prefix + 'app')
Wenn ein Element eine von ihnen enthält, (zB) (code: if (!appElement && element.hasAttribute && element.hasAttribute(name)) {)
Assing dieses Element zu einer Variablen namens appElement. (code: appElement = element;)
Der Wert dieses Attributs wird im Modul gespeichert. (code: module = element.getAttribute(name);)

So moduleVariable erhält den Wert von ng-app.

Nach einigen Zeilen Code, können Sie eine Linie,

sehen

bootstrap(appElement, module ? [module] : [], config);

Hier den Winkel Schopf aus dem Sumpf der Anwendung ng-app

der Code, module ? [module] : [] sagt, dass mit

Wenn

gibt es einen Wert in module Variable, die wir oben gesehen haben. Nehmen Sie dann [module] in einem Array und suchen Sie nach diesem Modul.

sonst

nehmen [] und Code ausführt, ohne Modul sucht.

Wenn ng-app = "myApp", dann Modul myApp sein wird, und es wird in angular.element("myApp")

Eg: <div ng-app="myApp">

Wenn ng-app = "" or ng-app, dann für myApp Modul Suchmodul wird sein "" der Wert wird []

sein 10

Eg: <div ng-app="">/Eg: <div ng-app>

So wird es ohne die Suche nach Modul ausführen.

Schlussfolgerung aus dem obigen Code:

Also, wenn ng-app="" die Bedingung module ? [module] : [] wird fehlschlagen und das Ergebnis wird [] und wird nicht für das Modul suchen. Diese Zeile beantwortet Ihre Frage.

Bearbeiten auf Ihrem Kommentar:

Der ternäre Operator prüft nicht nur boolean's, prüft sie auf das Vorhandensein der bestimmten Variablen.

ZB:

var a = "Present" 
 

 
a ? console.log("a is present but not boolean") : console.log("a is absent")

Bitte führen Sie das obige Beispiel Ihre Zweifel zu klären.

Quelle

2017-02-25 13:36:34 Sravan

Danke für die Antwort im Detail. Ich habe einen Zweifel. Sollte die Modulvariable keinen booleschen Wert haben (wahr oder falsch) in diesem Ausdruck -> Modul? [Modul]: [] – user2603985

Überprüfen Sie das neueste Update, ich habe Ihren Kommentar beantwortet. – Sravan

Danke für Ihre Antwort. – user2603985

-2

Prüfung unter Code für diese

<!DOCTYPE html> 
 
    <html lang="en-US" > 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
    <body> 
 
    <div ng-app="" > 
 
     <p>Name : <input type="text" ng-model="name"></p> 
 
    {{name}} 
 
    </div> 
 
    </body>

Quelle

2017-02-25 13:16:40

Wie beantwortet das die Frage? – charlietfl

wie ng-App mit leeren Modul in AngularJS arbeitet

Antwort

Verwandte Themen