Angular.js template won't show on angular-route url

本文关键字：show on angular-route url js template won Angular 更新时间：2023-09-26

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

我想我设置的一切都是正确的，但是html表单不会加载我在配置中设置的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>

在过去的几天里，我一直在看代码，我不知道我做错了什么。

请帮助。

谢谢。

您的代码中有错误。

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'。