Question

我正在尝试在Angular中使用RouteProvider功能。应该加载不同的部分html模板，具体取决于用户是否正在编辑表单，查看已完成条目的列表等。我无法在同一页面中加载html模板。而是将用户重定向到不同的页面。

以下是相关的Angular代码：

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

Laravel路线：

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

newform.html文件位于Laravel内的resources / views / partials / newform.html。

关于如何从Laravel加载这些部分html模板的任何想法？

Answer 1

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

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

由于您只是使用.html而不是tempalte.blade.php文件作为模板，因此应将其移至公用文件夹。

<强>更新如果你真的不想将模板移出laravel的视图文件夹

创建一个路线并从那里提供你的html

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

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

注意：我建议您不要将Laravelc模板与Angular混合使用，将Laravel保留为REST API，并且您的Angular应该将图层分开。

Here are some Pros and Cons for both approach

Answer 2

我发现使用gulp的另一种方式，我留下我的解决方案：）

在elixir函数内的gulpfile.js中添加以下行：

 


     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------

我们必须通过以下方式创建一个全局角度变量来获取我们的浏览器窗口（www.myapp.com，localhost：8000等）：



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

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



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

我不得不说我们必须在文件中连接我们的角度文件，否则它将无法工作D：如果你不知道如何做，请在你的gulpfile.js中添加这些行。 / p>



    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'（在我们的项目中），它应该在公共场所生成一个名为angular-templates的新文件夹。

结论 1.使用elixir将所有角度模板移动到特定文件夹中的public。 2.以角度创建一个全局变量以保存您的原始URL，并在公共指令中自动使用该模板。

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

2 个答案: