自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

使用Laravel和Angular創(chuàng)建一個(gè)單頁(yè)的評(píng)論應(yīng)用

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

完整代碼:https://github.com/scotch-io/laravel-angular-comment-app

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

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

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

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

這將是一個(gè)簡(jiǎn)單的單頁(yè)評(píng)論應(yīng)用程序:

  • RESTful Laravel API處理獲取、創(chuàng)建和刪除評(píng)論;

  • Angular前端負(fù)責(zé)顯示我們創(chuàng)建的表單和評(píng)論;

  • 能夠新建評(píng)論并把它添加到我們的W/O頁(yè)面刷新列表;

  • 能夠刪除評(píng)論并把它從W/O頁(yè)面刷新列表移除。

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

laravel-angular-single-page-application 

Laravel后端

設(shè)置Laravel

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

  • 創(chuàng)建一個(gè)數(shù)據(jù)庫(kù)遷移

  • 將樣本評(píng)論植入數(shù)據(jù)庫(kù)

  • 為我們的API創(chuàng)建路由表

  • 創(chuàng)建一個(gè)“全部獲取”路由表讓Angular出來路由

  • 為評(píng)論創(chuàng)建一個(gè)資源控制器

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

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

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

    php artisan migrate:make create_comments_table --create=comments

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

  1. // app/database/migrations/####_##_##_######_create_comments_table.php  
  2. ...  
  3.  
  4.     /**  
  5.      * Run the migrations.  
  6.      *  
  7.      * @return void  
  8.      */ 
  9.     public function up()  
  10.     {  
  11.         Schema::create('comments', function(Blueprint $table)  
  12.         {  
  13.             $table->increments('id');  
  14.  
  15.             $table->string('text');  
  16.             $table->string('author');  
  17.  
  18.             $table->timestamps();  
  19.         });  
  20.     }  
  21. ...  

確定你在“app/config/database.php”文件中用正確的憑證調(diào)整了數(shù)據(jù)庫(kù)設(shè)置?,F(xiàn)在我們運(yùn)行遷移,這樣就能用所需的列創(chuàng)建這張表:

   php artisan migrate

laravel-angular-migrate 

評(píng)論模型

我們將用Laravel Eloquent模型與數(shù)據(jù)庫(kù)進(jìn)行交互。這很容易做到,讓我們來創(chuàng)建一個(gè)模型:“app/models/Comment.php”:

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

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

播種數(shù)據(jù)庫(kù)

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

創(chuàng)建一個(gè)文件:“app/database/seeds/CommentTableSeeder.php”,并添加以下代碼:

  1. <?php  
  2. // app/database/seeds/CommentTableSeeder.php  
  3.  
  4. class CommentTableSeeder extends Seeder   
  5. {  
  6.  
  7.     public function run()  
  8.     {  
  9.         DB::table('comments')->delete();  
  10.  
  11.         Comment::create(array(  
  12.             'author' => 'Chris Sevilleja',  
  13.             'text' => 'Look I am a test comment.' 
  14.         ));  
  15.  
  16.         Comment::create(array(  
  17.             'author' => 'Nick Cerminara',  
  18.             'text' => 'This is going to be super crazy.' 
  19.         ));  
  20.  
  21.         Comment::create(array(  
  22.             'author' => 'Holly Lloyd',  
  23.             'text' => 'I am a master of Laravel and Angular.' 
  24.         ));  
  25.     }  
  26.  
  27. }  

要調(diào)用這個(gè)播種機(jī)文件,我們要修改“app/database/seeds/DatabaseSeeder.php”并添加以下代碼:

  1. // app/database/seeds/DatabaseSeeder.php  
  2.  
  3.  
  4. /**  
  5.  * Run the database seeds.  
  6.  *  
  7.  * @return void  
  8.  */ 
  9. public function run()  
  10. {  
  11.     Eloquent::unguard();  
  12.  
  13.     $this->call('CommentTableSeeder');  
  14.     $this->command->info('Comment table seeded.');  
  15. }  

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

  php artisan db:seed

laravel-angular-database-seed

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

#p#

評(píng)論資源控制器(app/controllers/CommentController.php)

我們將使用Laravel資源控制器處理評(píng)論的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

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

