CODEWITHSUNDEEP
angularjsrestlaravellaravel-routing
Ken
Ken

Reputation: 3141

Loading partial html template into Angular app using Laravel

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?

Upvotes: 2

Views: 3827

Answers (2)

csantana
csantana

Reputation: 576

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

  1. 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------
  1. 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/')
  1. 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
  1. 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.

Upvotes: 1

Saqueib
Saqueib

Reputation: 3520

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

Upvotes: 5

Related Questions