Question

我刚开始学习AngularJS，我正在尝试使用Bootstrap和AngularJS创建一个页面。

问题： 我无法在 register.html 中看到 login.html 和 index.html 页面的内容是主页。

代码：

的index.html

<!doctype html>
<html ng-app="myApp">
<head>
    <link rel="stylesheet" href="bower_components/bootstrap-theme/bootstrap.css">
    <link rel="stylesheet" href="bower_components/bootstrap-theme/bootstrap.min.css">
    <script type="text/javascript" src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.min.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>

</head>
<body>

    <script type="text/ng-template" id="index.html">
        <h1>Home</h1>
        <h3>{{message}}</h3>
    </script>
    <script type="text/ng-template" id="pages/register.html">
        <h1>Register</h1>

    </script>
    <script type="text/ng-template" id="pages/login.html">
        <h1>Login</h1>
    </script>

    <!-- Navbar -->

        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>

                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#/">Home <span class="sr-only">(current)</span></a></li>
                        <li><a href="#/register">Register</a></li>
                        <li><a href="#/login">Login</a></li>
                    </ul>
                </div>
            </div>
        </nav>



    <!-- END Navbar -->

    <div class="container">
        <div ng-view></div>
    </div>

    <script type="text/javascript" src="app.js"></script>

</body>
</html>

register.html

<div class="col-lg-6 col-md-6 col-xs-12" id="reg-form">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-xs-12">
            <h3>Registration form</h3>
            <hr>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12 col-md-12 col-xs-12">
            <form>
                <div class="form-group">
                    <label for="email">Email</label>
                    <input type="email" class="form-control" id="email" placeholder="Email">
                </div>

                <div class="form-group">
                    <label for="fName">First name</label>
                    <input type="text" class="form-control" id="fName" placeholder="First name">
                </div>

                <div class="form-group">
                    <label for="lName">Last name</label>
                    <input type="text" class="form-control" id="lName" placeholder="Last name">
                </div>

                <div class="form-group">
                    <label for="password">Password</label>
                    <input type="password" class="form-control" id="password" placeholder="Password">
                </div>

                <div class="form-group">
                    <label for="confPassword">Confirm password</label>
                    <input type="password" class="form-control" id="confPassword" placeholder="Confirm password">
                </div>

                <button type="submit" class="btn btn-primary">Register</button>

            </form>
        </div>
    </div>
</div>

app.js

var app = angular.module('myApp', ['ngRoute']);

app.config(function($routeProvider) {
    $routeProvider

        .when('/', {
            templateUrl : 'index.html',
            controller  : 'HomeController'
        })

        .when('/register', {
            templateUrl : 'pages/register.html',
            controller  : 'RegisterController'
        })

        .when('/login', {
            templateUrl : 'pages/login.html',
            controller  : 'LoginController'
        })

        .otherwise({redirectTo: '/'});
});

app.controller('HomeController', function($scope) {
    $scope.message = 'Hello from HomeController';
});

app.controller('RegisterController', function($scope) {
    $scope.message = 'Hello from RegisterController';
});

app.controller('LoginController', function($scope) {
    $scope.message = 'Hello from LoginController';
});

文件register.html和login.html位于名为pages的文件夹中。 index.html和app.js文件位于文件夹页面之外。

Answer 1

您忘记“导入”routeProvider功能：

app.config(['$routeProvider', //<-- include '$routeProvider', (followed by a comma ) and then your function
    function($routeProvider) {
        $routeProvider.
        when(...
        }).
        otherwise({...
        });
    }]);

查看未显示 - AngularJS

1 个答案: