AngularJSとPHPのLaravelを使用して単一ページのコメントを実装する方法

1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...

完全なコード:https://github.com/scotch-io/laravel-angular-comment-app

現在、LaravelとAngularはWeb開発の世界で非常に有名なツールとなっています。 LaravelはPHPコミュニティにすばらしいコンテンツを提供することで知られています.Angularは素晴らしいフロントエンドツールとシンプルさで知られています。 これら2つのフレームワークを組み合わせることは、論理的な次のステップと思われます。

私たちの使用環境では、LaravelをバックエンドのRESTful APIとして使用し、Angularをフロントエンドとして使用して、単純な1ページのコメントアプリを作成します。

ここでは、これらの2つの手法を使い始める方法を示す簡単な例がありますので、余分なデータベースの内容、サブコメントなどを処理する方法を恐れないでください。

私たちは何を創造しますか?

これは、単純な1ページのレビューアプリになります:

RESTfulなLaravel APIは、コメントの取得、作成、削除を処理します。
Angularフロントエンドは、作成したフォームやコメントを表示します。
新しいコメントを作成し、W / Oページのリフレッシュリストに追加する機能。
コメントを削除し、W / Oページのリフレッシュリストからコメントを削除する機能。

一般に、これらは非常に単純な概念です。 私たちの焦点は、LaravelとAngularがどのように連携するかの複雑な関係にあります。

Https://photo.yuedy.com/wp-content/uploads/2018/07/20180714202849-5b4a5d01acca5.jpg(811×705)

LaravelバックエンドセットLaravel

Laravelの設定を続けながら、バックエンド実装のコメントに追加や削除を行うための基本的な作業を行います:

データベースの移行を作成する
サンプルコメントをデータベースに埋め込む
APIのルーティングテーブルを作成する
Angular routeを出力するための "all get"ルーティングテーブルを作成する
コメント用のリソースコントローラを作成する

データベース移行の準備

コメント、コンテンツ、著者だけを格納するシンプルな構造が必要です。 レビューを作成するためのLaravel移行を作成しましょう。

artisanコマンドを実行して、データベースにコメント表を作成できるようにコメント移行を作成しましょう。


php artisan migrate:make create_comments_table -create=comments

Laravel Pattern Builderを使用して、必要な[コンテンツ]フィールドと[作成者]フィールドを作成します。 LaravelはIDとタイムスタンプの列も作成し、このコメントがいつ追加されたかを知ることができます。 コメントフォームのコードは次のとおりです。


// app/database/migrations/####_##_##_######_create_comments_table.php
...
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('comments', function(Blueprint $table)
{
$table->increments('id');
$table->string('text');
$table->string('author');
$table->timestamps();
});
}
...

"app / config / database.php"ファイルの正しい認証情報でデータベース設定を調整してください。 次に、必要な列を使用してこの表を作成できるように、移行を実行します。


php artisan migrate

Https://photo.yuedy.com/wp-content/uploads/2018/07/20180714202850-5b4a5d0225106.jpg(553×168)

コメントモデル

Laravel Eloquentモデルを使用してデータベースと対話します。 これは簡単ですが、モデルを作成しましょう: "app / models / Comment.php":


<?php
// app/models/Comment.php
class Comment extends Eloquent {
// let eloquent know that these attributes will be available for mass assignment
protected $fillable = array('author', 'text'); 
}

テーブルとモデルが完成したので、Laravel Seedingを使用してテーブルにデータのサンプルを追加しましょう。
シードデータベース

いくつかのことをテストするには、いくつかのコメントが必要です。 シードファイルを作成し、3つのサンプルコメントをデータベースに挿入しましょう。

"app / database / seeds / CommentTableSeeder.php"というファイルを作成し、次のコードを追加します。


<?php
// app/database/seeds/CommentTableSeeder.php
class CommentTableSeeder extends Seeder 
{
public function run()
{
DB::table('comments')->delete();
Comment::create(array(
'author' => 'Chris Sevilleja',
'text' => 'Look I am a test comment.'
));
Comment::create(array(
'author' => 'Nick Cerminara',
'text' => 'This is going to be super crazy.'
));
Comment::create(array(
'author' => 'Holly Lloyd',
'text' => 'I am a master of Laravel and Angular.'
));
}
}

