目前，Laravel和Angular均已經(jīng)成為了Web發(fā)展世界里非常著名的工具。Laravel以給PHP社區(qū)引入的偉大內(nèi)容著稱，Angular以其驚人的前端工具及簡單著稱。組合這兩大框架似乎是合乎邏輯的下一步。

在我們的使用環(huán)境下，我們將使用Laravel作為后端的RESTful API，Angular作為前端，以創(chuàng)建一個(gè)簡單的單頁的評論應(yīng)用。

下面是一個(gè)簡單的例子，展示了如何開始使用這兩種技術(shù)，所以不用害怕什么額外的數(shù)據(jù)庫性的東西、如何處理子評論什么的。

我們將創(chuàng)建什么

這將是一個(gè)簡單的單頁評論應(yīng)用程序：

總體上，這些都是非常簡單的概念。我們重點(diǎn)是關(guān)注Laravel與Angular如何一起協(xié)作的錯(cuò)綜復(fù)雜關(guān)系。

Laravel后端
設(shè)置Laravel

繼續(xù)設(shè)置好你的Laravel，我們將做一些基礎(chǔ)工作使我們的后端實(shí)現(xiàn)評論的增刪改查：

準(zhǔn)備數(shù)據(jù)庫遷移

我們要一個(gè)簡單的、存儲評論的結(jié)構(gòu)體，只需要包括內(nèi)容和作者。讓我們創(chuàng)建Laravel遷移來創(chuàng)建評論。

我們來運(yùn)行artisan命令創(chuàng)建評論遷移，這樣就可以在我們的數(shù)據(jù)庫里建立評論表：

 php artisan migrate:make create_comments_table --create=comments

我們將使用Laravel模式構(gòu)建器創(chuàng)建所需的“內(nèi)容”和“作者”域。Laravel也會(huì)創(chuàng)建id和timestamps列，這樣我們可以知道這條評論是什么時(shí)候添加的。以下是評論表的代碼：

// 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”文件中用正確的憑證調(diào)整了數(shù)據(jù)庫設(shè)置。現(xiàn)在我們運(yùn)行遷移，這樣就能用所需的列創(chuàng)建這張表：

 php artisan migrate

評論模型

我們將用Laravel Eloquent模型與數(shù)據(jù)庫進(jìn)行交互。這很容易做到，讓我們來創(chuàng)建一個(gè)模型：“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'); 
}

現(xiàn)在有了表和模型，讓我們通過Laravel Seeding向表中添加一個(gè)樣本數(shù)據(jù)。
播種數(shù)據(jù)庫

我們需要一些評論來測試幾件事。讓我們創(chuàng)建一個(gè)種子文件并插入三個(gè)樣本評論到數(shù)據(jù)庫。

創(chuàng)建一個(gè)文件：“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.'
 ));
 }
 
}

要調(diào)用這個(gè)播種機(jī)文件，我們要修改“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.');
 }
 
...

現(xiàn)在我們通過artisan命令來運(yùn)行我們的播種機(jī)。

 php artisan db:seed

現(xiàn)在我們擁有一個(gè)包含評論表的數(shù)據(jù)庫、一個(gè)Eloquent模型和一些數(shù)據(jù)庫樣本。一天的工作還不算糟。。但我們還遠(yuǎn)沒有結(jié)束。

評論資源控制器（app/controllers/CommentController.php）

我們將使用Laravel資源控制器處理評論的API函數(shù)。因?yàn)槭褂肁ngular顯示一個(gè)資源以及創(chuàng)建和更新表單，在沒有創(chuàng)建和編輯函數(shù)的情況下，我們將通過artisan命令創(chuàng)建一個(gè)資源控制器。

讓我們用artisan創(chuàng)建資源控制器。

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

對于示例應(yīng)用，我們只會(huì)在資源控制器中使用這三個(gè)函數(shù)。為了擴(kuò)展，你要包含所有的諸如更新、顯示等函數(shù)，來實(shí)現(xiàn)一個(gè)更成熟的應(yīng)用。

我們已經(jīng)創(chuàng)建了控制器，就不需要?jiǎng)?chuàng)建和編輯函數(shù)啦，因?yàn)锳ngular，而不是Laravel會(huì)處理顯示表單的工作。Laravel只負(fù)責(zé)把數(shù)據(jù)返回給前端。只為了想讓事情簡單化，我們也從實(shí)例應(yīng)用提出了更新函數(shù)。我們將處理創(chuàng)建、顯示和刪除評論。

