@Script.Render Not Working For AngularJS

Question

I am having issues trying to get angular to work on my website. If I use

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js"></script>

it works just fine. When I do @Scripts.Render("~/bundles/angular") It doesn't work. My BundleConfig file contains this

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

When looking at the page source it shows <script src="/Scripts/angular.js"></script> which is correct. I can click on the link from the page source and it loads up the file. When I click on the link to the Google API, it looks identical. I have even copy and pasted the contents of the Google API into my angular.js file so they are exactly the same. It still doesn't work. Furthermore, I added bootstrap the same way I did angular (they exist in the same folder and the bundle.Add for both are the same) and it is working great.

Here is webpage:

<html ng-app>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>

    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
    <div class="navbar navbar-default">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Hoop Statistics</a>
        </div>
        <div class="navbar-collapse collapse navbar-responsive-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Players</a></li>
                <li><a href="#">Team</a></li>
            </ul>
        </div>
    </div>
    <h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>

    <script type="text/javascript">
        function HelloWorldCtrl($scope) {
            $scope.helloMessage = "Hello World";
        }
    </script>


    <a href="#/test.html">Test</a>

    @RenderBody()
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/angular")
    @RenderSection("scripts", required: false)
    @*<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js"></script>*@
    <script src="~/app/js/app.js"></script>
</body>
</html>

Radim Köhler · Accepted Answer · 2014-09-13 18:23:11Z

1

We should use it like this:

bundles.Add(new ScriptBundle("~/js/angular")
    // this to map exact file name
    .Include("~/Scripts/jquery/jquery-2.1.0.js"
           , "~/Scripts/angular-js/angular.js"
           ... )
    ...
    // this to map files from dir with some search/filter
    .IncludeDirectory("~/MyApp/", "*.module.js", true)

So this

.Include("~/Scripts/angular-*"));

should be like this:

.IncludeDirectory("~/Scripts/", "angular-*", true)

answered Sep 13, 2014 at 18:23

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Neil Over a year ago

I have made the change and it still isn't working. I am just trying to do a simple hello world on my website, so I really only need angular.js.

Radim Köhler Over a year ago

I am trying to show you what is working. I am using it exactly this way. The above I do call in index.cshtml this way: @Scripts.Render("~/js/angular")

Neil Over a year ago

It creates all of the references in the page when I look at the source. However, I still get {{helloMessage}} instead of Hello World like when I use the Google API reference.

Radim Köhler Over a year ago

OK this means, that the part with bundling is OK! but mostlikely.. your app is simply not part of that all. Like if ng-app="myApp" is missing or your scriptWithMyApp.js is missing. Do you know what I mean? I am trying to say: 1) bundle is now configured well 2) the app was not started 3) seems to be missing app script or ng-app def

Neil Over a year ago

But why would it work when I use <script src="ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js"> ?

|

Collectives™ on Stack Overflow

@Script.Render Not Working For AngularJS

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related