$ location.Path不用AngularJS在按钮上加载HTML文件

我有一个html my.html，其中包含一个按钮，我想将用户发送到大约。但是当我调用方法

时

$location.path("about")

什么都没有发生，只有我的当前页面出现，但是我的大约没有加载。

我尝试使用$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中做到这一点。

大约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/quloute}

所有视图都将渲染到此节点中，因此您应该将登录视图移动到其他.html文件中（我的示例中的home.html）。

工作示例：https：//plnkr.co/edit/tvpu7f6yfenfiom5jqru?p=preview

$位置在更改浏览器URL时不会导致完整页面重新加载。要在更改URL之后重新加载页面，请使用较低级别的API，$ window.location.href。

$window.location.href = '/views/Dummy.html';

什么也没发生，只有我的当前页面出现，但是我的大约是。不加载。

嗨！我是新来的！但是也许我可以帮助您：）

请小心，如果目的地的路径与当前路径相同，则$location.path不会重新加载您的页面。我建议您将$路由用作$route.reload()，以重新加载具有相同路径的页面。

相关内容

最新更新

热门标签：