簡單添加Angular到MVC不工作？

我打算做一個簡單的使用Angular的MVC項目。我想我已經正確設置了一切，但顯然我錯過了可能很簡單的事情。簡單添加Angular到MVC不工作？

當我運行網站並查看開發人員工具時，看起來好像jQuery在Angular之前加載。我不知道這是爲什麼，或者如何強制它首先加載。

我使用VS 2015，並創建了一個簡單的MVC與Web API應用程序。我將Angular.js v1.5添加到我的腳本文件夾中，將ng-app添加到主體，並將angular.js添加到包配置文件。我確實重新命名了捆綁包，但我不認爲這是問題所在。

這是我的BundleConfig。我將角度文件添加到jquery包中，並將其重命名爲「工具」。我確定角色來到jQuery之前。

public static void RegisterBundles(BundleCollection bundles) 
{ 
    bundles.Add(new ScriptBundle("~/bundles/tools").Include(
       "~/Scripts/angular.min.js", 
       "~/Scripts/jquery-{version}.js")); 

    bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
       "~/Scripts/jquery.validate*")); 

    // Use the development version of Modernizr to develop with and learn from. Then, when you're 
    // ready for production, use the build tool at http://modernizr.com to pick only the tests you need. 
    bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
       "~/Scripts/modernizr-*")); 

    bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
       "~/Scripts/bootstrap.js", 
       "~/Scripts/respond.js")); 

    bundles.Add(new StyleBundle("~/Content/css").Include(
       "~/Content/bootstrap.css", 
       "~/Content/site.css")); 
}

這是我的_Layout頁面。我將頁腳中的軟件包名稱更改爲「工具」以匹配我的軟件包。我還在我的身體標記中添加了ng-app。

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>@ViewBag.Title - CPP Customer Call</title> 
    @Styles.Render("~/Content/css") 
    @Scripts.Render("~/bundles/modernizr") 
</head> 
<body data-ng-app="cppApp"> 
    <div class="navbar navbar-default navbar-fixed-top"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       @Html.ActionLink("CPP Customer Call", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" }) 
      </div> 
      <div class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav"> 
        <li>@Html.ActionLink("Home", "Index", "Home")</li> 
        <li>@Html.ActionLink("About", "About", "Home")</li> 
        <li>@Html.ActionLink("Contact", "Contact", "Home")</li> 
       </ul> 
       @Html.Partial("_LoginPartial") 
      </div> 
     </div> 
    </div> 
    <div class="container body-content"> 
     @RenderBody() 
     <hr /> 
     <footer> 
      <p>&copy; 2016 - @DateTime.Now.Year</p> 
     </footer> 
    </div> 

    @Scripts.Render("~/bundles/tools") 
    @Scripts.Render("~/bundles/bootstrap") 
    @RenderSection("scripts", required: false) 
</body> 
</html>

現在我只是想寫出一個簡單的表達式。

<h2>Angular {{ 1 + 1 }}</h2>

查看頁面只顯示「角度{{1 + 1}}」而不是「角度2」。

來源

2016-04-21 Caverman

我敢打賭，你有你的瀏覽器控制檯一些角度誤差。你也需要根據你的html body標籤定義一個名爲'cppApp'的角度模塊，這個腳本需要在角度庫之後加載。 – Igor

除了@Igor關於'cppApp'的說法，如果你想使用自動引導來測試Angular是否正在加載，那麼不要給'data-ng-app'屬性命名。 – Lex

在嘗試了上述評論提供的解決方案之後，如果它仍然不起作用，請從bundle中刪除angular.min.js，並在視圖中添加腳本並進行檢查。讓bundle/tools只包含jquery –

所以問題是我申請了一個應用程序名稱的ng-app，但並沒有爲它首先創建一個模塊。這是我如何修復它。希望它能幫助別人。

創建一個app.js文件。我把它放在我的Scripts/App/app.js結構中。

(function() { 
    var app = angular.module('cppApp', []);  //('moduleName', [array of injected modules]) 
}());

，並更新了我的BundleConfig.cs這個

bundles.Add(new ScriptBundle("~/bundles/tools").Include(
         "~/Scripts/angular.min.js", 
         "~/Scripts/App/app.js", 
         "~/Scripts/jquery-{version}.js"));

來源

2016-04-21 17:49:25 Caverman

簡單添加Angular到MVC不工作？

回答

相關問題