Angular 路由在我的 Web 应用程序中不起作用答案

【问题标题】：Angular route is not working in my web applicationAngular 路由在我的 Web 应用程序中不起作用
【发布时间】：2017-07-04 07:18:23
【问题描述】：

Angular 路由器在我的应用程序中不起作用。我有一个登录表单、Angular 控制器和欢迎页面。当我传递登录详细信息并单击提交按钮时，Angular 不会路由到 welcome.html 页面。下面是代码sn-p。

登录表单(AngularForm.html)

 <html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.js"></script>
    <script src="LoginCtrl.js"></script>
</head>

<body ng-app="myAngular">
    <div ng-controller="LoginController">
        <form action="/" id="myForm">
            UserName:
            <input type="text" id="username" ng-model="username">
            <br> Password:
            <input type="password" id="passowrd" ng-model="password">
            <br>
            <button type="button" ng-click="submit()">Login</button>
        </form>
    </div>
</body>

</html>

登录控制器(LoginCtrl.js)

        var App = angular.module('myAngular', ['ngRoute']);
    App.config(function($routeProvider){
        $routeProvider.when('/',{
            templateUrl: 'AngularForm.html'
        })
        .when('/welcome',{
              templateUrl: 'welcome.html'
              })
        .otherwise({
            redirectTo: '/'
        });
    });

    function UserLogin($scope,$location)
    {
        $scope.submit = function(){
           var uname=$scope.username
           var pwd=$scope.passowrd
            if($scope.username == 'admin' && $scope.password == 'admin')
               { $location.path('/welcome'); }

        }

    }

App.controller('LoginController',UserLogin);

欢迎页面(welcome.html)

<!DOCTYPE html>
<html>

<head></head>

<body>
    <h1>Login Successful!!</h1>
</body>

</html>

【问题讨论】：

我在您的主 html 文件中没有看到 ng-view。

标签： angularjs

【解决方案1】：

我认为您需要将登录内容与主AngularForm.html文件分开

AngularForm.html

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.js"></script>
        <script src="LoginCtrl.js"></script>  
        </head>
        <body ng-app="myAngular">  
            <div ng-view></div>     
        </body>
</html>

确保添加<div ng-view></div>，以便部分路由位于此之上。

像这样制作登录 HTML

<div ng-controller="LoginController">
<form action="/" id="myForm">
    UserName:<input type="text" id="username" ng-model="username"><br>
    Password:<input type="password" id="passowrd" ng-model="password"><br>
    <button type="button" ng-click="submit()">Login</button>
</form>  
</div>

在配置中添加一个名为 login 的新状态

var App = angular.module('myAngular', ['ngRoute']);
App.config(function($routeProvider){
    $routeProvider
    .when('/',{
        templateUrl: 'AngularForm.html'
    })
    .when('/login',{
        templateUrl: 'login.html'
    })
    .when('/welcome',{
          templateUrl: 'welcome.html'
          })
    .otherwise({
        redirectTo: '/login'
    });
});

function UserLogin($scope,$location)
{
    $scope.submit = function(){
       var uname=$scope.username
       var pwd=$scope.passowrd
        if($scope.username == 'admin' && $scope.password == 'admin')
           { $location.path('/welcome'); }

    }

}

App.controller('LoginController',UserLogin)

【讨论】：