Как настроить частичные шаблоны Grails и AngularJS

Question

Я реализую проект с использованием AngularJS для переднего конца и Grails для бэкэнд.

• Угловая JS => Одна страница приложения
• Grails => REST API для использования в самой WebApp и 3-сторонних приложений.

Это, как я настроить проект:

web-app 
    | 
    |_____ js (angular controllers, modules, partial templates.) 
    | 
    |_____ images 
    | 
    |_____ css 


grails-app 
    | 
    |_____ views (in here I have my main view, the one I use at the first user request) 

Вместо того, чтобы использовать плагин ресурсов, я предпочитаю строить свой собственный передний конец с Грантом, а потом я только соединить конечные файлы внутри самого макета ,

я структурировал js папку в веб-приложение содержит папку partials со всеми частичными шаблонами быть названы в AngularJS

Это мой довольно стандартный угловой код для загрузки просмотров:

angular.module('myapp', []). 
    config(['$routeProvider', function($routeProvider) { 
    $routeProvider 
    .when('/invoices', { 
     templateUrl: 'partials/invoices-list.html', 
     controller: InvoiceListCtrl 
    }) 
    .when('/invoices/:invoiceId', { 
     templateUrl: 'partials/invoice-details.html', 
     controller: InvoiceDetailCtrl} 
    ) 
    .otherwise({redirectTo: '/dashboard'}, { 
     templateUrl: 'partials/dashboard.html', 
     controller: DashboardCtrl 
    }); 
}]); 

Что происходит, так это то, что Angular не может получить эти частичные шаблоны, поскольку неполная папка не копируется в каталоге tomcat work.

Я не знаю, какой другой подход можно использовать для проекта с питанием от Grails.

Answer 1

Я считаю, что проблема заключается в том, что статический ресурс не происходит из каталога по умолчанию grails-app, поэтому вам нужно включить полный путь из корня документа, например. templateUrl: '/partials/invoices-list.html',

Вот мой набор для Ui-маршрутизатор:

App.config([ 
    '$stateProvider' 
    '$urlRouterProvider' 

    ($stateProvider, $urlRouterProvider) -> 

    $urlRouterProvider.otherwise("/") 

    $stateProvider 
     .state('intro', { 
     url: "/", 
     templateUrl: '/templates/intro.html' 
     }) 

Answer 2

Я обслуживаю свои частичные/просмотры с помощью стандартных запросов ajax.

class ViewController { 

    def invoiceList() { 
    render(template: 'invoiceList') 
    } 
    ... 
} 

$routeProvider 
    .when('/invoices', { 
     templateUrl: contextPath + '/view/invoiceList', 
     controller: InvoiceListCtrl 
    }) 

contextPath происходит от ${request.contextPath}, что я храню в глобальной переменной в моей основной GSP.

Answer 3

По умолчанию все файлы в папке web-app копируются в папку с именем static в war. (Вы можете изменить это поведение. См. Grails Documentation).

В вашем примере вы можете проверить частичные файлы в следующих URL-адресах.

http://localhost:8080/yourApp/static/js/partials/invoices-list.html 
http://localhost:8080/yourApp/static/js/partials/invoices-details.html 
http://localhost:8080/yourApp/static/js/partials/dashboard.html 

Итак, что вам нужно сделать, это выяснить путь к этим файлам. Что-то вроде этого:

angular.module('myapp', []). 
    config(['$routeProvider', function($routeProvider) { 
    $routeProvider 
    .when('/invoices', { 
     templateUrl: '../static/js/partials/invoices-list.html', 
     controller: InvoiceListCtrl 
    }) 
    .when('/invoices/:invoiceId', { 
     templateUrl: '../static/js/partials/invoice-details.html', 
     controller: InvoiceDetailCtrl} 
    ) 
    .otherwise({redirectTo: '/dashboard'}, { 
     templateUrl: '../static/js/partials/dashboard.html', 
     controller: DashboardCtrl 
    }); 
}]); 

Его Важно заметить, что templateUrl путь не должен быть связан с JS-файла.

Другой пример:

grails-app 
    views 
     mydomain 
      index.gsp 
web-app 
    js 
     partials 
      mydomain-detail.html 
      mydomain-list.html 
     controllers 
      mydomain-controllers.js 

Ресурсы:

http://localhost:8080/myApp/mydomain/ 
http://localhost:8080/myApp/static/js/partials/mydomain-detail.html 
http://localhost:8080/myApp/static/js/partials/mydomain-list.html 

Конфигурация маршрута:

angular.module('myapp', []). 
    config(['$routeProvider', function($routeProvider) { 
    $routeProvider 
    .when('/list', { 
     templateUrl: '../static/js/partials/mydomain-detail.html', 
     controller: MyDomainListCtrl 
    }) 
    .when('/show/:id', { 
     templateUrl: '../static/js/partials/mydomain-detail.html', 
     controller: MyDomainDetailCtrl} 
    ) 
    .otherwise({ 
     redirectTo: '/list' 
    }); 
}]); 

Answer 4

в качестве альтернативы James' answer вы можете использовать GSP непосредственно. См. my answer in another thread.

Относительно contextPath: Я бы сказал, что вы автоматически получите правильный контекст, если вы не добавить предыдущую косую черту.

templateUrl: 'view/invoiceList' 

С наилучшими пожеланиями, Bjorn

P.S. Извините, что добавили это как полный ответ, я бы предпочел это как комментарий Джеймсу. Тем не менее, система отказала мне добавить комментарий :-(