2013-06-11 2 views
3

Я пытаюсь запустить проект с использованием asp.NET Web API, AngularJS и RequireJS. Я следовал за this семенным проектом, но он не работал.Получение ошибки при объединении AngularJS, RequireJS и asp.NET

Моей текущая структура папок выглядит следующим образом:

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 

Вот мой 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']); 
}); 

Вот мой 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'); 
    }); 
}); 

И, наконец, вот мой 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 загружается полностью, вплоть до <div ng-view></div>. Он не загружает ничего кроме этого, а тегу <html> не присваивается атрибут ng-app. Я также получаю следующую ошибку в консоли:

Uncaught SyntaxError: Unexpected token < 

Любые идеи, почему это происходит? Единственное решение, которое я нашел по подобным вопросам, - это создать угловой объект на document.ready, а затем добавить атрибут ng-app, который я уже делаю.

Спасибо!

+0

У меня есть чувство, что requireJS может пытаться интерпретировать 'Default.cshtml' как файл javascript, но я не уверен. – Jakemmarsh

ответ

1

Преступник был этот фрагмент кода, добавил к моей Web.config ранее:

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

Это причиняло требуют .js, который будет интерпретироваться как текст/html-файл, и в результате появляется сообщение об ошибке.

0

Что находится в app.js? Вы на это пообщались myApp? Если это так, я бы изменить эту строку:

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

к

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

пробовал это, но все равно не повезло. Обновлено оригинальное сообщение, чтобы отразить изменения. – Jakemmarsh

Смежные вопросы