Question

所以我尝试了角度，真的很喜欢它。我需要为我正在构建的应用创建一个登录页面，但我很难理解$location功能的工作原理。

问题

我使用路线，这很容易组合在一起，对于每个链接，我都使用了标签设置，例如。 <a href='#home'>Home</a>然后，我将根据路由中分配的控制器将我带到home.html视图。但是，当我尝试以ex <form action='#home'>...形式设置动作时，它会失败，所以现在我感到困惑。

这就是我失败的意思。使用我当前的设置，我可以点击登录视图上的提交（只是为了测试功能，我没有使用用户名或密码），它将转换到home.html视图，但不会显示来自家庭控制器的任何数据。它甚至无法识别主模板上的ng-view指令。

我希望有人或至少有几个人可以帮助我理解这个问题，我希望能够提供最好的结构。如果您有任何帮助，请提前感谢您，如果您对我在下面列出的任何其他内容有任何疑问，请与我们联系。

主要模板

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Security-Policy" content="default-src *; img-src 'self' data:; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' *">
    <meta charset='utf-8' />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <link rel="stylesheet" type='text/css' href='css/combined.css' />
    <script src='js/angular.min.js'></script>
    <script src='js/angular-route.min.js'></script>
    <script src='js/angular-animate.min.js'></script>
    <script src='js/angular-fake-browser.js'></script>
    <script src='js/crewpoint.js'></script>
</head>
<body ng-app='crewpoint'>
    <nav class='navbar navbar-default nevbar-fixed-top'>
        <div class='navbar-brand navbar-brand-center'>CrewPoint</div>
    </nav>

    <section class='page {{ pageClass }}' ng-view>

    </section>

    <nav class='navbar navbar-default navbar-fixed-bottom'></nav>
</body>
</html>

视图

的login.html

<div class='row'>
    <section class='col-xs-12'>
        <form id='login' ng-submit='login()'>
            <article class='form-group col-xs-12'>
                <input type='text' class='form-control' id='username' placeholder='username'/>
            </article>
            <article class='form-group col-xs-12'>
                <input type="password" class='form-control' id='password' placeholder='password'/>
            </article>
            <article class='form-group col-xs-12 col-sm-6 col-sm-offset-3'>
                <button type='submit' class='btn btn-block btn-primary'>Login</button>
            </article>
        </form>
    </section>
</div>

home.html的

<main class='container'>
    <div class='row'>
        <div class='col-xs-12'>
            <h2>Projects</h2>
        </div>
    </div>
    <div class='row'>
        <div class='col-xs-12 no-padding'>
            <ul class='list-group'>
                <li class='list-group-item' ng-repeat="project in projectList track by $index">
                    <div class='row'>
                        <div class='col-xs-6'>
                            <p><strong>{{project.customer}}</strong></p>
                            <p><em>{{project.product}}</em></p>
                            <address>
                                {{project.address.line1}}<br>
                                {{project.address.city}}, {{project.address.state}} {{project.address.zip}}
                            </address>
                        </div>
                        <div class='col-xs-6'>
                            <p>$ {{project.amount}}</p>
                            <p><a href='#projects'>View Project</a></p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</main>

控制器

var crewpoint = angular.module('crewpoint', ['ngRoute', 'ngAnimate']);

crewpoint.config(function($routeProvider){
    $routeProvider
    .when('/', {
        templateUrl : 'login.html',
        controller: 'Login'
    })
    .when('/home', {
        tempalteUrl : 'home.html',
        controller : 'Home'
    });
});

crewpoint.controller('Login', function($scope){
    $scope.pageClass = 'login';
    $scope.login = function(){
        $location.url('/home');
    };
});

crewpoint.controller('Home', function($scope){
    $scope.pageClass = 'home-page';
    $scope.projectList = [
        {
            customer : 'Bob Marley',
            address : {
                line1 : '123 Main St',
                city : 'Omaha',
                state : 'NE',
                zip : '68137'
            },
            product : 'SmartJack',
            amount : '12,345.67'
        },
        {
            customer : 'Jimmy Matteo',
            address : {
                line1 : '456 Main St',
                city : 'La Vista',
                state : 'NE',
                zip : '68137'
            },
            product : 'PowerBrace',
            amount : '45,678.90'
        }
    ];
});

使用Angular进行简单登录不工作

0 个答案: