Getting Angular UI Directives for Bootstrap up and running with MVC

Question

I am trying to get Angular UI Directives for bootstrap working with ASP MVC.

I have created a new, basic project and have used Nuget to add Twitter Bootstrap, AngularJS and UI Bootstrap.

I am registering these as bundles like so:

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"));

My shared _Layout.cshtml page looks like this:

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

So I have added the libraries for Angular UI directives, along with the dependencies listed here via Nuget, I am registering all of these libraries as bundles and then I am rendering these bundles on my shared master page.

So far so good, but then I get to the next instruction:

As soon as you've got all the files downloaded and included in your page you just need to declare a dependency on the ui.bootstrap module

What does 'declare a dependency' mean in regards to HTML and CSS? The page on github suggests I need to put the following somewhere:

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

Where do I put this, and when do I run it?

Thanks

JMK · Accepted Answer · 2014-01-16 14:12:26Z

I solve this by doing the following:

I added the following to the opening HTML tag of my master page (replacing appName with the name of your application):
```
ng-app="appName"
```
I created a seperate Javascript class which I called test.js, registered this as a bundle and added the following:
```
angular.module('appName', []);
angular.module('appName', ['ui.bootstrap']);
```

The first line defines the angular module, the second wires it up to the UI Bootstrap library, and you need both.

Updated code to register my bundles is below:

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"));
        }
    }
}

Here is the code for Test.js:

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

Here is the code for my master page:

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

At this point we are fully setup with AngularJS, and Twitter Bootstrap and Angular Directives for Bootstrap in an ASP MVC application.

Collectives™ on Stack Overflow

Getting Angular UI Directives for Bootstrap up and running with MVC

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related