Question

我正在尝试学习angular.js，我想通过带有模板的angular-route加载表单html。

我认为我正确设置了所有内容，但html表单不会加载我在config上设置的url。我设置用于测试的其他配置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";
        };
    }]);

register.html

<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])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{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>

过去几天我一直在看代码，我无法弄清楚我做错了什么。

请帮忙。

谢谢。

Answer 1

您的代码中有错误。

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时，它告诉angular它希望为之前定义的名为'EventPlanner'的模块创建'registerController'。希望这是有道理的。

Angular.js模板不会显示在angular-route网址

1 个答案: