$ location.path不使用Angularjsbutton点击加载html文件
我有一个html my.html，其中包含一个button，在其上单击我要发送用户about.html，现在我面临的问题是在button单击我将进入控制器内，但是当我调用方法
$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 。
$ route服务通常与ngView指令和$ routeParams服务一起使用。
https://docs.angularjs.org/api/ngRoute/service/$route
所有的视图都会渲染到这个节点，所以你应该把login视图移动到一个不同的.html文件（在我的例子中是home.html ）。
工作示例： https : //plnkr.co/edit/TvPU7f6YFEnFIom5JQRu?p=preview
浏览器URL更改时， $ location不会导致整个页面重新加载。 要在更改URL后重新加载页面，请使用较低级别的API $ window.location.href。
$window.location.href = '/views/Dummy.html';
没有任何反应，只有我目前的网页出现，但我的about.html不加载。
嗨！ 我是新来的！ 但也许我可以帮你:)
请小心， $location.path不会重新加载您的页面，如果目标path与您当前的path相同。 我build议你使用$ route作为$route.reload()来重新载入一个具有相同path的页面。