Getting error when combining AngularJS, RequireJS, and asp.NET

Question

I'm attempting to start a project using asp.NET Web API, AngularJS, and RequireJS. I was following this seed project, but it hasn't been working.

My current folder structure looks like this:

css/
   main.css
   normalize.css
img/
js/
   controllers/
      myctrl2.js
   lib/
      angular/
         angular.js
   jquery/
      jquery-1.9.1.min.js
   require/
      require.js
      text.js
   app.js
   controllers.js
   directives.js
   filters.js
   main.js
   routes.js
   services.js
partials/
   partial1.html
   partial2.html
Default.cshtml

Here's my app.js:

define([
    'angular',
    'filters',
    'services',
    'directives',
    'controllers'
], function (angular, filters, services, directives, controllers) {
    'use strict';

    return angular.module('myApp', ['myApp.controllers', 'myApp.filters', 'myApp.services', 'myApp.directives']);
});

Here's my main.js:

require.config({
    paths: {
        jquery: 'lib/jquery/jquery-1.9.1.min',
        angular: 'lib/angular/angular',
        text: 'lib/require/text'
    },
    shim: {
        'angular': { 'exports': 'angular' }
    },
    priority: [
        "angular"
    ]
});

require([
    'jquery',
    'angular',
    'app',
    'routes'
], function ($, angular, app, routes) {
    'use strict';
    $(document).ready(function () {
        var $html = $('html');
        angular.bootstrap($html, ['myApp']);
        // Because of RequireJS we need to bootstrap the app app manually
        // and Angular Scenario runner won't be able to communicate with our app
        // unless we explicitely mark the container as app holder
        // More info: https://groups.google.com/forum/#!msg/angular/yslVnZh9Yjk/MLi3VGXZLeMJ
        $html.addClass('ng-app');
    });
});

And lastly, here's my default.cshtml:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>360</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <script data-main="js/main" src="js/lib/require/require.js"></script>
    </head>
    <body>
        <h1>AngularJS + RequireJS</h1>
        <ul class="menu">
            <li><a href="#/view1">View 1</a></li>
            <li><a href="#/view2">View 2</a></li>
        </ul>
        <div ng-view></div>

    </body>
</html>

Default.cshtml loads completely, up until the <div ng-view></div>. It doesn't load anything beyond that, and the <html> tag is not given the attribute ng-app. I also receive the following error in the console:

Uncaught SyntaxError: Unexpected token <

Any ideas why this is happening? The only solution I've found on similar questions is creating the angular object on document.ready and then adding the ng-app attribute, which I'm already doing.

Thanks!

I have a feeling requireJS might be trying to interpret Default.cshtml as a javascript file, but I'm not sure. — Jakemmarsh
– Jakemmarsh, Commented Jun 11, 2013 at 21:39

Jakemmarsh · Accepted Answer · 2013-06-12 15:21:49Z

1

The culprit was this snippet of code, added to my Web.config previously:

<system.webServer>
   <rewrite>
      <rules>
          <rule name="Default" stopProcessing="true">
              <match url="^(?!images|content|scripts|favicon|robots).*" />
              <action type="Rewrite" url="Default.cshtml" />
          </rule>
      <rules>
   </rewrite>
</system.webServer>

This was causing require.js to be interpreted as a text/html file, and resulting in the error message.

answered Jun 12, 2013 at 15:21

Jakemmarsh

4,68112 gold badges45 silver badges71 bronze badges

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

Comments

Terry · Accepted Answer · 2013-06-11 21:33:52Z

0

What's in app.js? Did you call it myApp? If so I would change this line:

angular.bootstrap($html, [app['name']]);

to

angular.bootstrap($html, ['myApp']);

answered Jun 11, 2013 at 21:33

Terry

14.2k9 gold badges58 silver badges84 bronze badges

1 Comment

Jakemmarsh Over a year ago

tried that, but still no luck. Updated original post to reflect the change.

Collectives™ on Stack Overflow

Getting error when combining AngularJS, RequireJS, and asp.NET

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related