Angular JS + Asp.Net MVC basic example; Angular not been referred

Question

I know this is the basic question, i tried to find a workaround and it works. But i want to know what i'm missing here.

I have created a sample application with Asp.Net MVC and angular, just tried to display a hardcoded text to MVC view from angular and its not getting displayed. I guess this happens as it couldnt find angular.js reference. I tried to view source and could find the reference.

In the later case i provided full path of Angular.js file and its working fine.

Code: BundleConfig.cs

    bundles.Add(new ScriptBundle("~/bundles/AMV_Angular1")
            .IncludeDirectory("~/Scripts/Controllers","*.js")
            .Include("~/Scripts/AMV_Angular1.js",
            "~/Scripts/Angular.js"));

Index.cshtml

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title ng-bind="helloAngular"></title>
</head>
<body ng-controller="cnt">

    <input type="text" ng-model="helloAngular" />
    <h1>{{helloAngular}}</h1>

    @Scripts.Render("~/bundles/AMV_Angular1")
</body>
</html>

Javascript File

(function () {
    var myApp = angular.module('myApp', []);

    myApp.controller("cnt", function ($scope) {
        $scope.helloAngular = "this is from Angular";
    });

}());

The below is output in HTML and Source of rendered HTML

Below is my directory structure

are there any errors in the console? What happens when you run the example? Please provide a minimal example that reproduces the issue. — George Stocker
– George Stocker, Commented Jun 18, 2016 at 18:43
@GeorgeStocker : There are no errors in console. when the run the example there is {{hello Angular}} display (which i have displayed in the image). Please if you can click the image i have uploaded, it would provide all details i could have detailed. Please let me know if any other input is needed. Thanks — Ramu
– Ramu, Commented Jun 18, 2016 at 18:49
your minimal example should be in the form of code; not screenshots. — George Stocker
– George Stocker, Commented Jun 18, 2016 at 19:28

Marcus Höglund · Accepted Answer · 2016-06-19 15:29:42Z

2

Looks like you are loading your scripts in the wrong order. Angular.js should be loaded before your controllers etc due their dependecy on angular.js.

Try to add it first in your bundle:

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

 bundles.Add(new ScriptBundle("~/bundles/AMV_Angular1")
            .IncludeDirectory("~/Scripts/Controllers","*.js")
            .Include("~/Scripts/AMV_Angular1.js"));

answered Jun 19, 2016 at 15:29

Marcus Höglund

16.9k11 gold badges53 silver badges72 bronze badges

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

2 Comments

Ramu Over a year ago

Wonderful. Works like charm. Thought its due to angular not been refereed. its stupid that i couldn't recognize it. Thank you for your time and help.

Marcus Höglund Over a year ago

@Ramu Great! Small details are sometimes the hardest to catch, an honest mistake. Have a nice day!

Collectives™ on Stack Overflow

Angular JS + Asp.Net MVC basic example; Angular not been referred

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related