Loading partial html template into Angular app using Laravel

Question

I'm trying to use the RouteProvider functionality in Angular. A different partial html template should be loaded depending on whether the user is editing a form, viewing a list of completed entries, etc. I've been unable to load the html templates within the same page. Instead, the user is redirected to a different page.

Here's the relevant Angular code:

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

The Laravel Route:

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

The newform.html file is located at resources/views/partials/newform.html within Laravel.

Any thoughts on how I can load these partial html templates from Laravel?

Saqueib · Accepted Answer · 2015-02-08 13:25:10Z

5

One way would be to reference the full path to the partials

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

since you are just using .html not tempalte.blade.php file for template you should move it to public folder.

Update: If you really dont want to move the template out of view folder of laravel

create a route and serve your html from there

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

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

Note: I will suggest you not to mix Laravelc template with Angular, keep Laravel as REST API, and your Angular should separate layer.

Here are some Pros and Cons for both approach

edited Feb 8, 2015 at 13:25

answered Feb 8, 2015 at 5:45

Saqueib

3,5184 gold badges36 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Ken Over a year ago

@Squeib Thank you for the suggestion. The user is no longer being forced to a new page, but the html isn't loading in the ng-view.

Saqueib Over a year ago

Check your console and make sure newform.html file is loading. serve your application using localhost

Ken Over a year ago

@Squeib it shows a 404 error. But the path looks correct. laravel.app/resources/views/partials/newform.html

Saqueib Over a year ago

so its not loading, where you kept the angular index.html file, is it in public folder

Ken Over a year ago

Unfortunately, I'm not having much luck. That throws an error:

Argument 1 passed to Illuminate\Routing\Router::group() must be of the type array, string given, called in . . . facade.php

.

|

csantana · Accepted Answer · 2016-06-12 06:32:58Z

I found another way using gulp, i leave my solution :)

In gulpfile.js inside elixir function add this line:

 


     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
    });

As you notice it, i created a folder called 'angular' and then another one called 'components', there we will have our components



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

We have to create a global angular variable taking our browser window origin (www.myapp.com, localhost:8000, etc) by doing:



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

In our templateUrl we will call the template by writting:



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

I have to say we have to concat our angular files in a file, otherwise it won't work D: if you don't know how to do it, add these lines in your 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

Finally execute the command 'gulp' in terminal(In our project), it should generate a new folder in public called angular-templates.

CONCLUSION 1. Move all your angular templates to public inside a specific folder by using elixir. 2. create a global variable in angular to save your origin URL and use it in your directives it automatically with this template in public.

Collectives™ on Stack Overflow

Loading partial html template into Angular app using Laravel

2 Answers 2

10 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related