Question

我正在尝试创建一个简单的angularjs应用程序来实现$ routeProvider服务。在我的index.html页面中，我提供了一个div ngView指令<div ng-view></div>，它会在login.html目录中显示/pages页面的内容。

我在angularjs网站上关注this link上的教程。但我不明白为什么它仍然不起作用。

这是我的目录结构：

/Writer (App Folder)
---/js
------app.js
------controllers.js
---/pages
------login.html
---index.html

我正在提供我的控制器和html页面的代码。如果有任何缺陷，请查看并指出。

index.html：

<html ng-app="Writer">
<head>
    <script data-require="angular.js@*" data-semver="2.0.0-alpha.45" src="bower_components/angular/angular.min.js"></script>
	<script src="bower_components/angular-route/angular-route.min.js"></script>
	<script src="https://jspm.io/system@0.16.js"></script>
	<script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
</head>
<body>
    <div ng-view></div>
</body>
</html>

app.js ：

angular.module('Writer', ['AllControllers','ngRoute'])
    .config(['$routeProvider', function($routeProvider){
        $routeProvider.when('/Diary',{
            templateUrl:'pages/login.html',
            controller: 'LoginFormController'
        })
        .otherwise({redirectTo : '/Diary'});
    }]);

controllers.js ：

var app  = angular.module('AllControllers',[]);

    app.controller('LoginFormController',['$scope',function($scope){
        $scope.whichForm = 1;
        
        $scope.setForm = function(formId){
           $scope.whichForm = formId;
        };
        
        $scope.isSetForm = function(formId){
            return $scope.whichForm===formId;
        }
    });

login.html ：

<div class="loginForms">
        <div class="login" ng-show="isSetForm(1)">
            <form>
                <table>
                    <tr>
                        <td><input type="text" name="username" placeholder="Username" ng-model="username"/></td>
                    </tr>
                     <tr>
                        <td><input type="password" name="password" placeholder="Password" ng-model="password"/></td>
                    </tr>
                     <tr>
                        <td><input type="submit" name="Login" value="Login" /></td>
                    </tr>
                    <tr><td><span>Or</span></td></tr>
                    <tr>
                        <td><input type="submit" name="Register" value="Register" ng-click="setForm(2)"/></td>
                    </tr>
                </table>
            </form>
        </div>
        
        <div class="register" ng-show="isSetForm(2)">
             <form>
                <table>
                    <tr>
                        <td><input type="text" name="username" placeholder="Username" ng-model="username"/></td>
                    </tr>
                    <tr>
                        <td><input type="text" name="email" placeholder="Email" ng-model="email"/></td>
                    </tr>
                     <tr>
                        <td><input type="password" name="password" placeholder="Password" ng-model="password"/></td>
                    </tr>
                    <tr>
                        <td><input type="password" name="confirmpass" placeholder="Confirm Password" ng-model="confirmPass"/></td>
                    </tr>
                     <tr>
                        <td><input type="submit" name="Register" value="Register" /></td>
                    </tr>
                   <tr><td><span>Or</span></td></tr>
                     <tr>
                        <td><input type="submit" name="Login" value="Already Registered?" ng-click="setForm(1)"/></td>
                    </tr>
                </table>
            </form>
        </div>
    </div>

*请注意我使用controllers.js服务$scope中定义的函数，login.html直接调用：

 <div class="login" ng-show="isSetForm(1)">

。这种方法有误吗？

很抱歉很长的帖子，但如果你能提供帮助，我将非常感激，因为我刚开始使用angularjs。

Angularjs $ routeProvider服务无法使用视图

0 个答案: