使用 Laravel 将部分 html 模板加载到 Angular 应用中

Question

我正在尝试使用 Angular 中的 RouteProvider 功能。根据用户是否正在编辑表单、查看已完成的条目列表等，应该加载不同的部分 html 模板。我一直无法在同一页面中加载 html 模板。相反，用户被重定向到另一个页面。

这是相关的 Angular 代码：

.when(/new', {
  controller: 'CreateCtrl'
  templateUrl: 'partials/newform.html'

Laravel路线：

Route::resource('services', 'ServicesController');

newform.html 文件位于 Laravel.html 处 Laravel.

关于如何从 Laravel 加载这些部分 html 模板有什么想法吗？

Answer 1

一种方法是引用部分文件的完整路径

.when('/new', {
   controller: 'CreateCtrl'
   //depending on your path adjust it
   templateUrl: 'partials/newform'

因为您只是使用 .html 而不是 tempalte.blade.php 模板文件，您应该将它移动到 public 文件夹。

更新： 如果您真的不想将模板移出 laravel

的视图文件夹

创建一条路线并从那里为您的 html 提供服务

Route::group(array('prefix' => 'partials'), function(){

      Route::get('/newform', function()
      {
        return File::get(app_path().'Views/partials/angular.html');
      });
});

注意：我建议你不要将Laravelc模板与[=32=混合使用]，将Laravel保留为REST API，你的 Angular 应该分开层。

Here are some Pros and Cons for both approach

Answer 2

我找到了另一种使用 gulp 的方法，我留下我的解决方案:)

在 gulpfile.js 里面的 elixir 函数中添加这一行：

 


     var elixir = require('laravel-elixir');
        elixir(function(mix) {
            mix.copy('resources/assets/js/angular/components/**/*.template.html', public/angular-templates'); 
//Find all files with suffix .template.html
    });

如您所见，我创建了一个名为 'angular' 的文件夹，然后创建了另一个名为 'components' 的文件夹，我们将在其中放置我们的组件



    Angular----------------------------- 
    --Components------------------------ 
    ----my-component.directive.js------- 
    ----my-component.template.html------

我们必须创建一个全局 angular 变量以我们的浏览器 window 来源（www.myapp.com、localhost:8000 等），方法是：



    angular.module('myModule',[])
    .value('pathAssets', location.origin + '/angular-templates/')

在我们的 templateUrl 中，我们将通过编写来调用模板：



    templateUrl: pathAssets + '../angular-templates/my-template.html',

我不得不说我们必须将我们的 angular 文件合并到一个文件中，否则它将无法工作 D: 如果您不知道该怎么做，请将这些行添加到您的 gulpfile.js



    mix.scripts([
        '../../../bower_components/angular/angular.min.js',
        'angular/app.js',
        'angular/controllers/**/*.controller.js',
        'angular/components/**/*.directive.js',
        'angular/bootstrap.js',
], 'public/js/app.js'); //We concatenate angular files saving them in app.js

最后在终端中执行命令'gulp'（在我们的项目中），它应该在public中生成一个名为angular-templates.

结论 1. 使用 elixir 将所有 angular 模板移动到特定文件夹内的 public。 2. 在 angular 中创建一个全局变量以保存您的来源 URL 并在您的指令中使用它，它会自动与 public 中的此模板一起使用 public.

使用 Laravel 将部分 html 模板加载到 Angular 应用中

Loading partial html template into Angular app using Laravel

rest

laravel

angularjs

laravel-routing