獲取Angular UI指令以引導並運行MVC

我正在嘗試使用ASP MVC獲取引導程序的Angular UI指令。獲取Angular UI指令以引導並運行MVC

我創建了一個新的基礎項目，並使用Nuget添加Twitter Bootstrap，AngularJS和UI Bootstrap。

我註冊這些作爲捆綁像這樣：

bundles.Add(new StyleBundle("~/Content/bootstrap") 
    .Include("~/Content/bootstrap.css") 
    .Include("~/Content/bootstrap-theme.css")); 

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

bundles.Add(new ScriptBundle("~/bundles/angularUiDirectives") 
    .Include("~/Scripts/ui-bootstrap-{version}.js"));

我的共享_Layout.cshtml頁面看起來是這樣的：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width" /> 
    <title>Testing Angular - @ViewBag.Title</title> 
    @Styles.Render("~/Content/css") 
    @Styles.Render("~/Content/bootstrap") 
    @Scripts.Render("~/bundles/modernizr") 
</head> 
<body> 
    @RenderBody() 

    @Scripts.Render("~/bundles/jquery") 

    @Scripts.Render("~/bundles/angular") 
    @Scripts.Render("~/bundles/angularUiDirectives") 

    @RenderSection("scripts", required: false) 
</body> 
</html>

所以我加入了庫角UI指令，以及通過Nuget列出了here的依賴關係，我將所有這些庫註冊爲捆綁包，然後將這些捆綁包呈現在我的共享主頁面上。

到目前爲止好，後來我去一個新的指令：

只要你有下載的所有文件，幷包含在您的網頁，你只需要聲明的UI的依賴.bootstrap模塊

對於HTML和CSS，「聲明依賴關係」是什麼意思？在GitHub上的頁面提示我需要把地方執行以下操作：

angular.module('myModule', ['ui.bootstrap']);

我在哪裏可以把這個，當我跑了嗎？

感謝

來源

2014-01-16 JMK

我這樣做解決了下面這樣的：

添加以下到我的母版頁的打開HTML標記（與應用程序的名稱替換APPNAME）：
```
ng-app="appName" 
```
我創建了一個單獨的Javascript類，我稱之爲test.js，註冊爲一個包並添加以下內容：
```
angular.module('appName', []); 
angular.module('appName', ['ui.bootstrap']); 
```

第一行定義的角模塊，所述第二導線它到UI引導庫，並且需要兩者。

更新代碼以註冊我的包低於：

using System.Web.Optimization; 

namespace MvcApplication2 
{ 
    public class BundleConfig 
    { 
     public static void RegisterBundles(BundleCollection bundles) 
     { 
      bundles.Add(new StyleBundle("~/Content/bootstrap") 
       .Include("~/Content/bootstrap.css") 
       .Include("~/Content/bootstrap-theme.css")); 

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

      bundles.Add(new ScriptBundle("~/bundles/angularUiDirectives") 
       .Include("~/Scripts/ui-bootstrap-tpls-{version}.js")); 

      bundles.Add(new ScriptBundle("~/bundles/test").Include("~/Scripts/Test.js")); 
     } 
    } 
}

這裏是Test.js代碼：

angular.module('appName', []); 
angular.module('appName', ['ui.bootstrap']);

這裏是我的母版頁中的代碼：

<!DOCTYPE html> 
<html ng-app="appName"> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width" /> 
    <title>Testing Angular - @ViewBag.Title</title> 
    @Scripts.Render("~/bundles/angular") 
    @Scripts.Render("~/bundles/angularUiDirectives") 
    @Scripts.Render("~/bundles/test") 
    @Styles.Render("~/Content/bootstrap") 
</head> 
<body> 
    @RenderBody() 
    @RenderSection("scripts", required: false) 
</body> 
</html>

在這一點上，我們完全安裝了AngularJS，以及用於在ASP MVC應用程序中引導Bootstrap和Angular Directives灰。

來源

2014-01-16 14:12:26 JMK

獲取Angular UI指令以引導並運行MVC

回答

相關問題