角度 js 路由提供程序中的问题

Issue in angular js routeProvider

本文关键字：问题 程序 js 路由 角度      更新时间：2023-09-26

我在角度js routeProvider中遇到了问题。如果我单击注册或登录链接，那么它不会转到下一页，只会显示这样的 URL。 http://localhost:3000/#/register或http://localhost:3000/#/login以下是我的代码。提前致谢我给了ngRoute，ngResource，用于初始化myapp的服务，但没有好处

脚本.js

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

    $routeProvider.when('/login', {
        templateUrl : '/template/login.html',
        controller : loginController
    }).when('/register', {
        templateUrl : '/template/register.html',
        controller : registerController
    }).otherwise({
        redirectTo : '/'
    });
}] );

登录.js

function loginController($scope){
}

注册.js

function registerController($scope) {
    $scope.submit = function() {
        if (!($scope.cnfrmPasswd == $scope.passwd)) {
        } else {
            $.get("/register/"+$scope.name+"/"+$scope.username+"/"+$scope.passwd, function(data) {
            });
        }
    };
}

索引.html

<html ng-app="myapp">
<head >
<script src="js/angular/angular-1.0.5/angular.min.js"></script>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/script.js"></script>
<script src="js/login.js"></script>
<script src="js/register.js"></script>
</head>
<body>
<a href="#/register">register</a>
<a href="#/login">login</a>
</body>
</html>

我尝试添加<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script> <script src="js/angular-resource.js"></script>

您需要

在索引中添加ngView.html：

<body>
  <a href="#/register">register</a>
  <a href="#/login">login</a>
  <ng-view></ng-view>
</body>

使用 app.controller('LoginCtrl', ...) 定义控制器，并使用字符串名称引用它们： 

$routeProvider.when('/login', {
  templateUrl : '/template/login.html',
  controller : 'LoginCtrl'
})

你必须在你的身体标签中添加ng-view，你需要在你的模块中定义'ngRoute'。

索引的正文标签.html

<body>
<a href="#/register">register</a>
<a href="#/login">login</a>
<div data-ng-view="" id="ng-view"></div>
</body>

添加"ngRoute"后的 myapp 变量

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

让我们看看它会正常工作。

相关文章：