角度経路URLにAngular.jsテンプレートが表示されない

angular.jsを学習しようとしていますが、テンプレートを使って角度経路経由でフォームhtmlを読み込みたいとします。角度経路URLにAngular.jsテンプレートが表示されない

私はすべてが正しく設定されていると思いますが、設定で設定したURLにHTMLフォームがロードされません。そして、私がテスト用に設定したもう1つのconfig urlも動作しません。ここコード

index.htmlを

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="/css/style.css"> 
</head> 
<body ng-app="EventPlanner"> 
    <div ng-view></div> 
</body> 
</html> 
<script type="text/javascript" src="/bower_components/angular/angular.min.js"></script> 
<script type="text/javascript" src="/bower_components/angular-route/angular-route.min.js"></script> 

<script type="text/javascript" src="/js/angular/ng_config.js"></script> 
<script type="text/javascript" src="/js/angular/ng_controller.js"></script>

ng_config.js

angular.module("EventPlanner", ["ngRoute"]) 
.config(["$routeProvider", function($routeProvider){ 
    $routeProvider.when("/", { 
     templateUrl: "template/register.html" 
    }) 
    .when("/make_plan", { 
     template: "<h1>make plans</h1>" 
    }); 
}]);

ng_controller.js

angular.module("EventPlanner", []) 
    .controller("registerControl", [function(){ 
     var self = this; 
     self.submit = function(){ 
      location.href = "#/make_plan"; 
     }; 
    }]);

<div class="main container"> 
<div class="row" ng-controller="registerControl as regi"> 
    <form ng-submit="regi.submit()" name="regiForm" class="register col-xs-12"> 
     <label class="col-xs-12" for="name"> 
      <span class="col-xs-2">Name</span> 
      <input ng-model="regi.username" class="col-xs-5" type="text" id="name" name="name" required> 
      <span class="col-xs-5" ng-show="regiForm.name.$error.required">This feild is required</span> 
     </label> 
     <label class="col-xs-12" for="email"> 
      <span class="col-xs-2">Email</span><input ng-model="regi.email" class="col-xs-5" type="email" id="email" name="email" required> 
      <span class="col-xs-5" ng-show="regiForm.email.$error.required">This feild is required</span> 
     </label> 
     <label class="col-xs-12" for="birthday"> 
      <span class="col-xs-2">Birthday</span><input ng-model="regi.birthday" class="col-xs-5" type="date" id="birthday"> 
     </label> 
     <label class="col-xs-12" for="password"> 
      <span class="col-xs-2">Password</span> 
      <input ng-model="regi.password" class="col-xs-5" type="password" id="password" name="password" 
      ng-pattern="/^(?=.*[0-9])(?=.*[[email protected]#$%^&*])[[email protected]#$%^&*]{6,16}$/" ng-minlength="6" ng-maxlength="16" required> 

     </label> 
     <ul class="col-xs-7"> 
      <li class="col-xs-12" ng-show="regiForm.password.$error.pattern">Must contain one lower &amp; uppercase letter, and one non-alpha character (a number or a symbol.)</li> 
      <li class="col-xs-12" ng-show="regiForm.password.$error.minlength">Password Must be more than 5 characters</li> 
      <li class="col-xs-12" ng-show="regiForm.password.$error.maxlength">Password Must be less than 20 characters</li> 

      <li class="col-xs-12" ng-show="regiForm.name.$dirty && regiForm.name.$error.required">Please enter name 
      </li> 
     </ul> 
     <div class="col-xs-7 no-padding"> 
      <button type="submit" ng-disabled="regiForm.$invalid" class="btn">Submit</button> 
     </div> 

    </form> 
</div>

あります私はここ数日のために何度もコードを見てきた

、私は私が間違って何をしたかを把握することはできません。

助けてください。

ありがとうございます。

出典

2016-06-27 Wookiecookie

ブラウザに入力しているURLは何ですか？ –

コードに誤りがあります。

ng_config.js

angular.module("EventPlanner", ["ngRoute"]) // correct! 
.config(["$routeProvider", function($routeProvider){ 
    $routeProvider.when("/", { 
     templateUrl: "template/register.html" 
    }) 
    .when("/make_plan", { 
     template: "<h1>make plans</h1>" 
    }); 
}]);

上記の新しいモジュールのEventPlanner」を定義し、依存関係の配列を定義している、正しいです。

ng_controller.js

angular.module("EventPlanner", []) // incorrect!! 
    .controller("registerControl", [function(){ 
     var self = this; 
     self.submit = function(){ 
      location.href = "#/make_plan"; 
     }; 
    }]);

上記間違ってです。モジュール 'EventPlanner'をすでに作成しているので、空の配列をもう渡す必要はありません。

実際には、 'EventPlanner'モジュールを再定義して以前の宣言を上書きしています。

変更は、次のようにng_controller.js：

angular.module("EventPlanner") // fixed 
    .controller("registerControl", [function(){ 
     var self = this; 
     self.submit = function(){ 
      location.href = "#/make_plan"; 
     }; 
    }]);

を今、ng_controller.jsが解析されたとき、それはそれはEventPlanner 'と呼ばれる以前に定義されたモジュールのための「registerController」を作成したいと角度伝えます。希望は意味をなさない。

出典

2016-06-27 18:30:58

提案：角度経路を把握したら、代わりにAngularUI Router [リンク]（http://angular-ui.github.io/ui-router/）を使用することをおすすめしますJohn Papaの優れたスタイルガイド[link]（https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#style-y270） –

ありがとうございました。これはすばらしいアドバイスです。あなたは最高です。 – Wookiecookie

角度経路URLにAngular.jsテンプレートが表示されない

答えて

関連する問題