laravel-angular-create-controller

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

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

  1. <?php  
  2. // app/controllers/CommentController.php  
  3.  
  4. class CommentController extends \BaseController {  
  5.  
  6.     /**  
  7.      * Send back all comments as JSON  
  8.      *  
  9.      * @return Response  
  10.      */ 
  11.     public function index()  
  12.     {  
  13.         return Response::json(Comment::get());  
  14.     }  
  15.  
  16.     /**  
  17.      * Store a newly created resource in storage.  
  18.      *  
  19.      * @return Response  
  20.      */ 
  21.     public function store()  
  22.     {  
  23.         Comment::create(array(  
  24.             'author' => Input::get('author'),  
  25.             'text' => Input::get('text')  
  26.         ));  
  27.  
  28.         return Response::json(array('success' => true));  
  29.     }  
  30.  
  31.     /**  
  32.      * Remove the specified resource from storage.  
  33.      *  
  34.      * @param  int  $id  
  35.      * @return Response  
  36.      */ 
  37.     public function destroy($id)  
  38.     {  
  39.         Comment::destroy($id);  
  40.  
  41.         return Response::json(array('success' => true));  
  42.     }  
  43.  
  44. }  

你可以看到用Laravel和Eloquent處理增刪改查多么容易。處理我們所需的函數(shù)簡(jiǎn)直難以置信的簡(jiǎn)單。

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

補(bǔ)充閱讀:Simple Laravel CRUD with Resource Controllers

我們的路由表(app/routes.php)

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

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

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

  1. <?php  
  2. // app/routes.php  
  3.  
  4. // =============================================  
  5. // HOME PAGE ===================================  
  6. // =============================================  
  7. Route::get('/'function()  
  8. {  
  9.     // we dont need to use Laravel Blade  
  10.     // we will return a PHP file that will hold all of our Angular content  
  11.     // see the "Where to Place Angular Files" below to see ideas on how to structure your app  
  12.     return View::make('index'); // will return app/views/index.php  
  13. });  
  14.  
  15. // =============================================  
  16. // API ROUTES ==================================  
  17. // =============================================  
  18. Route::group(array('prefix' => 'api'), function() {  
  19.  
  20.     // since we will be using this just for CRUD, we won't need create and edit  
  21.     // Angular will handle both of those forms  
  22.     // this ensures that a user can't access api/create or api/edit when there's nothing there  
  23.     Route::resource('comments''CommentController',   
  24.         array('only' => array('index''store''destroy')));  
  25. });  
  26.  
  27. // =============================================  
  28. // CATCH ALL ROUTE =============================  
  29. // =============================================  
  30. // all routes that are not home or api will be redirected to the frontend  
  31. // this allows angular to route them  
  32. App::missing(function($exception)  
  33. {  
  34.     return View::make('index');  
  35. });  

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

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

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

   php artisan routes

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

laravel-angular-artisan-routes

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

后臺(tái)完成

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

將Angular文件放在哪

我看到這個(gè)問題很多次被問到了。我到底應(yīng)該把Angular文件放在哪呢,還有如何使Laravel和Angular一起工作。這有一篇文章講怎樣使Laravel Blade和Angular一起工作。本文假設(shè)我們從未使用過Blade。

讓Angular來處理前端,我們需要Laravel將用戶導(dǎo)向到index.php文件。我們可以把它放在幾個(gè)不同的地方。默認(rèn)情況下,當(dāng)你使用:

  1. // app/routes.php  
  2. Route::get('/'function() {  
  3.  
  4.     return View::make('index');      
  5.  
  6. });  

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

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

  1. // app/config/view.php  
  2. ...  
  3.       
  4.     // make laravel look in public/views for view files  
  5.     'paths' => array(__DIR__.'/../../public/views'),  
  6.  
  7. ...  

現(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)超出了本文的范圍。 如果你需更多單頁(yè)Angular 路由的信息,請(qǐng)查看  單頁(yè)Angular 應(yī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è)置所有的路由來處理出不同的視圖。

#p#

前端的Angular

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

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

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

  1. public/  
  2. ----- js/  
  3. ---------- controllers/                // where we will put our angular controllers  
  4. --------------- mainCtrl.js   
  5. ---------- services/                 // angular services  
  6. --------------- commentService.js   
  7. ---------- app.js 