要回傳數(shù)據(jù)，我們想以JSON形式返回?cái)?shù)據(jù)。我們來瀏覽一下新建的控制器并添加相應(yīng)的函數(shù)。

<?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處理增刪改查多么容易。處理我們所需的函數(shù)簡直難以置信的簡單。

隨著控制器的準(zhǔn)備完成，我們后端最后要做的一件事就是路由。

我們的路由表（app/routes.php）

隨著數(shù)據(jù)庫的準(zhǔn)備就緒，我們來處理Laravel應(yīng)用的路由表吧。既然它有自己的路由，我們將會(huì)用到路由表發(fā)送數(shù)據(jù)給前端。我們也要給后臺API提供路由表，從而可以讓人訪問我們的評論數(shù)據(jù)。

讓我們創(chuàng)建Angular指向路由表。我們需要一個(gè)主頁路由表和一個(gè)發(fā)送用戶給Angular的“全部獲取”路由表。這保證了用戶無論怎樣都能訪問我們的網(wǎng)站，它們會(huì)被路由到Angular前端。

我們將以...（請擊鼓)...api作為API路由表前綴。通過這種方式，如果有人想獲取所有的評論，他們將使用URL：http://example.com/api/comments 。這只是有意義的前進(jìn)和一些基礎(chǔ)API創(chuàng)建的好策略。

<?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');
});

我們現(xiàn)在有路由表來處理Laravel要做的三件主要事情。

處理“全部獲取”路由表：在Laravel里，你可以用幾種方式實(shí)現(xiàn)這個(gè)。通常，用以上代碼并得到整個(gè)應(yīng)用的“全部獲取”不太理想。另一種選擇是，你可以使用Laravel控制器的丟失方法來獲取路由表。

測試所有的路由表 讓我們確保所需的路由表都有了。我們會(huì)用到artisan查看所有的路由表：

 php artisan routes

這個(gè)命令讓我們看到所有的路由表以及一個(gè)自上而下的應(yīng)用視圖。

從上圖我們能看到HTTP動(dòng)詞和獲取所有評論，獲取、創(chuàng)建和銷毀一條評論的路由表。在API路由表的頂部，可以看到一個(gè)用戶如何通過主頁路由表路由到Angular的。

后臺完成

終于！我們Laravel API的后臺也完成了。我們已經(jīng)做了很多，但還有很多工作要做。我們已經(jīng)建立并播種了數(shù)據(jù)庫，創(chuàng)建了模型和控制器，也建好了路由表。我們來繼續(xù)完成Angular前端的工作。

將Angular文件放在哪

我看到這個(gè)問題很多次被問到了。我到底應(yīng)該把Angular文件放在哪呢，還有如何使Laravel和Angular一起工作。
讓Angular來處理前端，我們需要Laravel將用戶導(dǎo)向到index.php文件。我們可以把它放在幾個(gè)不同的地方。默認(rèn)情況下，當(dāng)你使用：

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

這將返回app/views/index.php。Laravel默認(rèn)情況下將在app/views文件夾查找。

一些人想要將Angular文件和Laravel 文件完全分開。他們想要讓他們的整個(gè)應(yīng)用程序放在public文件夾中。這樣做很簡單：只需要將默認(rèn)的View的位置設(shè)置為public文件夾即可。可以通過修改app/config/view.php文件來完成設(shè)置。

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

現(xiàn)在，return View::make('index') 將會(huì)查找public/views/index.php文件。你完全可以配置你想如何組織你的app。一些人認(rèn)為將整個(gè)Angular應(yīng)用程序放在public文件夾中好處比較多，這樣可以很容易的處理路由并且如果將來有需要的話，可以完全的將后端的RESTful API 和前端的Angular區(qū)分開來。

為了Angular能進(jìn)行路由，那么你的部分文件需被放置在public 文件夾中，但是這已經(jīng)超出了本文的范圍。

讓我們假設(shè)所有東西都使用默認(rèn)，并且我們的主視圖文件是在我們的app/ views 文件夾下，然后我們繼續(xù)。

