使用ui-router的Angular Signup页面无法访问html页面

时间:2015-10-05 06:38:21

标签: javascript angularjs angular-ui-router

我有一个有角度的注册页面。这是我项目的目录结构:

    singUpPage-Angular
    bin
    bower_components
    model
      mongodbApp.js
    node_modules
    **partials
        fail.html
        main.html
        success.html**
    public
    images
    **javascripts
        signUp.js**
    stylesheets
    routes
      index.js
      users.js
    **views
        index.ejs**
    app.js
    package.json

我的所有html都在partials文件夹中 javascript控制器代码在signup.js中 主要的html在视图index.ejs。

我曾尝试使用ui路由器访问html,但代码无效。我不确定路径是否有错误,或者是否存在使用ui-router代码的问题。

路由器不会将我带到页面:

当我运行代码时:在地址栏上我得到:http://localhost:3000/#/partials/main.html:但是主页面中没有显示任何内容。我似乎也没有出错。

index.ejs

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <link rel='stylesheet' href='/stylesheets/style.css' />
      <script src="/angular/angular.js"></script>
      <script src="/ui-router/release/angular-ui-router.min.js"></script>
      <script src="/javascripts/signUp.js"></script>
  </head>
  <body ng-controller="myCtrl">
   <div ui-view></div>

  </body>
</html>

signUp.js

angular.module("myApp",['ui.router'])
.config(function($stateProvider, $urlRouterProvider){
    $urlRouterProvider.otherwise('partials/main.html');
    $stateProvider
        .state('success', {
            url: "/success",
            templateUrl:'partials/success.html'
        })
        .state('fail', {
            url: '/fail',
            templateUrl:'partials/fail.html'
        })

})
    .controller("myCtrl", function($scope, SignUp,$state){

        $scope.clearPerson = function(){
        $scope.first = "";
        $scope.last = "";
        $scope.email = "";
        $scope.password = "";
        $scope.confirm = "";
        $scope.dob = "";
        }



        $scope.addPerson = function(){
           /* console.log($scope.first);
            console.log($scope.last);
            console.log($scope.email);
            console.log($scope.password);
            console.log($scope.confirm);
            console.log($scope.dob);*/
            $scope.person = {
                firstName: $scope.first,
                lastName: $scope.last,
                email: $scope.email,
                password:$scope.password,
                dateOfBirth: $scope.dob
            }

            console.log($scope.person);
            SignUp.add($scope.person).success(function(res){
                $state.go("success");
                console.log(res);
            }).error(function(res){
                $state.go("fail");
                console.log("error");
            })

        }

    })
   .factory("SignUp", function($http){
        return{
               add: function(person){
                return $http.post('/signup',person);
            }
        }
    })

main.html中

    <h1>Sign up Page</h1>
<div class="new-container">
    <div class="container">
        <h3>Create an ID</h3>

        <form class="form-horizontal" name="signup" novalidate ng-submit="addPerson()">
            <div class="form-group">
                <h4>Name</h4>
                <label  class="col-sm-2 label-control align-text" >First Name</label>
                <div class="col-sm-4 text-margin" >
                    <input name="first"  ng-maxlength=50 ng-model="first" type="text" class="form-control"  required>
                    <div class="error"
                         ng-show="signup.first.$dirty && signup.first.$invalid">
                        <small class="error"
                               ng-show="signup.first.$error.required">
                            Your name is required.
                        </small>
                        <small class="error"
                               ng-show="signup.first.$error.maxlength">
                            Your name cannot be longer than 50 characters
                        </small>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label  class="col-sm-2 label-control align-text" >Last Name</label>
                <div class="col-sm-4 text-margin">
                    <input name="last"  ng-maxlength=50 ng-model="last" type="text" class="form-control"  placeholder="optional">
                    <div class="error"
                         ng-show="signup.last.$dirty && signup.last.$invalid">
                        <small class="error"
                               ng-show="signup.last.$error.maxlength">
                            Your name cannot be longer than 50 characters
                        </small>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <h4>ID and Password</h4>
                <label class="col-sm-2 align-text label-control">Username</label>
                <div class="col-sm-4 text-margin">
                    <input name="email" ng-maxlength=56 ng-model="email" type="email" class="form-control" placeholder="Email" required>
                    <div class="error"
                         ng-show="signup.email.$dirty && signup.email.$invalid">
                        <small class="error"
                               ng-show="signup.email.$error.required">
                            Your email is required.
                        </small>
                        <small class="error"
                               ng-show="signup.email.$error.maxlength">
                            Your name cannot be longer than 56 characters
                        </small>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label  class="col-sm-2 label-control align-text">Password</label>
                <div class="col-sm-4 text-margin">
                    <input name="password" ng-minlength=6 ng-model="password" type="password" class="form-control al" placeholder="Password" required>
                    <div class="error"
                         ng-show="signup.password.$dirty && signup.password.$invalid">
                        <small class="error"
                               ng-show="signup.password.$error.required">
                            Your password is required.
                        </small>
                        <small class="error"
                               ng-show="signup.password.$error.minlength">
                            Your name cannot be atleast 6 characters long.
                        </small>
                    </div>

                </div>
            </div>
            <div class="form-group">
                <label  class="col-sm-2 label-control align-text">Confirm Password</label>
                <div class="col-sm-4 text-margin">
                    <input name="confirm" compare-to="password" ng-model="confirm" type="password" class="form-control"  placeholder="Password" required>
                    <div class="error"
                         ng-show="signup.confirm.$dirty && signup.confirm.$invalid">
                        <small class="error"
                               ng-show="signup.confirm.$error.required">
                            Password confirmation is required.
                        </small>
                        <small class="error"
                               ng-show="signup.confirm.$error.errorCompareTo">
                            Your passwords do not match.
                        </small>
                    </div>

                </div>
            </div>
            <div class="form-group">
                <h4>Date of Birth</h4>
                <label  class="col-sm-2 label-control align-text">Birthday</label>
                <div class="col-sm-4 text-margin">
                    <input ng-model="dob" type="date" class="form-control"  placeholder="MM/DD/YYYY" required>
                </div>
            </div>
            <div class="form-group" >
                <div class="col-sm-offset-2 col-sm-10 float-right" >
                    <button type="submit" class="btn signUp" >Sign Up</button>
                    <button type="submit" class="btn btn-default" ng-click="clearPerson()">Clear</button>
                </div>
            </div>
        </form>
    </div>
</div>

fail.html

<h1>fail</h1>

success.html

<h1>success</h1>

1 个答案:

答案 0 :(得分:0)

Do this
 $urlRouterProvider.otherwise('/');

In State
     $stateProvider
        .state('main', {
                url: "/",
                templateUrl:'partials/main.html'
        })

这将打开您的signUpPage