このシーダーファイルを呼び出すには、 "app / database / seeds / DatabaseSeeder.php"を修正し、次のコードを追加する必要があります:


// app/database/seeds/DatabaseSeeder.php
...
/**
* Run the database seeds.
*
* @return void
*/
public function run()
{
Eloquent::unguard();
$this->call('CommentTableSeeder');
$this->command->info('Comment table seeded.');
}
...

今私たちは職人の命令でプランターを実行します。


php artisan db:seed

Https://photo.yuedy.com/wp-content/uploads/2018/07/20180714202850-5b4a5d023acab.jpg(536×233)

これで、コメントテーブル、Eloquentモデル、およびいくつかのデータベースサンプルを持つデータベースが作成されました。 今日の仕事は悪くないです。 。 。 しかし、私たちは遠からずです。

コメントリソースコントローラ(app / controllers / CommentController.php)

コメント用のAPI関数を処理するために、Laravel Resource Controllerを使用します。 Angularはリソースを表示し、フォームを作成および更新するために使用されるため、関数を作成および編集することなくartisanコマンドを使用してリソースコントローラを作成します。

職人とリソースコントローラを作成しましょう。


php artisan controller:make CommentController -only=index,store,destroy

サンプルアプリケーションでは、これらの3つの機能をリソースコントローラでのみ使用します。 拡張するには、より成熟したアプリケーションを実現するために、更新、表示などのすべての機能を含める必要があります。

Https://photo.yuedy.com/wp-content/uploads/2018/07/20180714202850-5b4a5d025ae15.jpg(918×189)

コントローラを作成したので、LaravelではなくAngularがフォームを表示する作業を処理するため、関数を作成および編集する必要はありません。 Laravelは、フロントエンドにデータを返す責任があります。 物事を単純化するために、サンプルアプリケーションからの更新機能も提案しました。 コメントの作成、表示、および削除を処理します。

データを返すために、データをJSON形式で返す必要があります。 新しく作成されたコントローラを見て、適切な関数を追加しましょう。


<?php
// app/controllers/CommentController.php
class CommentController extends \BaseController {
/**
* Send back all comments as JSON
*
* @return Response
*/
public function index()
{
return Response::json(Comment::get());
}
/**
* Store a newly created resource in storage.
*
* @return Response
*/
public function store()
{
Comment::create(array(
'author' => Input::get('author'),
'text' => Input::get('text')
));
return Response::json(array('success' => true));
}
/**
* Remove the specified resource from storage.
*
* @param int $id
* @return Response
*/
public function destroy($id)
{
Comment::destroy($id);
return Response::json(array('success' => true));
}
}

追加、削除、変更をLaravelとEloquentで処理するのがどれほど簡単かを知ることができます。 私たちが必要とする機能を処理することは非常に簡単です。

コントローラーの準備が整うと、バックエンドで行う最後の作業の1つがルーティングです。

私たちのルーティングテーブル(app / routes.php)

データベースが準備できたら、Laravelアプリケーションのルーティングテーブルを処理してみましょう。 独自のルートがあるため、ルーティングテーブルを使用してフロントエンドにデータを送信します。 また、バックエンドAPIにルーティングテーブルを提供して、人々がコメントデータにアクセスできるようにする必要があります。

ルーティングテーブルを指す角度を作成しましょう。 ユーザーにAngularを送信するホームページのルーティングテーブルと「すべて取得」ルーティングテーブルが必要です。 これにより、ユーザーはいつでも当社のウェブサイトにアクセスでき、Angularフロントエンドにルーティングされます。

APIルーティングテーブルの接頭辞として、…(ドラムにしてください)… apiを使用します。 このようにして、誰かがすべてのコメントを取得したい場合、URL:http://example.com/api/commentsを使用します。 これは基本的なAPIを作成するための前進といくつかの良い戦略です。


