フラッグ材料によるラーラーベルのフラッシュメッセージ

場合によっては、フォームのようなフォームメッセージのようなメッセージを表示するメッセージを表示する必要があります、メッセージ、警告メッセージ、通知メッセージなどのネイティブJavaScriptの警告メッセージを使用して古いファッションになっている.そこで、ここでララベルのフラッシュメッセージを我々のアプリケーションでは、角の材料で表示されます.

ラーラーベルバージョン8を使用するが、このチュートリアルを任意のlaravelバージョンで実装できます

アンギュラJS 1.7.6バージョンと角材料バージョン1.1.12.

使用Laravel Session 動的なフラッシュメッセージを作成するには

使用$mdToast 角度材料における角度JSサービス

ララベル付き角材トースト

角材のネイティブライブラリの追加

このコードをレイアウトの先頭部分に貼り付けます.

<!-- Angular Material style sheet -->
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.12/angular-material.min.css">

次に、レイアウトの本文セクションの終了前にこのコードをペーストします

<!-- angular material -->

    <!-- Angular Material requires Angular.js Libraries -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-messages.min.js"></script>

    <!-- Angular Material Library -->
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.2.3/angular-material.min.js"></script>
    <!-- angular material -->

アプリケーションを作成します.public/angleディレクトリ内のJSファイルで、以下のコードをペーストします

var angularApp = angular.module('angularApp', angularLibs, function($interpolateProvider) {
   $interpolateProvider.startSymbol('<%'); $interpolateProvider.endSymbol('%>');
});

angularApp.config(function($mdThemingProvider) {
$mdThemingProvider.theme('altTheme')
.primaryPalette('green')
.accentPalette('blue')
.warnPalette('pink')
.backgroundPalette('brown');

$mdThemingProvider.setDefaultTheme('altTheme');
});

ファクトリーを作成します.public/angle/factoryディレクトリの中のJSファイルで、以下のコードをペーストします.

angularApp.factory('notificationFactory', function ( $mdToast) {

var factory = {};

factory.showActionToast = function(msg, position) {
    var toast = $mdToast.simple()
    .textContent(msg)
    .action('close')
    .highlightAction(true)
    .hideDelay(5000000)
    .highlightClass('md-accent')
    .position(position);
    $mdToast.show(toast).then(function(response) {
        if ( response == 'close' ) {

        }
    });
}

return factory;

});

ルート/ Webのルートを追加。PHPファイル

Route::get('/', [UserController::class, 'welcome']);

アプリケーション/ HTTP /コントローラでユーザーコントローラを作成し、機能を作成する

use Illuminate\Http\Request; //add this namespace at top

//This function inside controller

public function welcome(Request $request){
$message = ['type' => 'success', 'content' => 'Task was successful!'];

    $request->session()->flash('message', $message);

    return view('welcome');
}

レイアウトの本文の中にHTMLを追加します

<div ng-controller="toastCtrl" layout-fill layout="column" class="inset" ng-cloak>

</div>

あなたのレイアウトのボディタグのNGアプリ=“angularApp”属性を追加します.
してください共有購読し、あなたのためにもっと書くことを動機に肯定的なフィードバックを与える.
もっとチュートリアルvisit my website .
ありがとう
ハッピーコーディング