2016-06-18 19 views
1

Ich weiß, das ist die grundlegende Frage, ich habe versucht, einen Workaround zu finden, und es funktioniert. Aber ich möchte wissen, was ich hier vermisse.Angular JS + Asp.Net MVC grundlegendes Beispiel; Angular nicht verwiesen

Ich habe eine Beispielanwendung mit Asp.Net MVC und eckigen erstellt, nur versucht, einen fest codierten Text MVC anzeigen von eckigen anzuzeigen und es wird nicht angezeigt. Ich denke, das passiert, weil es angular.js nicht finden konnte. Ich habe versucht, die Quelle zu sehen und konnte die Referenz finden.

Im letzteren Fall habe ich den vollständigen Pfad der Angular.js-Datei zur Verfügung gestellt und es funktioniert gut.

Code: BundleConfig.cs

bundles.Add(new ScriptBundle("~/bundles/AMV_Angular1") 
      .IncludeDirectory("~/Scripts/Controllers","*.js") 
      .Include("~/Scripts/AMV_Angular1.js", 
      "~/Scripts/Angular.js")); 

Index.cshtml

<!DOCTYPE html> 
<html ng-app="myApp"> 
<head> 
    <title ng-bind="helloAngular"></title> 
</head> 
<body ng-controller="cnt"> 

    <input type="text" ng-model="helloAngular" /> 
    <h1>{{helloAngular}}</h1> 

    @Scripts.Render("~/bundles/AMV_Angular1") 
</body> 
</html> 

Javascript Datei

(function() { 
    var myApp = angular.module('myApp', []); 

    myApp.controller("cnt", function ($scope) { 
     $scope.helloAngular = "this is from Angular"; 
    }); 

}()); 

Die unten ausgegeben in HTML und Quelle der gerenderten HTML

enter image description here Unten ist meine Verzeichnisstruktur

enter image description here

+0

gibt es irgendwelche Fehler in der Konsole? Was passiert, wenn Sie das Beispiel ausführen? Geben Sie ein minimales Beispiel an, das das Problem reproduziert. –

+0

@GeorgeStocker: Es gibt keine Fehler in der Konsole. Wenn das Beispiel ausgeführt wird, gibt es {{hallo Angular}} display (was ich im Bild angezeigt habe). Bitte, wenn Sie auf das Bild klicken können, das ich hochgeladen habe, würde es alle Details zur Verfügung stellen, die ich detailliert haben könnte. Bitte lassen Sie mich wissen, wenn andere Eingaben benötigt werden. Danke – Ramu

+0

Ihr minimales Beispiel sollte in Form von Code sein; keine Screenshots. –

Antwort

2

Sieht aus wie Sie Ihre Skripte in der falschen Reihenfolge geladen werden. Angular.js sollte aufgrund Ihrer Abhängigkeit von angular.js vor Ihren Controllern usw. geladen werden.

Versuchen Sie es zuerst in Ihrem Bündel hinzuzufügen:

bundles.Add(new ScriptBundle("~/bundles/AMV_Angular_source") 
      .Include("~/Scripts/Angular.js")); 

bundles.Add(new ScriptBundle("~/bundles/AMV_Angular1") 
      .IncludeDirectory("~/Scripts/Controllers","*.js") 
      .Include("~/Scripts/AMV_Angular1.js")); 
+0

Wunderbar. Funktioniert wie Charme. Dachte, dass es wegen eckigen nicht referiert wurde. es ist dumm, dass ich es nicht erkennen konnte. Danke für deine Zeit und Hilfe. – Ramu

+0

@Ramu Großartig! Kleine Details sind manchmal am schwersten zu fangen, ein ehrlicher Fehler. Einen schönen Tag noch! –