gpt4 book ai didi

javascript - $location.path 使用 Angularjs 单击按钮时未加载 html 文件

转载 作者:太空宇宙 更新时间:2023-11-04 00:30:54 24 4
gpt4 key购买 nike

我有一个 html my.html,其中包含一个按钮,单击该按钮我想将用户发送到 about.html,现在我面临的问题是单击按钮时我将进入 Controller ,但是当我调用方法时

$location.path("\about")

没有任何反应,仅出现我的当前页面,但我的 about.html 未加载。

我尝试使用$window.open('/about.html', '_self');它工作得很好,但我不知道为什么 $location.path不适合我。

我也正在使用<base href="http://localhost:8080/" /> 。它会引起任何问题吗??

my.html代码

<!DOCTYPE html>
<html>
<head>
<base href="http://localhost:8080/" />
<title></title>
</head>

<body ng-app="myApp">
<script type="text/javascript" src="js/angular.js"></script>

<script type="text/javascript" src="js/angular-route.js"></script>

<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-

cookies.min.js"></script> -->
<script src="js/controller.js"></script>
<div class="container">
<div ng-controller="loginCtrl">
<form id="myLogin">
<div class="row" style="margin-top: 100px;text-align: center;">
<div class="col-sm-12" align="center">
<h2>Log In</h2>
<table >
<tr>
<td>User Name:</td><td><input type="text" name="username" placeholder="Enter user name"

id="username" ng-model="username"></td>
</tr><tr><td></td></tr><tr><td></td></tr>
<tr>
<td> Password:</td><br><td> <input type="password" name="password" placeholder="Enter

Password" id="password" ng-model="password"></td>
</tr>
<tr><td><button type="button" ng-click="submit()">Log In</button></td></tr>
</table>

</div>
</div>
</form>
</div>
</div>
</body>
</html>

controller.js

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

app.config(function($locationProvider, $routeProvider) {
console.log("hello");
$locationProvider.html5Mode(true);
$routeProvider
.when('/about',{
templateUrl: 'about.html'
})
.otherwise({
templateUrl: 'about.html'

});
});


app.controller('loginCtrl', function($scope, $location){
console.log("hello1")
$scope.submit=function(){
var uname=$scope.username;
var pwd=$scope.password;
console.log("inside controller");

$location.path('/about');
};
});

你们中的任何人都可以告诉我如何在 AngularJS 中做到这一点吗?

about.js

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<p>yes</p>
</body>
</html>

app.js

var express = require('express');
var bodyParser = require('body-parser');
var http = require('http');
var https = require('https');
var fs = require('fs');
var app = express();


app.use(express.static(__dirname + '/public'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: true
}))

app.get('/', function(req, res) {
console.log("Global");
res.sendFile(__dirname + '/public/my.html');
});
var util = require('util');
var port = process.env.PORT || 8080;
http.createServer(app).listen(8080);

我的目录结构定义如下,我正在使用app.js运行nodejs服务器

project/
my.html
about.html
app.js
js/
controller.js
angular.js
angular-route.js

最佳答案

您需要添加ng-view

The $route service is typically used in conjunction with the ngView directive and the $routeParams service.

https://docs.angularjs.org/api/ngRoute/service/$route

所有 View 都将呈现到此 Node 中,因此您应该将登录 View 移动到不同的 .html 文件中(在我的示例中为 home.html)。

工作示例:https://plnkr.co/edit/TvPU7f6YFEnFIom5JQRu?p=preview

关于javascript - $location.path 使用 Angularjs 单击按钮时未加载 html 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40971564/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com