Skip to content
Jerry edited this page Aug 4, 2023 · 4 revisions
composer require midsmr/laravel-angular
php artisan vendor:publish --tag="angular-assets"

layout.app.blade.php

<x-angular::app main-title="test">
    <x-slot:title>@yield('title')</x-slot:title>

    @push('styles')
        <style>
            .app {color: white;}
            //这个push块需要自定义样式使用
        </style>
    @endpush

    <x-slot:dropdwon>
        <x-angular::dropdown
            avatar="https://via.placeholder.com/100x100.png/0077dd?text=illo"
            name="User">
            <x-angular::dropdown-link href="javascript:logout();">
                test
            </x-angular::dropdown-link>
        </x-angular::dropdown>
    </x-slot:dropdwon>

    <x-slot:aside>
        <x-angular::aside>
            <x-angular::router-title>导航</x-angular::router-title>
            <x-angular::router-link
                class="fa fa-user"
                :is-active="str(url()->current())->is(route('user.dashboard').'*')"
                href="{{route('user.dashboard')}}"
                >首页</x-angular::router-link>
        </x-angular::aside>
    </x-slot:aside>

    @yield('content')

    <x-slot:footer>
        <x-angular::footer>Copyright &copy; 2022 Jerry</x-angular::footer>
    </x-slot:footer>

    @push('scripts')
        <script>
            console.log('layout');
            //这个push块需要自定义脚本时使用
        </script>
    @endpush
</x-angular::app>

dashboard.blade.php

@extends('layout.app')

@section('title', '测试')

@push('styles')
    <style>
        .app {color: white;}
        //这个push块需要自定义样式使用
    </style>
@endpush

@section('content')
    <x-angular::content title="test" description="ceshi">
        Helloworld
    </x-angular::content>
@endsection

@push('scripts')
    <script>
        console.log('dashboard')
    </script>
@endpush

layout.auth.blade.php

<x-angular::auth :main-title="config('app.name')">
    <x-slot:title>@yield('title')</x-slot:title>
    <x-slot:keywords>@yield('keywords')</x-slot:keywords>
    <x-slot:description>@yield('description')</x-slot:description>

    <x-slot:slot>
        @yield('content')
    </x-slot:slot>

    <x-slot:footer>
        <x-angular::auth-footer>Jerry</x-angular::auth-footer>
    </x-slot:footer>

    @push('scripts')
        <script src="{{ asset('js/axios.min.js') }}"></script>
        <script src="{{ asset('js/app.js') }}"></script>
        <script src="{{ asset('js/layer/layer.js') }}"></script>
    @endpush

</x-angular::auth>

login.blade.php

@extends('layout.auth')

@section('title', '登录')


@section('content')
    <form name="form" class="form-validation" action="{{route('auth.login')}}" method="post" app-ajax>
        <div class="text-danger wrapper text-center"></div>
        <div class="list-group list-group-sm">
            <div class="list-group-item">
                <input type="text" name="email" placeholder="Email" class="form-control no-border">
            </div>
            <div class="list-group-item">
                <input type="password" name="password" placeholder="Password" class="form-control no-border">
            </div>
        </div>
        <button type="submit" class="btn btn-lg btn-primary btn-block">Log in</button>
        <div class="text-center m-t m-b"><a ui-sref="access.forgotpwd">Forgot password?</a></div>
        <div class="line line-dashed"></div>
        <p class="text-center"><small>Do not have an account?</small></p>
        <a ui-sref="access.signup" class="btn btn-lg btn-default btn-block">Create an account</a>
    </form>
@endsection

@push('scripts')
    <script>
        document.querySelector('form[app-ajax]').callback = function (response) {
            if (response.data.status === 1) {
                layer.msg('登录成功', {icon: 1}, function () {
                    window.location.href = '{{route('user.dashboard')}}'
                })
            } else {
                layer.msg(response.data.message, {icon: 2})
            }
        }
    </script>
@endpush

result:

截屏2022-09-03 20 44 23 截屏2022-09-03 20 44 46
Clone this wiki locally