0

に動作していませんAngularJS SPAは、私は、Web APIプロジェクトを作成し、その後、私は、単一ページのアプリケーションを作成しようが、私は以下の私のコードを掲載していますので、いくつかのエラーを取得していたWeb APIプロジェクトで

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 

答えて

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

ありがとうございました –

+0

@scokmen、私の悪い、私は不注意にこれを投票しました:(私はあなたが私を許可するときにそれを投票するでしょう)申し訳ありませんbout that。 – Rob

+0

@scokmen、それはあなたが – Rob

0

私はこれは私がngRouteを使用していた場合に発生することが判明何かであるだけでなく、角度でSPAに取り組んでおり、ごく最近、同じエラーを得た、

ています。 ngRouteは動作しますが、それは私にとって非常に乱雑で、このエラーや他のものを私に与え続けました。

私はおそらくちょうどそれが間違って使用していたが、私はあなたがそれはあなたがルーティングを行う方法をクリーンアップし、それが簡単にあなたのプロジェクト全体のオブジェクトを処理するために行う必要があります「UI-Router

に切り替えをお勧めします。

+0

おかげリチャードSussanが、私は将来的にそれを使用しますが、どのような私のコードで間違っている:それは別のあなたが(バージョンに注意してください)を含むように必要なファイルです。私は多くの例とそれにマッチしましたが、何も間違っていて同じエラーが出ることはありません –

+0

そのリンクを通して、 "引数 'fn'は関数ではなく、文字列を持っています。この問題を解決する[this](http://stackoverflow.com/questions/19095129/argument-fn-is-not-a-function-got-string)が見つかりました。これはおそらくあなたの質問に与えていないコードのいくつかの他の部分のエラーです。 –

0

に従うことができます。 $ routeProviderをパラメータとして使う必要はありません。

誤った

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

正しい

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

また、角度はもはや、箱から出してngRouteを使用していません。

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

関連する問題