Angular Service public/js/services/commentService.js

  1. // public/js/services/commentService.js  
  2. angular.module('commentService', [])  
  3.  
  4.     .factory('Comment'function($http) {  
  5.  
  6.         return {  
  7.             // get all the comments  
  8.             get : function() {  
  9.                 return $http.get('/api/comments');  
  10.             },  
  11.  
  12.             // save a comment (pass in comment data)  
  13.             save : function(commentData) {  
  14.                 return $http({  
  15.                     method: 'POST',  
  16.                     url: '/api/comments',  
  17.                     headers: { 'Content-Type' : 'application/x-www-form-urlencoded' },  
  18.                     data: $.param(commentData)  
  19.                 });  
  20.             },  
  21.  
  22.             // destroy a comment  
  23.             destroy : function(id) {  
  24.                 return $http.delete('/api/comments/' + id);  
  25.             }  
  26.         }  
  27.  
  28.     });  

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

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

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

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

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

  1. // public/js/controllers/mainCtrl.js  
  2. angular.module('mainCtrl', [])  
  3.  
  4.     // 在控制器中諸如Comment服務(wù)  
  5.     .controller('mainController'function($scope$http, Comment) {  
  6.         // 持有新評(píng)論所有表單數(shù)據(jù)的對(duì)象  
  7.         $scope.commentData = {};  
  8.  
  9.         // 調(diào)用顯示加載圖標(biāo)的變量  
  10.         $scope.loading = true;  
  11.  
  12.         // 先獲取所有的評(píng)論,然后綁定它們到$scope.comments對(duì)象         // 使用服務(wù)中定義的函數(shù)  
  13.         // GET ALL COMMENTS ====================================================  
  14.         Comment.get()  
  15.             .success(function(data) {  
  16.                 $scope.comments = data;  
  17.                 $scope.loading = false;  
  18.             });  
  19.  
  20.         // 處理提交表單的函數(shù)  
  21.         // SAVE A COMMENT ======================================================  
  22.         $scope.submitComment = function() {  
  23.             $scope.loading = true;  
  24.  
  25.             // 保存評(píng)論。在表單間傳遞評(píng)論  
  26.             // 使用在服務(wù)中創(chuàng)建的函數(shù)  
  27.             Comment.save($scope.commentData)  
  28.                 .success(function(data) {  
  29.  
  30.                     // 如果成功,我們需要刷新評(píng)論列表  
  31.                     Comment.get()  
  32.                         .success(function(getData) {  
  33.                             $scope.comments = getData;  
  34.                             $scope.loading = false;  
  35.                         });  
  36.  
  37.                 })  
  38.                 .error(function(data) {  
  39.                     console.log(data);  
  40.                 });  
  41.         };  
  42.  
  43.         // 處理刪除評(píng)論的函數(shù)  
  44.         // DELETE A COMMENT ====================================================  
  45.         $scope.deleteComment = function(id) {  
  46.             $scope.loading = true;   
  47.  
  48.             // 使用在服務(wù)中創(chuàng)建的函數(shù)  
  49.             Comment.destroy(id)  
  50.                 .success(function(data) {  
  51.  
  52.                     // 如果成功,我們需要刷新評(píng)論列表  
  53.                     Comment.get()  
  54.                         .success(function(getData) {  
  55.                             $scope.comments = getData;  
  56.                             $scope.loading = false;  
  57.                         });  
  58.  
  59.                 });  
  60.         };  
  61.  
  62.     });  

正如你在控制器中看到的,我們已經(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è)不同部分都是可測(cè)可擴(kuò)展的。

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

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

#p#

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

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

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

  • ng-app和ng-controller:通過將它們附加到body標(biāo)簽上來應(yīng)用它們

  • ng-repeat:通過循環(huán)將評(píng)論顯示到模板中

  • submitComment():使用ng-submit將這個(gè)函數(shù)附加到表單上

  • Loading Icons:我們將創(chuàng)建一個(gè)稱作loading的變量。如果它被設(shè)為true,我們將顯示一個(gè)加載圖標(biāo)并隱藏評(píng)論

  • deleteComment():我們將附加這個(gè)函數(shù)到一個(gè)刪除鏈接,以便我們刪除評(píng)論

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

  1. <!-- app/views/index.php -->  
  2. <!doctype html>  
  3. <html>  
  4. <head>  
  5.     <meta charset="UTF-8">  
  6.     <title>Laravel and Angular Comment System</title>  
  7.  
  8.     <!-- CSS -->  
  9.     <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"> <!-- load bootstrap via cdn -->  
  10.     <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css"> <!-- load fontawesome -->  
  11.     <style>  
  12.         body         { padding-top:30px; }  
  13.         form         { padding-bottom:20px; }  
  14.         .comment     { padding-bottom:20px; }  
  15.     </style>  
  16.  
  17.     <!-- JS -->  
  18.     <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>  
  19.     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script> <!-- load angular -->  
  20.  
  21.     <!-- ANGULAR -->  
  22.     <!-- all angular resources will be loaded from the /public folder -->  
  23.         <script src="js/controllers/mainCtrl.js"></script> <!-- load our controller -->  
  24.         <script src="js/services/commentService.js"></script> <!-- load our service -->  
  25.         <script src="js/app.js"></script> <!-- load our application -->  
  26.  
  27. </head>  
  28. <!-- declare our angular app and controller -->  
  29. <body ng-app="commentApp" ng-controller="mainController">  
  30. <div class="col-md-8 col-md-offset-2">  
  31.  
  32.     <!-- PAGE TITLE =============================================== -->  
  33.     <div>  
  34.         <h2>Laravel and Angular Single Page Application</h2>  
  35.         <h4>Commenting System</h4>  
  36.     </div>  
  37.  
  38.     <!-- NEW COMMENT FORM =============================================== -->  
  39.     <form ng-submit="submitComment()"> <!-- ng-submit will disable the default form action and use our function -->  
  40.  
  41.         <!-- AUTHOR -->  
  42.         <div>  
  43.             <input type="text" class="form-control input-sm" name="author" ng-model="commentData.author" placeholder="Name">  
  44.         </div>  
  45.  
  46.         <!-- COMMENT TEXT -->  
  47.         <div>  
  48.             <input type="text" class="form-control input-lg" name="comment" ng-model="commentData.text" placeholder="Say what you have to say">  
  49.         </div>  
  50.           
  51.         <!-- SUBMIT BUTTON -->  
  52.         <div class="form-group text-right">      
  53.             <button type="submit" class="btn btn-primary btn-lg">Submit</button>  
  54.         </div>  
  55.     </form>  
  56.  
  57.     <!-- LOADING ICON =============================================== -->  
  58.     <!-- show loading icon if the loading variable is set to true -->  
  59.     <p ng-show="loading"><span class="fa fa-meh-o fa-5x fa-spin"></span></p>  
  60.  
  61.     <!-- THE COMMENTS =============================================== -->  
  62.     <!-- hide these comments if the loading variable is true -->  
  63.     <div ng-hide="loading" ng-repeat="comment in comments">  
  64.         <h3>Comment #{{ comment.id }} <small>by {{ comment.author }}</h3>  
  65.         <p>{{ comment.text }}</p>  
  66.  
  67.         <p><a href="#" ng-click="deleteComment(comment.id)">Delete</a></p>  
  68.     </div>  
  69.  
  70. </div>  
  71. </body>  
  72. </html>  