<?php
// app/routes.php
// =============================================
// HOME PAGE ===================================
// =============================================
Route::get('/', function()
{
// we dont need to use Laravel Blade
// we will return a PHP file that will hold all of our Angular content
// see the "Where to Place Angular Files" below to see ideas on how to structure your app
return View::make('index'); // will return app/views/index.php
});
// =============================================
// API ROUTES ==================================
// =============================================
Route::group(array('prefix' => 'api'), function() {
// since we will be using this just for CRUD, we won't need create and edit
// Angular will handle both of those forms
// this ensures that a user can't access api/create or api/edit when there's nothing there
Route::resource('comments', 'CommentController', 
array('only' => array('index', 'store', 'destroy')));
});
// =============================================
// CATCH ALL ROUTE =============================
// =============================================
// all routes that are not home or api will be redirected to the frontend
// this allows angular to route them
App::missing(function($exception)
{
return View::make('index');
});

我々は今、Laravelがしなければならない3つの主要な事柄を扱うルーティングテーブルを持っています。

"all get"ルーティングテーブルの処理:Laravelでは、これをいくつかの方法で行うことができます。 多くの場合、上記のコードを使用してアプリケーション全体で「すべて取得」することは理想的ではありません。 また、Laravelコントローラのlostメソッドを使用してルーティングテーブルを取得することもできます。

すべてのルーティングテーブルをテストすることで、必要なルーティングテーブルが使用可能であることを確認できます。 すべてのルーティングテーブルを表示するには職人を使用します:


php artisan routes

このコマンドを実行すると、すべてのルーティングテーブルとトップダウンアプリケーションビューが表示されます。

Https://photo.yuedy.com/wp-content/uploads/2018/07/20180714202850-5b4a5d028020c.jpg(1087×284)

上の図から、HTTP動詞を見ることができ、すべてのコメントを取得し、コメント用のルーティングテーブルを取得、作成、破棄することができます。 APIルーティングテーブルの一番上には、ホームページのルーティングテーブルからユーザーがAngularにルーティングする方法が表示されます。

バックグラウンドで完成

ようやく! 私たちのLaravel APIの背景も完全です。 私たちはたくさんのことをしましたが、まだやるべきことがたくさんあります。 私たちはデータベースを構築してシードし、モデルとコントローラを作成し、ルーティングテーブルを構築しました。 角度のあるフロントエンドで作業を続けましょう。

Angularファイルを置く場所

この質問は何度も聞かれました。 角度のあるファイルはどこに置くべきですか、LaravelとAngularの作業を一緒に行う方法を教えてください。
Angularがフロントエンドを処理するようにするには、ユーザをindex.phpファイルに誘導するためにLaravelが必要です。 我々はいくつかの異なる場所に置くことができます。 デフォルトでは、以下を使用します。


// app/routes.php
Route::get('/', function() {
return View::make('index');  
});

これはapp / views / index.phpを返します。 Laravelはデフォルトでapp / viewsフォルダを探します。

AngularファイルをLaravelファイルから完全に分離したい人もいます。 彼らはアプリケーション全体をパブリックフォルダに入れたいと思っています。 これは簡単です:既定のビューの場所をパブリックフォルダに設定するだけです。 これは、app / config / view.phpファイルを変更することで行うことができます。


// app/config/view.php
...
// make laravel look in public/views for view files
'paths' => array(__DIR__.'/../../public/views'),
...

View :: make( 'index')を呼び出すと、public / views / index.phpファイルが検索されます。 アプリの整理方法を設定できます。 一部の人々は、Angularアプリケーション全体をパブリックフォルダに置く方が有益だと考えているので、将来的に必要に応じてルーティングを処理し、フロントエンドのRESTful APIを完全に分離することは簡単です。

Angular to routeを行うには、ファイルの一部をパブリックフォルダに配置する必要がありますが、これはこの記事の範囲を超えています。

すべてがデフォルトを使用していると仮定して、メインビューファイルがapp / viewsフォルダにあるとしましょう。

Laravelと角度ルーティングを使用すると、多くの問題が発生する可能性があります。 Laravelは主なルートとしてアプリケーションを制御します。 角度ルーティングは、LaravelがユーザーをAngularメインルート(index.php)に誘導するときにのみ発生します。 だから私たちはLaravelを使ってすべてのルートをコントロールしています。 LaravelはAPIルーティングを処理し、どのようにAngularにルーティングするのかわからないリクエストを送信します。 次に、あなたの角度アプリが異なるビューを扱うためのすべてのルートを設定することができます。

