Asp.net mvc 获取用于引导和使用MVC运行的角度UI指令_Asp.net Mvc_Html_Css_Angular Ui

Asp.net mvc 获取用于引导和使用MVC运行的角度UI指令

asp.net-mvc html css

Asp.net mvc 获取用于引导和使用MVC运行的角度UI指令,asp.net-mvc,html,css,angular-ui,Asp.net Mvc,Html,Css,Angular Ui,我正在尝试获取用于使用ASP MVC引导的角度UI指令我创建了一个新的基本项目，并使用Nuget添加了Twitter引导、AngularJS和UI引导我将这些注册为捆绑包，如下所示： bundles.Add(new StyleBundle("~/Content/bootstrap") .Include("~/Content/bootstrap.css") .Include("~/Content/bootstrap-theme.css")); bundles.Add(new

我正在尝试获取用于使用ASP MVC引导的角度UI指令

我创建了一个新的基本项目，并使用Nuget添加了Twitter引导、AngularJS和UI引导

我将这些注册为捆绑包，如下所示：

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>

我应该把它放在哪里，什么时候运行

谢谢

我通过执行以下操作来解决此问题：

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

我在母版页的开始HTML标记中添加了以下内容（将appName替换为应用程序的名称）：

我创建了一个单独的Javascript类，名为test.js，将其注册为一个包，并添加了以下内容：

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

第一行定义angular模块，第二行将其连接到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>


测试角度-@ViewBag.Title
@Scripts.Render（“~/bundles/angular”）
@Scripts.Render（“~/bundles/angularui指令”）
@Scripts.Render（“~/bundles/test”）
@style.Render（“~/Content/bootstrap”）
@RenderBody（）
@RenderSection（“脚本”，必需：false）

现在，我们已经在ASP MVC应用程序中完全使用AngularJS、Twitter引导和Angular引导进行了设置

<!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>