[英]Managing an AngularJS web app within ASP.NET (alternative to RequireJS)
[英]Getting error when combining AngularJS, RequireJS, and asp.NET
我正在尝试使用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
属性。
谢谢!
罪魁祸首是这段代码,之前添加到我的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文件,并导致错误消息。
app.js
什么? 你叫它myApp
吗? 如果是这样我会改变这一行:
angular.bootstrap($html, [app['name']]);
至
angular.bootstrap($html, ['myApp']);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.