angularjs - 角度コントローラが見つかりません

Question

問題定義

AngularJS の ngRoute モジュールを初めて使用していますが、問題が発生しています。ng-app を設定して routingModule を参照する index.cshtml ページがあります。「新しいアカウント」をクリックするとng-viewにregister.cshtmlがロードされるか、「サインイン」をクリックするとauthenticate.cshtmlがng-viewにロードされるように、ng-viewもあります。

インデックスページのリンクをクリックすると、登録ページと認証ページが ng-view にロードされるのを確認できるため、ルーティングは期待どおりに機能しています。しかし、routingModule.js の登録ページと認証ページ用に設定したコントローラーが存在しないようです。

インデックスページで [新しいアカウント] をクリックすると、このエラーが発生します。インデックスページで [サインイン] をクリックすると、同じエラーが表示されます。

問題を解決するために必要な以下のすべての javascript ファイルと html ファイルを追加しました。どんな助けでも大歓迎です。

ウェブルートの構造

ウェブルート構造

routingModule.js

var routingModule = angular.module("routingModule", ['ngRoute'])
    .config(function ($routeProvider) {
        $routeProvider.when('/account/register', { templateUrl: '/account/register/', controller: 'RegisterController' });
        $routeProvider.when('/account/authenticate', { templateUrl: '/account/authenticate/', controller: 'AuthenticateController' });
})

index.cshtml

<!DOCTYPE html>
<html ng-app="routingModule">
<head>
    <base href="/" />

    <script src="~/Scripts/JQuery/jquery-2.1.3.js"></script>

    <script src="~/Scripts/Angular/angular.min.js"></script>
    <script src="~/Scripts/Angular/angular-route.min.js"></script>
    <script src="~/Scripts/Angular/angular-resource.min.js"></script>

    <link href="/Content/bootstrap.min.css" rel="stylesheet" />
    <link href="/Content/boostrap-hero.min.css" rel="stylesheet" />
    <script src="~/Scripts/Bootstrap/bootstrap.min.js"></script>

    <script src="/Scripts/app/Registration/registerModule.js"></script>
    <script src="/Scripts/App/Registration/registerService.js"></script>
    <script src="/Scripts/App/Registration/registerController.js"></script>
    <script src="/Scripts/App/Registration/validatePasswordDirective.js"></script>

    <script src="~/Scripts/App/Authentication/authenticateModule.js"></script>
    <script src="~/Scripts/App/Authentication/authenticateController.js"></script>
    <script src="~/Scripts/App/Authentication/authenticateService.js"></script>

    <script src="~/Scripts/App/Routing/routingModule.js"></script>

    <meta name="viewport" content="width=device-width" />
    <title>AngularJS + ASP.NET MVC</title>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="navbar navbar-default">
                <div class="navbar-header">
                    <ul class="nav navbar-nav">
                        <li><span class="navbar-brand">AngularJS + ASP.NET Playground</span></li>
                    </ul>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li> <a href="/#/home/index">Home</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li> <a href="/#/account/authenticate">Sign In</a></li>
                        <li> <a href="/#/account/register">New Account</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <div ng-view></div>

    </div>

</body>

</html>

register.cshtml

<form name="registerForm" novalidate>
    <div class="row">
        <div class="col-md-10">
            <h2>Create Account</h2>
        </div>

        <div class="col-md-3">

            <div class="form-group">
                <label>Username</label>
                <input type="text" name="userName" ng-model="user.userName" class="form-control" required />
                <div class="text-danger" ng-show="registerForm.userName.$error.required && registerForm.userName.$dirty">Please enter your first name</div>
            </div>

            <div class="form-group">
                <label>Email</label>
                <input type="text" name="email" ng-model="user.email" class="form-control" required ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*&#64[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" />
                <div class="text-danger" ng-show="registerForm.email.$error.required && registerForm.email.$dirty">Please enter a your email address</div>
                <div class="text-danger" ng-show="registerForm.email.$error.pattern && registerForm.email.$dirty">Invalid email address</div>
            </div>

            <div class="form-group">
                <label>Password</label>
                <input type="password" name="password" ng-model="user.password" class="form-control" required />
                <div class="text-danger" ng-show="registerForm.password.$error.required && registerForm.password.$dirty">Please enter a password</div>
            </div>

            <div class="form-group">
                <label>Confirm Password</label>
                <input type="password" name="passwordConfirm" ng-model="user.passwordConfirm" class="form-control" required compare-to="user.password" />
                <div class="text-danger" ng-show="registerForm.passwordConfirm.$error.required && registerForm.passwordConfirm.$dirty">Please repeat your password</div>
            </div>

            <div class="form-group">
                <button class="btn btn-default" ng-disabled="registerForm.$invalid" ng-click="register(user)">Create Account</button>
                <div style="color: red;" ng-show="errors.length > 0" ng-repeat="error in errors">{{error}}</div>
            </div>

        </div>
    </div>
</form>

認証.cshtml

<form name="loginForm" novalidate>

    <div class="row">
        <div class="col-md-10">
            <h2>Sign In</h2>
        </div>

        <div class="col-md-3">

            <div class="form-group">
                <label>Email</label>
                <input type="text" name="email" ng-model="user.email" class="form-control" required ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*&#64[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" />
                <div class="text-danger" ng-show="loginForm.email.$error.required && loginForm.email.$dirty">Please enter a your email address</div>
                <div class="text-danger" ng-show="loginForm.email.$error.pattern && loginForm.email.$dirty">Invalid email address</div>
            </div>

            <div class="form-group">
                <label>Password</label>
                <input type="password" name="password" ng-model="user.password" class="form-control" required />
                <div class="text-danger" ng-show="loginForm.password.$error.required && loginForm.password.$dirty">Please enter a password</div>
            </div>

            <div class="form-group">
                <button class="btn btn-default" ng-disabled="loginForm.$invalid" ng-click="authenticate(user)">Sign In</button>
                <div style="color: red;" ng-show="errors.length > 0" ng-repeat="error in errors">{{error}}</div>
            </div>

        </div>
    </div>
</form>

registerModule.js

var registerModule = angular.module("registerModule", ["ngResource"]);

registerController.js

registerModule.controller("RegisterController", function ($scope, $location, registerService) {
    $scope.register = function (user) {
        $scope.errors = [];
        registerService.register(user).$promise.then(
            function () { $location.url('/home/index');},
            function (response){$scope.errors = response.data});
    };

});

registerService.js

registerModule.factory('registerService', function ($resource) {

    return {
        register: function(user) {
            return $resource('/api/account/register/').save(user);
        }
}
    
});

angularjs - 角度コントローラが見つかりません

1 に答える 1

Related

Reference