gentelella with angular core


Разворачиваем 

packege.json

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "angular": "^1.7.0",
    "bootstrap-sass": "^3.0.0",
    "gulp": "^3.9.1",
    "laravel-elixir": "^6.0.0-17",
    "laravel-elixir-vue-2": "^0.2.0",
    "laravel-elixir-webpack-official": "^1.0.2"
  } 
}
npm install angular -D
npm install malihu-custom-scrollbar-plugin --save-dev

 gulpfile.js add


        // Gentelella styles
    mix.copy('vendor/bower_components/gentelella/vendors/pnotify/dist/pnotify.css', 'public/css/pnotify.css');
    mix.copy('resources/assets/css/nprogress.css', 'public/css/nprogress.css');
    mix.sass('resources/assets/sass/bootstrap-select/bootstrap-select.scss', 'public/css/bootstrap-select.css');
    mix.copy('node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css', 'public/css/jquery.m-custom-scrollbar.css');
    mix.copy('vendor/bower_components/gentelella/vendors/bootstrap-daterangepicker/daterangepicker.css', 'public/css/daterangepicker.css');
    mix.copy('resources/assets/css/bootstrap-input-file.css', 'public/css/bootstrap-input-file.css');

    // Gentelella js
    mix.copy('vendor/bower_components/gentelella/vendors/pnotify/dist/pnotify.js', 'public/js/pnotify.js');
    mix.copy('vendor/bower_components/gentelella/vendors/nprogress/nprogress.js', 'public/js/nprogress.js');
    mix.copy('resources/assets/js/jquery-plugins/bootstrap-select.js', 'public/js/bootstrap-select.js');
    mix.copy('node_modules/angular/angular.min.js', 'public/js/angular.min.js');
    mix.copy('node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js', 'public/js/jquery.m-custom-scrollbar.concat.min.js');
    mix.copy('vendor/bower_components/gentelella/vendors/moment/min/moment.min.js', 'public/js/moment.min.js');
    mix.copy('vendor/bower_components/gentelella/vendors/moment/locale/ru.js', 'public/js/moment.ru.js');
    mix.copy('vendor/bower_components/gentelella/vendors/bootstrap-daterangepicker/daterangepicker.js', 'public/js/daterangepicker.js');


    // core
    mix.sass(['app.scss', 'auth.scss']);
    mix.scripts([
        'resources/assets/js/jquery-plugins/vendor/*.js',
        'resources/assets/js/jquery-plugins/*.js',
        'resources/assets/js/gentelella.js',
        'resources/assets/js/notify.js',

        'resources/assets/js/app.js',
        'resources/assets/js/angular/modules/*.js',
        'resources/assets/js/angular/directives/*.js',
        'resources/assets/js/angular/filters/*.js',
    ], 'public/js/app.min.js');
    mix.combine([
        'resources/assets/js/angular/resources/*.js',
        'resources/assets/js/angular/services/*.js',
    ], 'public/js/app.js');
    // controllers
    // mix.version(['css/app.css', 'js/app.js']);

    mix.copy('resources/assets/js/angular/controllers/AccrualController.js', 'public/js/accrual-controller.js');
    mix.copy('resources/assets/js/angular/controllers/UsersController.js', 'public/js/users-controller.js');

add core to resources/

 

Edit view

<!DOCTYPE html>
<html lang="ru">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="<% csrf_token() %>">

    <title>test</title>

    <!-- Styles -->
    <link href="{{ asset("css/bootstrap.min.css") }}" rel="stylesheet">
    <link href="{{ asset("css/font-awesome.min.css") }}" rel="stylesheet">
    <link href="{{ asset("css/gentelella.min.css") }}" rel="stylesheet">

    <link href="{{ asset("css/pnotify.css") }}" rel="stylesheet">
    <link href="{{ asset("css/bootstrap-select.css") }}" rel="stylesheet">
    <link href="{{ asset("css/nprogress.css") }}" rel="stylesheet">
    <link href="{{ asset("css/jquery.m-custom-scrollbar.css") }}" rel="stylesheet">
    <link href="{{ asset("css/daterangepicker.css") }}" rel="stylesheet">
    <link href="{{ asset("css/bootstrap-input-file.css") }}" rel="stylesheet">

    <link href="{{ asset("css/app.css") }}" rel="stylesheet">
    {{--<link href="{{ asset(elixir("css/app.css")) }}" rel="stylesheet">--}}


    @stack('stylesheets')

</head>

<body class="nav-md">

<div class="container body layout-<% $_REQUEST['layout'] or '' %>">
    <div class="main_container">

        @if(@$_REQUEST['layout'] != 'modal')
            @include('includes/sidebar')
        @endif
        @include('includes/topbar')

        <!-- page content -->
        <div class="right_col" role="main">
            <div @if(isset($ngController)) ng-app="uionline" ng-controller="{{ $ngController or '' }}" ng-cloak @endif>
                <div id="loading"></div>
                <div id="top-container" class="top-container">
                    @yield('top')
                </div>
                <div id="resize-bar" class="resize-bar" data-top-container="#top-container" data-bottom-container="#bottom-container">
                    <div class="resize-bar-icon"></div>
                    <div class="resize-bar-icon"></div>
                    <div class="resize-bar-icon"></div>
                </div>
                <div id="bottom-container" class="bottom-container">
                    @yield('bottom')
                </div>
            </div>
        </div>
            <!-- /page content -->
            @include('includes/footer')


    </div>
</div>

<!-- Scripts -->
<script src="{{ asset("js/jquery.min.js") }}"></script>
<script src="{{ asset("js/angular.min.js") }}"></script>
<script src="{{ asset("js/bootstrap.min.js") }}"></script>

<script src="{{ asset("js/pnotify.js") }}"></script>
<script src="{{ asset("js/nprogress.js") }}"></script>
<script src="{{ asset("js/bootstrap-select.js") }}"></script>
<script src="{{ asset("js/jquery.m-custom-scrollbar.concat.min.js") }}"></script>
<script src="{{ asset("js/moment.min.js") }}"></script>
<script src="{{ asset("js/moment.ru.js") }}"></script>
<script src="{{ asset("js/daterangepicker.js") }}"></script>

<script src="{{ asset("js/app.min.js") }}"></script>
<script src="{{ asset("js/app.js") }}"></script>
{{--        <script src="{{ asset(elixir("js/app.js")) }}"></script>--}}


@stack('scripts')

</body>
</html>

 

Finish

sudo npm run prod