AngularJS SPA 在 Web Api 项目中不起作用答案

【问题标题】：AngularJS SPA is not working in Web Api projectAngularJS SPA 在 Web Api 项目中不起作用
【发布时间】：2016-12-10 16:26:40
【问题描述】：

我创建了一个 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

【问题讨论】：

标签： angularjs asp.net-web-api2 single-page-application angularjs-routing

【解决方案1】：

您的控制器定义（依赖注入部分）是错误的。可以关注john papa's style guide for angular

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';
}]);

【讨论】：

@scokmen，我的错，我无意中否决了这个:(当我允许的时候，我会投赞成票。对不起。
@scokmen，看来您必须先进行编辑，然后我才能投票。再次道歉。

【解决方案2】：

您使用的配置错误。您不需要使用 '$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

【讨论】：

【解决方案3】：

我也在做一个角度的 SPA，最近也遇到了同样的错误，

这是我在使用 ngRoute 时发现的。 ngRoute 有效，但对我来说似乎很混乱，并不断给我这个错误和其他一些错误。

我可能只是用错了，但我建议你切换到“UI-Router”

它应该清理您执行路由的方式，并使其更容易在整个项目中处理对象。

【讨论】：

感谢 Richard Sussan，我将来会使用它，但我的代码有什么问题。我已经将它与许多示例相匹配，但没有出错并得到相同的错误
因此通过该链接错误显示“参数'fn'不是函数，得到字符串”。我找到了this，它解决了这个问题。这可能是您在问题中没有给出的其他代码中的错误。