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 は、.cshtml まで完全に読み込まれます<div ng-view></div>。それ以上のものは読み込まれず、<html>タグには属性が与えられませんng-app。また、コンソールに次のエラーが表示されます。

Uncaught SyntaxError: Unexpected token <

なぜこれが起こっているのですか？同様の質問で私が見つけた唯一の解決策は、 document.ready で angular オブジェクトを作成し、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 に答える