laravel-angular-single-page-application

現(xiàn)在我們終于實(shí)現(xiàn)了我們的觀點(diǎn),將所有已創(chuàng)造的部分組合了起來。你可以去試玩一下這個(gè)應(yīng)用。所有部件都應(yīng)很好地結(jié)合在一起,評(píng)論的創(chuàng)建和刪除也應(yīng)該不用刷新頁(yè)面。

測(cè)試

確保你測(cè)試了 Github repo 的應(yīng)用.下面是做好這一過程的步驟

  1. 復(fù)制 repo:git clone git@github.com:scotch-io/laravel-angular-comment-app

  2. 安裝Laravel:composer install --prefer-dist

  3. 修改數(shù)據(jù)庫(kù)連接 inapp/config/database.php

  4. 數(shù)據(jù)遷移 database:php artisan migrate

  5. 打好種子 database:php artisan db:seed

  6. 瀏覽你的應(yīng)用!

結(jié)論

以往本文在介紹使用 Laravel 和Angular上為你提供了幫助. 你可以在此基礎(chǔ)上創(chuàng)建使用更多API的 Laravel 應(yīng)用, 甚至創(chuàng)建自己的 Angular routing .

如果有什么提議請(qǐng)告知. 我們會(huì)及時(shí)更新這篇文章.

英文原文:Create a Laravel and Angular Single Page Comment Application

譯文來自:http://www.oschina.net/translate/create-a-laravel-and-angular-single-page-comment-application

責(zé)任編輯:林師授 來源: 開源中國(guó)社區(qū) 編譯
相關(guān)推薦

2014-09-09 10:49:59

AngularJS單頁(yè)應(yīng)用

2016-11-01 21:02:47

javascriptreact.jsreact-route

2022-02-18 08:43:19

Spring Boo應(yīng)用程序RabbitMQ

2018-08-26 22:39:08

單頁(yè)應(yīng)用HATEOAS

2011-05-11 10:58:39

iOS

2023-05-10 08:05:41

GoWeb應(yīng)用

2012-04-19 17:42:46

Titanium布局

2014-09-19 10:54:47

用戶體驗(yàn)單頁(yè)面

2017-09-18 09:03:36

線程安全單例

2019-07-16 16:05:51

PythonScribusRGB

2020-09-01 20:53:26

DocsifyGitHub Page文檔網(wǎng)站

2011-03-15 19:45:27

Windows Azu

2017-09-18 09:17:07

線程安全單例

2023-11-03 11:57:04

2015-05-27 07:44:34

日歷控件 jQueryCSS3

2010-08-13 13:05:30

Flex應(yīng)用程序

2018-11-14 19:00:24

PythonRedis共享單車

2023-03-30 13:22:45

nginxweb服務(wù)器

2017-08-08 14:15:24

2009-08-19 04:14:00

線性鏈表
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)