堆棧內存溢出
  簡體   English   中英

AngularJS SPA在Web Api項目中不起作用

[英]AngularJS SPA is not working in Web Api project

 原文  2016-08-04 13:46:48  4   3    angularjs/ asp.net-web-api2/ single-page-application/ angularjs-routing

問題描述

我創建了一個Web api項目，此后，我將創建單頁應用程序，但出現一些錯誤，因此我將代碼發布在下面：

我的angularjs代碼： 

var app = angular.module('myApp', ['ngRoute']);

app.config('$routeProvider', function ($routeProvider) {
    $routeProvider
        .when('/',{
        templateUrl: 'tpl/users.html',
        controller: 'myController'
    })
    .when('/addusers',  {
        templateUrl: 'tpl/addusers.html',
        controller: 'addusers'
    })
    .when('/admin',{
        templateUrl: 'tpl/admin.html',
        controller: 'admin'
    });
});

app.controller('myController', function ($scope) {
    $scope.message = 'Home';
});

app.controller('admin', function ($scope) {
    $scope.message = 'Admin';
});

app.controller('addusers', function ($scope) {
    $scope.message = 'addusers';
});

和我的HTML頁面： 

<html ng-app="myApp">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
    <script src="app/app.js"></script>
</head>
<body ng-controller="myController">
    <a href="/">Home</a>
    <a href="#/admin">Admin</a>
    <a href="#/addusers">Add Users</a>
    <br />
    <div ng-view> </div>
</body>
</html>

並低於angularjs錯誤： 

Error: [$injector:modulerr] http://errors.angularjs.org/1.2.25/$injector/modulerr?p0=myApp&p1=%5Bng%3Aareq%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.2.25%2Fng%2Fareq%3Fp0%3Dfn%26p1%3Dnot%2520a%2520function%252C%2520got%2520string%0AD%2F%3C%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A6%3A450%0ADb%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A19%3A106%0AWa%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A19%3A193%0Asc%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A32%3A423%0Ad%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A34%3A398%0Ae%2F%3C%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A33%3A386%0Ar%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A7%3A288%0Ae%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A33%3A207%0Agc%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A36%3A309%0Afc%2Fc%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A18%3A170%0Afc%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A18%3A387%0AXc%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A17%3A415%0A%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A214%3A469%0Aa%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A145%3A67%0Aoe%2Fc%2F%3C%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A31%3A223%0Ar%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A7%3A288%0Aoe%2Fc%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A31%3A207%0AEventListener.handleEvent*sb%3C%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A143%3A241%0Aa%2F%3C%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A150%3A402%0Ar%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A7%3A288%0Aa%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A149%3A381%0AS.prototype%5Bc%5D%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A154%3A57%0AS.prototype.ready%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A145%3A122%0A%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A214%3A447%0A%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A6%3A2%0A

3 個解決方案

解決方案1
 1 已采納  2016-08-04 14:10:01

您的控制器定義（依賴項注入部件）錯誤。 您可以按照約翰·帕帕（John papa）的風格指南進行調整 

var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {

    $routeProvider.when('/',{
        templateUrl: 'tpl/users.html',
        controller: 'myController'
    }).when('/addusers',  {
        templateUrl: 'tpl/addusers.html',
        controller: 'addusers'
    }).when('/admin',{
        templateUrl: 'tpl/admin.html',
        controller: 'admin'
    });
}]);

app.controller('myController', ['$scope', function ($scope) {
    $scope.message = 'Home';
}]);

app.controller('admin', ['$scope', function ($scope) {
    $scope.message = 'Admin';
}]);

app.controller('addusers', ['$scope', function ($scope) {
    $scope.message = 'addusers';
}]);

解決方案2
 0  2016-08-04 13:54:15

我也在用角度工作SPA，最近又遇到了相同的錯誤，

這是我在使用ngRoute時發現發生的事情。 ngRoute可以工作，但對我來說似乎很混亂，並不斷給我這個錯誤和其他一些錯誤。

我可能只是在用錯它，但我建議您切換到“ UI-Router ”

它應該清理您進行路由的方式，並使其更容易處理整個項目中的對象。

解決方案3
 0  2016-08-04 14:19:39

您使用的配置錯誤。 您不需要使用“ $ routeProvider”作為參數。

不正確的 

app.config('$routeProvider', function ($routeProvider) {
});

正確 

app.config(function ($routeProvider) {
});

此外，Angular不再使用ngRoute。 這是您需要包含的單獨文件（請注意版本）：

https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.js

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 CSRF AngularJS SPA和WEB API Web API和AngularJS SPA應用程序的身份驗證 在打字稿中使用Web Api和AngularJS的SPA示例 使用Web Api配置AngularJS SPA模板的問題 使用AngularJs（SPA）網絡界面的DDD項目......這是一個好主意嗎？ AngularJS SPA與ASP.NET Web API后端 AngularJS Web API無法使用字符串 AngularJs和Web API PUT不起作用 使用API​​和Mongoose的AngularJS SPA API安全結合AngularJs SPA
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM