通过 Angular js 在 index.html 页面中将一个页面导航到另一个页面答案

【问题标题】：navigate one page to another in index.html page via angular js通过 Angular js 在 index.html 页面中将一个页面导航到另一个页面
【发布时间】：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”链接。但是在我尝试实现客户页面中的功能时使用它后，这些功能不起作用。

标签： javascript java html sql angularjs

【解决方案1】：

有点难以回答，因为有很多方法可以做到这一点，但请查看https://github.com/angular-ui/ui-router

【讨论】：