angularJS $ routeProvider [英] angularJS $routeProvider

查看:121
本文介绍了angularJS $ routeProvider的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我用我的Grails应用程序angularJS。在此之前,我试图从互联网上的样本。我试图用angularJS $ routeProvider在我的主视图的部分景色。我的工作流程如下:

I am using angularJS in my grails application. Before that, i tried a sample from internet. I tried to use angularJS $routeProvider for the partial views in my main view. My workflows are as follows:

我的主要观点是index.gsp中:

my main view is index.gsp:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>AngularJS Routing example</title>
</head>

<body ng-app="routeApplication">

<div class="container">
    <div class="row">
        <div class="col-md-3">
            <ul class="nav">
                <li><a href="#AddNewOrder"> Add </a></li>
                <li><a href="#ShowOrders"> Show </a></li>
            </ul>
        </div>
        <div class="col-md-9">
            <div ng-view></div>
        </div>
    </div>
</div>


<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/app.js"></script>


</body>
</html>

我的部分观点是:add_order.gsp和show_orders.gsp要为每个视图示例消息

My partial views are: add_order.gsp and show_orders.gsp to show a sample message for each view.

我app.js如下:

var sampleApp = angular.module('routeApplication', ['ngRoute']);

sampleApp.config(['$routeProvider',
    function($routeProvider) {
        var base = '${request.contextPath}';

        $routeProvider.
            when('/AddNewOrder', {
            templateUrl: 'templates/add_order.html',
            controller: 'AddOrderController'
        }).
            when('/ShowOrders', {
                templateUrl: 'templates/show_orders.gsp',
                controller: 'ShowOrdersController'
            }).
            otherwise({
                redirectTo: '/AddNewOrder'
            });
    }]);


sampleApp.controller('AddOrderController', function($scope) {
    $scope.message = 'This is Add new order screen';

});


sampleApp.controller('ShowOrdersController', function($scope) {
    $scope.message = 'This is Show orders screen';

});

请注意:我创建了一个模板文件夹,放在我的看法parital

Note: i created a templates folder and placed my parital views on that.

这问题是,每当我点击加载我的局部视图它显示

This problem is that, whenever i click to load my partial views it shows

 `http://localhost/angularJSrouting/templates/show_orders.gsp`
    404 Not Found

我缺少的东西还是有放置局部视图中的任何问题?

Am i missing something or is there any problem of placing the partial views?

推荐答案

我不认为这会工作。由于您的templateUrl为模板/ show_orders.gsp angularjs将尝试找到该文件在你的webapp里面Templates文件夹。

I don't think this will work. Since your templateUrl is templates/show_orders.gsp angularjs will try to find that file inside templates folder in your webapp.

这篇关于angularJS $ routeProvider的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