角度のフロントエンド
アプリを準備する

Angularプログラムのすべては、パブリックフォルダで処理されます。 これは、バックエンドアプリケーションフォルダ内のファイルと区別しやすくなります。

パブリックフォルダ内の組織構造を見てみましょう。 これはベストプラクティスなので、モジュラーアンングルプログラムを作成しました。 今、私たちのプログラムの部分は、テストと処理が簡単です。

– 公共/
– js /
—- controllers / //角度コントローラを置く場所
—– mainCtrl.js
—-サービス/ /角度サービス
—– commentService.js
—- app.js

角度サービスpublic / js / services / commentService.js

GoogleのAngularサービスは、HTTP経由でLaravel APIを呼び出すための主要な場所です。 これは非常に簡単で分かりやすく、Angular $ httpサービスを使用しています。


// public/js/services/commentService.js
angular.module('commentService', [])
.factory('Comment', function($http) {
return {
// get all the comments
get : function() {
return $http.get('/api/comments');
},
// save a comment (pass in comment data)
save : function(commentData) {
return $http({
method: 'POST',
url: '/api/comments',
headers: { 'Content-Type' : 'application/x-www-form-urlencoded' },
data: $.param(commentData)
});
},
// destroy a comment
destroy : function(id) {
return $http.delete('/api/comments/' + id);
}
}
});

これはAngularサービスで、3つの異なる機能が含まれています。 これらはLaravelのルーティングAPIに対応するため、必要な機能はこれだけです。

私たちのサービスは約束オブジェクトを返します。 これらはコントローラを処理するために使用されます。 ここでの命名規則は、Laravelコントローラと一貫しています。

Angularサービスを終了しました。コントローラを使い始めてみましょう。

角度コントローラpublic / js / controllers / mainCtrl.js

このコントローラーは、アプリケーションのほとんどの機能を実装します。 ここでは、提出フォームを処理しコメントを削除する関数を作成します。


// public/js/controllers/mainCtrl.js
angular.module('mainCtrl', [])
// 在控制器中诸如Comment服务
.controller('mainController', function($scope, $http, Comment) {
// 持有新评论所有表单数据的对象
$scope.commentData = {};
// 调用显示加载图标的变量
$scope.loading = true;
// 先获取所有的评论,然后绑定它们到$scope.comments对象     // 使用服务中定义的函数
// GET ALL COMMENTS ====================================================
Comment.get()
.success(function(data) {
$scope.comments = data;
$scope.loading = false;
});
// 处理提交表单的函数
// SAVE A COMMENT ======================================================
$scope.submitComment = function() {
$scope.loading = true;
// 保存评论。在表单间传递评论
// 使用在服务中创建的函数
Comment.save($scope.commentData)
.success(function(data) {
// 如果成功,我们需要刷新评论列表
Comment.get()
.success(function(getData) {
$scope.comments = getData;
$scope.loading = false;
});
})
.error(function(data) {
console.log(data);
});
};
// 处理删除评论的函数
// DELETE A COMMENT ====================================================
$scope.deleteComment = function(id) {
$scope.loading = true; 
// 使用在服务中创建的函数
Comment.destroy(id)
.success(function(data) {
// 如果成功,我们需要刷新评论列表
Comment.get()
.success(function(getData) {
$scope.comments = getData;
$scope.loading = false;
});
});
};
});

コントローラで見たように、Commentサービスを注入して、get、save、deleteという主な機能を実装しました。 このようなサービスを使用して、$ http getまたはputでコントローラを汚染させないようにします。

私たちのアプリpublic / js / app.jsに接続してください

Angularでは、サービスとコントローラを作成しました。 ここで、ng-appとng-controllerを使用してアプリケーションに適用できるように接続しましょう。

Angularアプリを作成するためのコードです。 我々は、サービスとコントローラを注入する。 これは、アプリケーションをモジュール化し、さまざまな部分を測定可能かつスケーラビリティにするベストプラクティスアプローチです。


// public/js/app.js
var commentApp = angular.module('commentApp', ['mainCtrl', 'commentService']);

このようにして、多くの作業はありません。 今我々が実際に我々の視点を達成したので、Angularのさまざまな部分がどのように連携しているかを見ることができます。