使用Laravel和Angular 路由 如果使用Laravel和Angular 路由時(shí)沖突了，會(huì)導(dǎo)致很多的問題。Laravel將作為主路由掌控你的應(yīng)用程序。Angular 路由只會(huì)發(fā)生在， 當(dāng)Laravel路由我們的用戶， 到Angular主路由（index.php）這種情況。 這就是為什么我們使用Laravel掌控所有的路由。Laravel將處理API路由和將任意不知如何路由的請求發(fā)送到Angular。然后，你可以為你的Angular 應(yīng)用設(shè)置所有的路由來處理出不同的視圖。

前端的Angular
準(zhǔn)備我們的應(yīng)用程序

我們的Angular程序中的每一件事都要在public文件夾中處理。這可以有助于我們將它和后端的app文件夾中的文件很好的區(qū)分開來。

讓我們看一下我們的public文件夾中的組織結(jié)構(gòu)。我們創(chuàng)建了模塊化的Angular程序，因?yàn)檫@是最佳實(shí)踐。現(xiàn)在，我們程序分成的各個(gè)部分很容易進(jìn)行測試和處理。

Angular Service public/js/services/commentService.js

我們的Angular service是我們通過HTTP調(diào)用Laravel API 的一個(gè)主要的位置。它非常的簡明易懂，我們使用了 Angular $http service.

這就是我們的Angular service，包含了3個(gè)不同的函數(shù)。這些是我們唯一所需要的函數(shù)，因?yàn)樗鼈儗?huì)和我們Laravel中的路由api相對應(yīng)。

我們的service將會(huì)返回一個(gè)promise對象。這些將會(huì)用來處理我們的控制器。這里的命名約定同樣也和我們的Laravel控制器保持一致。

完成了我們的Angular service，讓我們開始著手我們的控制器并使用它。

Angular控制器public/js/controllers/mainCtrl.js

該控制器實(shí)現(xiàn)了我們應(yīng)用的絕大部分功能。我們在這里面創(chuàng)建處理提交表單和刪除評論的函數(shù)。

正如你在控制器中看到的，我們已經(jīng)注入了Comment服務(wù)并使用它來實(shí)現(xiàn)主要的功能：獲得，保存以及刪除。使用這樣的服務(wù)避免用$http get或put來污染我們的控制器。

連接到我們的應(yīng)用public/js/app.js

在Angular方面，我們已經(jīng)創(chuàng)建了服務(wù)和控制器。現(xiàn)在讓我們將一起連接起來，這樣我們可以使用ng-app和ng-controller將它應(yīng)用到我們的應(yīng)用中。

這就是創(chuàng)建Angular應(yīng)用的代碼。我們將把服務(wù)和控制器注入。這是最佳實(shí)踐的做法，這能夠使我們的應(yīng)用程序模塊化，且各個(gè)不同部分都是可測可擴(kuò)展的。

就這樣，沒有太多工作。現(xiàn)在我們切實(shí)實(shí)現(xiàn)了我們的觀點(diǎn)，我們可以看Angular的各部分是如何一起工作的。

我們的主視圖app/views/index.php

到目前為止，在做完一切準(zhǔn)備工作后，我們?nèi)匀徊荒軓臑g覽器中看到任何內(nèi)容。因?yàn)長aravel控制著我們的主路由，我們需要定義我們的視圖文件，且將所有路由請求返回return View::make('index');。

讓我們先創(chuàng)建視圖。我們將使用我們已創(chuàng)建的所有Angular內(nèi)容。我們已已使用Angular創(chuàng)建的主要部分將是我們將在index.php中主要使用的部件：

現(xiàn)在讓我們來寫實(shí)現(xiàn)我們觀點(diǎn)的實(shí)際代碼。我們將對主要重要的部分做注釋，這樣我們就能夠看到一切是如何正常工作的。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

使用AngularJS和PHP的Laravel實(shí)現(xiàn)單頁評論的方法_AngularJS

使用AngularJS和PHP的Laravel實(shí)現(xiàn)單頁評論的方法_AngularJS:完整代碼：https://github.com/scotch-io/laravel-angular-comment-app 目前，Laravel和Angular均已經(jīng)成為了Web發(fā)展世界里非常著名的工具。Laravel以給PHP社區(qū)引入的偉大內(nèi)容著稱，Angular以其驚人的前端工具及簡單著稱。組合這兩大框架似乎是合乎邏輯

推薦度：

點(diǎn)擊下載本文 文檔為doc格式