Embed Template Data in View (Angular, Laravel)

Posted: 2014-12-02 11:55:57

Sometimes, when your frontend shares the same view rendering of the backend, you can store data in the window object. This can save you queries to the backend when, for example, Profile Data that shows on every pages request.

profile

Embed output into window or $window

In the Controller I am using to output the Angular template (app/views/main.blade.php for example) I inject the window data that I want all pages to have.

    public function index()
    {
        $user_id = $this->getUserId();
        $profile = $this->userService->getJustProfile($user_id);
        $token = csrf_token();
        JavaScript::put(
            [
                'profile' => $profile,
                'token' => $token
            ]
        );
        return View::make('layouts.main');
    }

So every time the template is rendered it will add this data to the output. Later on I make use of that inside my Angular app using a MainCtrl.

MainCtrl Wrapping it All

<body ng-controller="MainCtrl as main">

This controller gets called at every page load to setup this base info for the site.

(function(){
    'use strict';


    function MainCtrl($rootScope, $window) {

        var vm = this;
        vm.profile       = {};
        vm.activate        = activate;


        vm.activate();

        ///////

        function activate()
        {
            vm.profile = $window.profile;
        }


    }


    /**
     *
     * Pass all functions into module
     */
    angular
        .module('app')
        .controller('MainCtrl ', MainCtrl)

})();

Template calling to Main

Now on those page that renders the profile image, name and email on the top left of the site I call to that scope.

<nav class="navbar-default navbar-static-side" role="navigation">
    <div class="sidebar-collapse">
        <ul side-navigation class="nav" id="side-menu">
            <li class="nav-header">

                <div class="dropdown profile-element">
                    <div class="row">
                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                            <a ui-sref="profile">
                                <img alt="image" class="img-responsive img-circle" src="img/profiles/{{main.profile.image}}"/>
                            </a>
                        </div>
                    </div>
                    <a class="dropdown-toggle" href>
                            <span class="clear">
                                <span class="block m-t-xs">
                                    <strong class="font-bold">
                                        {{ main.profile.email }}
                                    </strong>
                             </span>
                                <span class="text-muted text-xs block">Profile<b class="caret"></b></span>
                            </span>
                    </a>
                    <ul class="dropdown-menu animated fadeInRight m-t-xs">
                        <li><a ui-sref="profile">Profile</a></li>
                        <li class="divider"></li>
                        <li><a href="/auth/logout">Logout</a></li>
                    </ul>
                </div>
                <div class="logo-element">
                    BE
                </div>
            </li>