私たちのメインビューapp / views / index.php

これまでのところ、すべての準備をしても、ブラウザから何も見ることはできません。 Laravelがメインルートを制御しているので、ビューファイルを定義し、View :: make( 'index');を返すようにすべてのルート要求を返す必要があります。

最初にビューを作成しましょう。 作成したすべての角度コンテンツを使用します。 Angularを使用して作成した主要部分は、主にindex.phpで使用するものです。

Ng-appとng-controller:bodyタグに貼り付けて適用する
Ng-repeat:テンプレートにコメントをループで表示する
submitComment():ng-submitを使用してフォームにこの関数をアタッチします
アイコンを読み込む:読み込みという変数を作成します。 trueに設定されている場合は、読み込みアイコンが表示され、コメントが非表示になります
deleteComment():この関数を削除リンクに追加してコメントを削除します

私たちの視点を実装する実際のコードを書きましょう。 主要な重要な部分についてコメントして、すべての仕組みがわかるようにします。


<!- app/views/index.php ->
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Laravel and Angular Comment System</title>
<!- CSS ->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"> <!- load bootstrap via cdn ->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css"> <!- load fontawesome ->
<style>
body     { padding-top:30px; }
form     { padding-bottom:20px; }
.comment   { padding-bottom:20px; }
</style>
<!- JS ->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script> <!- load angular ->
<!- ANGULAR ->
<!- all angular resources will be loaded from the /public folder ->
<script src="js/controllers/mainCtrl.js"></script> <!- load our controller ->
<script src="js/services/commentService.js"></script> <!- load our service ->
<script src="js/app.js"></script> <!- load our application ->
</head>
<!- declare our angular app and controller ->
<body ng-app="commentApp" ng-controller="mainController">
<div class="col-md-8 col-md-offset-2">
<!- PAGE TITLE =============================================== ->
<div>
<h2>Laravel and Angular Single Page Application</h2>
<h4>Commenting System</h4>
</div>
<!- NEW COMMENT FORM =============================================== ->
<form ng-submit="submitComment()"> <!- ng-submit will disable the default form action and use our function ->
<!- AUTHOR ->
<div>
<input type="text" class="form-control input-sm" name="author" ng-model="commentData.author" placeholder="Name">
</div>
<!- COMMENT TEXT ->
<div>
<input type="text" class="form-control input-lg" name="comment" ng-model="commentData.text" placeholder="Say what you have to say">
</div>
<!- SUBMIT BUTTON ->
<div class="form-group text-right">  
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
</div>
</form>
<!- LOADING ICON =============================================== ->
<!- show loading icon if the loading variable is set to true ->
<p ng-show="loading"><span class="fa fa-meh-o fa-5x fa-spin"></span></p>
<!- THE COMMENTS =============================================== ->
<!- hide these comments if the loading variable is true ->
<div ng-hide="loading" ng-repeat="comment in comments">
<h3>Comment #{{ comment.id }} <small>by {{ comment.author }}</h3>
<p>{{ comment.text }}</p>
<p><a href="#" ng-click="deleteComment(comment.id)">Delete</a></p>
</div>
</div>
</body>
</html>

Https://photo.yuedy.com/wp-content/uploads/2018/07/20180714202850-5b4a5d02c03db.jpg(811×705)

今私たちは最終的に、作成されたすべての部品を組み合わせて、私たちの視点を実現しました。 このアプリを試すことができます。 すべてのコンポーネントをうまく組み合わせ、コメントの作成と削除でページを更新する必要はありません。

テスト

Github repoアプリケーションをテストしたことを確認してください。

コピーレポ:gitクローン[電子メール保護] :scotch-io / laravel-angular-comment-app
Laravelをインストールする:composer install -prefer-dist
データベース接続を変更するinapp / config / database.php
データ移行データベース:php artisan migrate
良いシードデータベースを作る:php artisan db:seed
あなたのアプリをブラウズ!

結論

これまで、この記事ではLaravelとAngularの導入に役立ちました。さらに多くのAPIを使用するLaravelアプリケーションを作成し、独自の角度ルーティングを作成することもできます。


1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...
      この投稿は審査処理中  | 元のサイトへ