javascript - 结合 AngularJS、RequireJS 和 asp.NET 时出错-6ren

javascript - 结合 AngularJS、RequireJS 和 asp.NET 时出错

转载作者：行者123 更新时间：2023-11-29 15:42:29

25

4

我正在尝试使用 asp.NET Web API、AngularJS 和 RequireJS 启动一个项目。我在关注 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

这是我的 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 上创建 Angular 对象，然后添加 ng-app属性，我已经在做。

谢谢!

最佳答案

罪魁祸首是这段代码，之前添加到我的 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 被解释为文本/html 文件，并导致错误消息。

关于javascript - 结合 AngularJS、RequireJS 和 asp.NET 时出错，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17054111/

25

4

0

文章推荐： javascript - 指定位置时 jQuery 工具提示在链接上闪烁

文章推荐： javascript - 将 B 样条曲线转换为贝塞尔曲线

requirejs - 验证码 + RequireJS
如何使用 requirejs 导入 recaptcha。我已经尝试了几件事，但没有任何效果。我需要这样做，以便能够在加载后使用 reCaptcha 的渲染方法自行渲染它。 require.confi
requirejs - 依赖关系未定义 - RequireJS
我正在尝试将 OpenLayers 库与 RequireJS 一起使用。问题是，OpenLayers 一直处于“未定义”状态，即使它被列为我的模块的唯一依赖项: define(['OpenLayer
requirejs - 使用 Gulp 构建 requireJS 项目 - gulp-requirejs
我正在尝试使用 gulp-requirejs构建一个演示项目。我希望结果是一个包含所有 js 依赖项和模板的单个文件。这是我的 gulpfile.js var gulp = require('gulp
requirejs - 如何从浏览器控制台访问 RequireJS 模块？
没有 Require.js 就可以在浏览器控制台中调用全局对象，例如 app app.movies 当我将代码包装在 RequireJS 模块中时，如何在浏览器控制台中访问模块中的数据？我会发现这有助
requirejs - 如何在 requirejs 中重新定义模块？
这个问题有 3 个部分。我有两个模块 a 和 b。如何在最初需要 b 后重新定义它？如果 a 依赖于 b，我该如何更新 a 以使用新的 b？如何找到所有依赖于 b 的模块并更新它们？例如；
requirejs - 使用 RequireJS 的主干关系子模型
我正在尝试找到一种将 Backbone-relational 子模型与 RequireJS 一起使用的方法，其中子模型与 super 模型位于不同的文件中。例如: // app.js define(
requirejs - 使用 requirejs 优化时不要复制源文件
使用 require.js (r.js) 优化 js 代码时，将所有 js 源代码复制到目标目录(dir 属性)。有没有办法(一些配置)来防止 requirejs 复制源文件？最佳答案如果添加
requirejs - phantomjs 和 requirejs
main.js 文件中的代码如下: phantom.injectJs("libs/require-1.0.7.js"); require.config( {
requirejs - 使用 RequireJS 配置文件作为构建文件？
我在 require-config.js 中配置了一些路径，如下所示: var require = { baseUrl: '/javascript', paths: {
requirejs - 在 RequireJS 中返回一个模块
我正在重构一个大型 javascript 代码库以使用 RequireJS。不幸的是，我正在处理的许多文件都不是面向对象的，并且在不进行重大修改的情况下无法返回对象。是否有更有效的方法让“依赖”模块访
requirejs - 使用 RequireJs 按特定顺序加载文件
我是 RequireJS 的新手，我对加载顺序感到困惑。我有一个全局项目配置，需要在位于 js/app/* 的模块之前加载。这是我的结构: index.html config.js js/
requirejs - 如何包装使用 RequireJS 加载的外部库？
我已经使用 requireJS 设置了一个 Angular 应用程序。在部署之前，我将所有内容捆绑到一个唯一的文件中。通常，外部库没有 requireJS“定义”包装器。例如Angular Para
requirejs - 有没有更简洁的方法在 RequireJS 中包含依赖项
假设我有一个如下所示的模块: define(['jquery', 'actions', 'util', 'text!../templates/dialog.html!strip', 'text!../
requirejs - 告诉 RequireJS 不要缩小文件
如何使用 grunt-contrib-requirejs配置或什至r.js Config不缩小特定文件。我可以使用optimize: 'none'选项禁用所有文件的缩小。但我不知道如何对单个文件禁用
requirejs - 在运行时添加 RequireJS 配置的路径
好吧，我已经知道你应该像这样使用 RequireJS 配置路径 require.config({ paths: { name: 'value' } }); 并这样调用它。 requir
requirejs - 使用 requirejs 是否可以在不尝试加载的情况下检查模块是否已定义？
我希望能够有选择地定义一个模块，然后在我的代码中使用或不使用它。我正在考虑的特殊情况是在调试/测试环境中加载模拟/ stub 模块，但不是在我上线时加载。这是示例: 在 html 文件中，可以选择加载
requirejs - Gruntjs 间歇性地停止在 requirejs
我为构建过程创建了一个任务，其中 requirejs 作为它的子任务之一，并且在 requirejs 之后几乎没有其他任务。该任务在运行 requirejs 后停止，即使使用详细信息也不会抛出错误。任
requirejs - RequireJS 中的局部/全局变量
我想创建一个可以从我的 RequireJS 项目中的任何模块访问的变量。例如，在初始化时我想设置: this.myVar = 123; 并且能够在我的 RequireJS 项目内部(但不是外部)的任
requirejs - 从 requirejs 映射调用文本插件
我正在使用 TypeScript、Backbone 和 Mustache 编写网络应用程序。我想使用 Requirejs 进行依赖加载。我还在使用 TypeScript 的 Web Essentia
requirejs - Jasmine、Grunt、RequireJS 在测试输出上停滞
我正在尝试创建一个节点样板，并尝试创建一个任务来运行 Jasmine 测试。我的 Gruntfile.js 中有以下配置: jasmine: { src : ['static/test/spec/

首页

博学

6Ren·AI

商城

javascript - 结合 AngularJS、RequireJS 和 asp.NET 时出错