Angular.js模板将不会显示在角度路由url

我想学习angular.js，我想通过角度路由与模板加载窗体html。Angular.js模板将不会显示在角度路由url

我想我正确地设置了一切，但是html表单不会加载到我在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

你在浏览器上输入的网址是什么？ –

您的代码有错误。

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 [link]（http://angular-ui.github.io/ui-router/），而不是像建议的那样在约翰帕帕的优秀风格指南[链接]（https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#style-y270）。 –

非常感谢。这是一个伟大的建议！你是最棒的。 – Wookiecookie

Angular.js模板将不会显示在角度路由url

回答

相关问题