Question

我正在使用angular js在登录应用程序上进行POC。点击按钮我需要导航到另一个页面。我写的代码只是更新url但视图没有加载。我也使用过ng-view或ui- view。我使用了$ location.path。但仍然无法导航到其他页面

这是我的代码

的index.html：

<html ng-app='myApp'>
<head>
    <title>Jasmine</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/angular-route.min.js"></script>
    <script src="routing.js" type="text/javascript"></script>
</head>

<body>
    <div id='content' ng-controller='LoginController'>
        <div class="container">
            <form class="form-signin" role="form" name="myForm" ng-submit="login()">
                <h3 class="form-signin-heading">Login Form</h3>
                <span>
                    <b>Username :</b>&nbsp; <input type="text" class="form-control" ng-model="user.name" required>
                </span> <br />
                <br /> <span>
                    <b>Password :</b>&nbsp;&nbsp; <input type="password"
                                                         class="form-control" ng-model="user.password" required>
                </span>
                <br><br>
                <button class="btn btn-lg btn-primary btn-block" type="submit" ng-disabled="myForm.$invalid">
                    <b>Sign in</b>
                </button>
            </form>

        </div>

        {{message}}
    </div>
    <div ui-view></div>

</body>

</html>

这里我使用了ui-view ..当我使用它时，url正在更新但不是视图.. 当我使用ng-view时，脚本块在chrome和firefox中都会发生。

routing.js：

var applog = angular.module('myApp', ['ngRoute']);
applog.controller("LoginController", function ($scope, $location, $window) {
    $scope.message = "hi";
    $scope.login = function () {
        var username = $scope.user.name;
        var password = $scope.user.password;
        $location.path('/home');
    };
});

applog.controller("HomeController", function ($scope, $location) {
    $scope.msg = "qwerty";
});

applog.config(function ($routeProvider) {
    $routeProvider
    .when('/', {
        templateUrl: 'index.html',
        controller: 'LoginController'
    }).when('/home', {
        templateUrl: '/home.html',
        controller: 'HomeController'
    }).otherwise({
        redirectTo: 'index.html'
    });
});

在这里，我尝试使用哈希..不工作

Home.html中：

<div ng-controller="HomeController">
  Welcome....
</div>

Url正在更新，但在角度js中按钮单击时不会进行导航

0 个答案: