从控制器导航到 Angular js 中的其他页面答案

【问题标题】：Navigate to other page in angular js from controller从控制器导航到 Angular js 中的其他页面
【发布时间】：2017-01-17 17:39:48
【问题描述】：

我是 Angular js 的新手。我开发了一个登录应用程序。我创建了一个登录表单，其中有登录按钮。点击登录按钮我想导航到 home.html 页面我使用了 $location.path('/home') 但它被附加到现有的 url 但没有被显示。有人能帮我吗有了这个

Index.js：在此我使用 routeconfig 定义了路由。

     var myapp = angular                 
           .module("mainModule", ['ngRoute'])
                .config(function ($routeProvider, $locationProvider) {
                    $routeProvider

                        .when("/login", {
                        templateUrl: "Templates/login.html",
                        controller: "LoginController",
                        controllerAs: "loginctrl",
                        caseInsensitiveMatch: true
                        })

                      .when("/Home", {
                          templateUrl: "Templates/Home.html",
                          controller: "HomeController",
                          controllerAs: "Homectrl",
                          caseInsensitiveMatch: true
                      })
                })
                .controller("LoginController", function ($scope, $location) {
                    $scope.username = "";
                    $scope.password = "";
                    $scope.Login = function () {
                        if ($scope.username == "a" || $scope.password == "a") {
                            alert("SuccessFully Logged in")
                             $location.path("/Home");

                        }
                        //alert('Hello'+$scope.username+""+$scope.password);
                    }
                    })
            .controller("HomeController", function ($scope) {


            })

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="mainModule">
<head>
    <title></title>
    <script src="../Scripts/angular.js"></script>
    <script src="../Scripts/angular-route.js"></script>
    <script src="../index.js"></script>

</head>
<body>
    <div ng-controller="LoginController">
        <table>
            <tbody>
                <tr>
                    <th>UserName:</th>
                    <th><input type="text" value="" ng-model="username" /></th>
                </tr>
                <tr>
                    <th>Password:</th>
                    <th><input type="password" value="" ng-model="password" /></th>
                </tr>
                <tr>
                    <th><button name="Submit" ng-click="Login()"> Submit</button>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

主页.Html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml ng-app=" mainmodule">
<head>
    <title></title>
    <script src="../Scripts/angular.js"></script>
    <script src="../Scripts/angular-route.js"></script>
    <script src="../index.js"></script>
</head>
<body ng-controller="HomeController">
    hi
</body>
</html>

网址生成为：http://localhost:40613/Templates/Login.html#/Home 所以，Home.html 的路由是如上生成的，而不是http://localhost:40613/Templates/Home.html 请帮我解决这个问题

【问题讨论】：

标签： angularjs routing

【解决方案1】：

一些问题：

包括otherwise 用于配置路由
部分不应包含<!doctype html> 定义
包括<div ng-view>
要使 URL 看起来正确，请检查 html5mode

这是工作代码：http://jsbin.com/zemofiyicu/edit?html,output

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular-route.js"></script>

    <script>

var myapp = angular                 
           .module("mainModule", ['ngRoute'])
                .config(function ($routeProvider) {
                    $routeProvider

                      .when("/login", {
                        templateUrl: "login.html",
                        controller: "LoginController"
                        })

                      .when("/home", {
                          templateUrl: "home.html",
                          controller: "HomeController"
                      })
                      .otherwise({ redirectTo: '/login' });
                })
            .controller("LoginController", function ($scope, $location) {
                    $scope.username = "";
                    $scope.password = "";
                    $scope.Login = function () {
                        if ($scope.username == "a" || $scope.password == "a") {
                            alert("SuccessFully Logged in")
                             $location.path("home");

                        }
                    }
                    })
            .controller("HomeController", function ($scope) {

                $scope.message = "It works";

            })  

    </script>
</head>
<body ng-app="mainModule">

    <a href="#/home">home</a>
    <a href="#/login">login</a>

    <div ng-view></div>

    <script type="text/ng-template" id="home.html" >
        <h1>Home</h1>
        <h2>{{ message }}</h2>
    </script>   

    <script type="text/ng-template" id="login.html" >
        <table>
            <tbody>
                <tr>
                    <th>UserName:</th>
                    <th><input type="text" value="" ng-model="username" /></th>
                </tr>
                <tr>
                    <th>Password:</th>
                    <th><input type="password" value="" ng-model="password" /></th>
                </tr>
                <tr>
                    <th><button name="Submit" ng-click="Login()"> Submit</button>
                </tr>
            </tbody>
        </table>

    </script>
</body>
</html>

【讨论】：

嗨，Micahal 感谢您的回答..真的帮助了我。我怀疑我是否不想在索引页面中使用
并且就像您为 home.html 放置了两个链接一样和 login.html 我可以单独使用 login.html(startup) 页面并为该控制器定义操作。然后当我调用提交时，它应该转到 home.html。我如何从一个页面导航到另一个页面。
@swapnil - StackOverflow 上的良好实践 - 如果答案对您有帮助，请标记为已接受！ stackoverflow.com/help/someone-answers