3

我正在尝试使用 asp.NET Web API、AngularJS 和 RequireJS 启动一个项目。我一直在关注这个种子项目，但它一直没有工作。

我当前的文件夹结构如下所示：

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我已经在做的属性。

谢谢！

4

2 回答 2

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>

这导致 require.js 被解释为 text/html 文件，并导致错误消息。

于 2013-06-12T15:21:49.077 回答
0

里面有什么app.js？你打电话了myApp吗？如果是这样，我会改变这一行：

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

至

angular.bootstrap($html, ['myApp']);
于 2013-06-11T21:33:52.123 回答