虽然它的网址正在改变,但是新页面(home.html)没有使用ngRoute加载到angularjs中

时间:2017-01-19 13:07:24

标签: angularjs ngroute

<!DOCTYPE html>
<html>
<head>
<title>AngularJs $http.post() Service Response Example</title>
<script
    src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
    <script src='home.html'><</script>
<script type="text/javascript">
    var app = angular.module('postserviceApp', [ 'ngRoute' ]);


    app.config(function($routeProvider) {
        $routeProvider

        .when('/', {
            url : '/login',
            templateUrl : "login.html",
        //controller : 'postserviceCtrl'
        }).when('/home', {
            url : '/home',
            templateUrl : "home.html",
            //controller : 'postserviceCtrl'
        })
        .when('/invalid', {
            url : '/invalid',
            templateUrl : 'login.html',
            //controller : 'postserviceCtrl'
        })
    });
    app.config(function($routeProvider) {
        $routeProvider

        .when('/', {
            url : '/login',
            templateUrl : 'login.html',
        //controller : 'postserviceCtrl'
        }).when('/home', {
            url : '/home',
            templateUrl : 'home.html',
            //controller : 'postserviceCtrl'
        })
    });

    /*app.run(function($state, LoginService) 
            {
        if(!LoginService.isAuthenticated()) 
        {
          $state.transitionTo('login');
        }
    });*/

    app.controller('postserviceCtrl', function($scope, $http, $location) {
        $scope.name = null;
        $scope.password = null;
        $scope.lblMsg = null;
        $scope.postdata = function(username, password) {
            var data = {
                username : username,
                password : password
            };

            $http.post('/connect', JSON.stringify(data)).then(
                    function(response) {
                        if (response.data) {
                            $scope.msg = "Post Data Submitted Successfully!";
                            //window.location.hash = '#/home';
                            $location.path('/home')

                            $scope.name = null;
                            $scope.password = null;
                            $scope.lblMsg = null;
                            $scope.msg = "Welcome Mr."+$scope.username;
                        } else {
                            $scope.msg = "Invalid User";
                            window.location.hash = '#/invalid';
                        }
                    }, function(response) {
                        $scope.msg = "Unsuccessful";
                        $scope.statusval = response.status;
                        $scope.statustext = response.statusText;
                        $scope.headers = response.headers();
                    });
        };
    });
</script>
</head>
<body>
    <form action="/">
        <div ng-view></div>
        <div ng-app="postserviceApp" ng-controller="postserviceCtrl">
            <div>
                Name : <input type="text" ng-model="username" /><br>
                <br> Password : <input type="password" ng-model="password" /><br>
                <br> <input type="button" value="Send"
                    ng-click="postdata(username, password)" /> <br>
                <br>
            </div>
            <p>111222output Message : {{msg}}</p>
            <p>StatusCode: {{statusval}}</p>
            <p>Status: {{statustext}}</p>
            <p>Response Headers: {{headers}}</p>
        </div>
    </form>

</body>
</html>

我想在验证完成后加载下一页,即home.html页面。为此我使用ngRoute虽然网址已更改为 http://localhost:9080/index.html#/home ,但新页面未加载。 即使我删除home.html文件,它也不会显示我找不到home.html文件的任何错误。

0 个答案:

没有答案