通过 Angular js 在 index.html 页面中将一个页面导航到另一个页面
Posted
技术标签:
【中文标题】通过 Angular js 在 index.html 页面中将一个页面导航到另一个页面【英文标题】：navigate one page to another in index.html page via angular js 【发布时间】：2015-11-03 19:52:18 【问题描述】：我正在尝试从我的 index.html 页面导航到 customer.html 页面。我想通过 Angular js 来做到这一点，因为我正在使用 Angular 框架。目前我正在通过 html 链接导航，但我必须通过 angular 来完成。因此，我想在 customer.html 页面中使用的功能不起作用。 这是我的代码： HTML 代码：index.html:
<body data-ng-controller="FirstCtrl as fctrl">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Nishinda's Diner</a>
</div>
<div>
<ul class="nav navbar-nav">
<!--<li><a href="#">Home</a></li>-->
<li><a href="/api/first/customer">Customer</a></li>
<li><a href="ownerLogIn.html">Owner</a></li>
</ul>
</div>
</div>
</nav>
<body data-ng-controller="MainCtrl as mctrl">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div>
<ul class="nav navbar-nav">
<li> <a href="index.html">Nishinda's Diner</a></li>
<li><a href="customer.html">Guest</a></li>
<li><a href="ownerLogIn.html">Owner</a></li>
</ul>
</div>
</div>
</nav>
<div>
这 2 个是我在 Angular JS 中的控制器： first-ctrl.js：
angular.module('restaurantApp').controller('FirstCtrl',FirstController);
FirstController.$inject=['$http']
function FirstController($http)
var fctrl = this;
fctrl.customer= function()
$http(
method: 'GET',
url: 'api/first/customer',
).success(function(url)
console.log(url);
//mctrl.newCustomer=null;
).error(function(error)
console.log(error);
);
;
这是我的 main-ctrl.js（用于客户页面）： angular.module('restaurantApp').controller('FirstCtrl',FirstController).controller('MainCtrl', MainController);
//injecting annotation=$http
MainController.$inject=['$http']
function MainController($http)
var mctrl = this;
mctrl.addCustomer= function()
$http(
method: 'POST',
url: 'api/first/customer/add',
data: mctrl.newCustomer
).success(function(data)
console.log(data);
mctrl.newCustomer=null;
if(data.status == 'success')
mctrl.loggedIn= true;
else
mctrl.loggedIn= false;
).error(function(error)
console.log(error);
);
;
These are my controller:
FirstController:(It will be used for index.html)
@Path("/first")
public class FirstController
@GET
@Path("/customer")
//@Consumes(MediaType.APPLICATION_JSON)
//@Produces(MediaType.APPLICATION_JSON)
public AppResponse customerPage(@Context HttpServletRequest request)
AppResponse resp = new AppResponse();
// generating the common msg for successful/ unsuccessful connection
return resp;
这是我的客户控制器： @Path("/first/customer") 公共类 CustomerController
@GET
@Path("/all")
//produce result in data exchange format
//produce object from json data
@Produces(MediaType.APPLICATION_JSON)
public AppResponse getAll()
AppResponse resp = new AppResponse();
// generating the common msg for successful/ unsuccessful connection
try
//if successful show list
CustomerDAO customerDAO=new CustomerDAO();
List<Customer> customerList=customerDAO.getAll();
resp.setPayload(customerList);
catch (AppException e)
// TODO Auto-generated catch block
e.printStackTrace();
resp.setStatus(AppResponse.ERROR);
resp.setMessage(e.getMessage());
//customerDAO.getAll();
return resp;
【问题讨论】：
redirect using AngularJS 是什么意思？你在寻找ng-view SPA 之类的东西吗？
是的。确切地。我想使用 angularjs 进行重定向。我在我的索引页面中使用了“customer.html”链接。但是在我尝试实现客户页面中的功能时使用它后，这些功能不起作用。
【参考方案1】：
有点难以回答，因为有很多方法可以做到这一点，但请查看https://github.com/angular-ui/ui-router
【讨论】：
以上是关于通过 Angular js 在 index.html 页面中将一个页面导航到另一个页面的主要内容，如果未能解决你的问题，请参考以下文章
如何设置网页默认index.htm而不是index.php？