// 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服务并使用它来实现主要的功能：获得，保存以及删除。使用这样的服务避免用$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控制着我们的主路由，我们需要定义我们的视图文件，且将所有路由请求返回return View::make('index');。
让我们先创建视图。我们将使用我们已创建的所有Angular内容。我们已已使用Angular创建的主要部分将是我们将在index.php中主要使用的部件：
ng-app和ng-controller：通过将它们附加到body标签上来应用它们
ng-repeat：通过循环将评论显示到模板中
submitComment()：使用ng-submit将这个函数附加到表单上
Loading Icons：我们将创建一个称作loading的变量。如果它被设为true，我们将显示一个加载图标并隐藏评论
deleteComment()：我们将附加这个函数到一个删除链接，以便我们删除评论
现在让我们来写实现我们观点的实际代码。我们将对主要重要的部分做注释，这样我们就能够看到一切是如何正常工作的。
<!-- app/views/index.php --> <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Laravel and Angular Comment System</title> <!-- CSS --> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"> <!-- load bootstrap via cdn --> <link href="https://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="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script src="https://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="https://www.jb51.net/js/controllers/mainCtrl.js"></script> <!-- load our controller --> <script src="https://www.jb51.net/js/services/commentService.js"></script> <!-- load our service --> <script src="https://www.jb51.net/js/app.js"></script> <!-- load our application --> </head> <!-- declare our angular app and controller --> <body ng-app="commentApp" ng-controller="mainController"> <div> <!-- 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" ng-model="commentData.author" placeholder="Name"> </div> <!-- COMMENT TEXT --> <div> <input type="text" ng-model="commentData.text" placeholder="Say what you have to say"> </div> <!-- SUBMIT BUTTON --> <div> <button type="submit">Submit</button> </div> </form> <!-- LOADING ICON =============================================== --> <!-- show loading icon if the loading variable is set to true --> <p ng-show="loading"><span></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>
