Is there a way I can separately include section in Laravel blade?

Question

When extending a view in laravel blade, to have multiple places of inserting, it can be done as something like this:

<html>
<head>
    <title>This is app/view/layout/default.blade.php</title>
    {{ HTML::script('js/jquery-2.1.3.min.js') }}
    {{ HTML::script('js/angular.js') }}
    @yield('extra_libraries')
</head>
<body>
    <div class="left-menu-bar">
        @yield('left-menu-bar')
    </div>
    <div class="main-content">
        @yield('main-content')
    </div>
</body>
</html>

Then, when using the layout,

@extend ("layout.default")
@section('extra_libraries')
    {{ HTML::script('js/underscore.js') }}
@stop
@section('left-menu-bar')
    <a href="http://www.google.com/">testing button</a>
@stop
@section('main-content')
    testing
@stop

What I want is a similar function when I am not extending but to include another blade into my current blade. i.e. something like this:

<html>
<head>
    <title>This is app/view/layout/default.blade.php</title>
    {{ HTML::script('js/jquery-2.1.3.min.js') }}
    {{ HTML::script('js/angular.js') }}
</head>
<body ng-app="myTestingApp">
    <div ng-controller="testing">
        @include('components.componentA.htmlComponent'）
        @include('components.componentB.htmlComponent'）
    </div>
    <script>
    var app = angular.module('myTestingApp', []).controller("testing", testingController);
    function testingController($scope) {
        @include('components.componentA.angularCode')
        @include('components.componentB.angularCode')
    }
    </script>
</body>
</html>

where componentA should be a blade file containing both anguarCode and htmlComponent. I know I can separate them into 2 files, but I want to see if there is a way to put them in the same file as they are closely related. Is there default function in laravel blade to achieve this?

P.S. The example shows why I want to put them together, if you know angularjs.

score 1 · Answer 1 · answered Jun 04 '15 at 18:04

1

to include another blade into my current blade

Well, to include another blade file inside an existing one, it is definitely the @include tag that comes to save the day. If it still doesn't satisfies your requirements, you can always write your own methods by extending Blade.

However, the whole thing seems a little too complicated to me. Why don't you separate your JavaScript into different controllers and then use ng-view to call the corresponding HTML, as shown in that example at the bottom of the documentation.

answered Jun 04 '15 at 18:04

Avalanche

1,468
1
11
18

Thanks for suggesting ng-view. I am new to Angularjs and haven't noticed that there is another option. However, as it is loading another page from a URL, so I will need another controller to return the correct view? Also, it seems that it is loading the page on the run, where I want to preload all the pages. So it seems not that suitable for me. I will give extending Blade a try. – cytsunny Jun 05 '15 at 02:28
Well, in that case you could also take a look at [ng-switch](https://docs.angularjs.org/api/ng/directive/ngSwitch) which could help you render static content. Here is a very simple example in plnkr http://plnkr.co/edit/r58waZQdtNLAkUE01GFS?p=preview – Avalanche Jun 05 '15 at 20:04

score 0 · Answer 2 · answered Aug 20 '18 at 06:52

Not sure but you could try

...
<body ng-app="myTestingApp">
    <div ng-controller="testing">
        @yield('componentA-html'）
        @yield('componentB-html'）
    </div>
    <script>
    var app = angular.module('myTestingApp', []).controller("testing", testingController);
    function testingController($scope) {
        @yield('componentA-angularCode'）
        @yield('componentB-angularCode'）
    }
    </script>
</body>
@include('components.componentA')
@include('components.componentB')
</html>

And your componentA blade should be

@section('componentA-html')
   html for A
@endsection
@section('componentA-angularCode')
   angularCode for A
@endsection

the same way for compomentB blade

Is there a way I can separately include section in Laravel blade?

2 Answers2