【问题标题】:Laravel and AngularJS views structureLaravel 和 AngularJS 视图结构
【发布时间】:2016-07-22 04:37:07
【问题描述】:

我最近开始研究 angularjs,对我的新项目有很大帮助,但我坚持使用视图结构部分。

所以我真正不明白的是,如何构建它。 如果我创建 html 角度部分而不创建 laravel 视图可以吗,所以 laravel 只会处理数据库 instert fecth edit delete,而角度部分视图将处理结果显示和表单。

所以我的壮举看起来像这样。 我的资产文件夹

/css
/img
/js
 /lib
 /partials
         /home
             index.html
         /users
             users.html
             details.html

并为他们创建restful controllers 上面列出的句柄

或者,如果有人可以向我展示一个基本的例子,只是控制器和视图部分,如何构建一个显示结果的单个页面,以及一个通过 id 抓取的页面,我将不胜感激。

谢谢

【问题讨论】:

    标签: angularjs laravel


    【解决方案1】:

    当你开始一个 Laravel 和 AngularJS 项目时,你负责后端和前端。基本上你有 3 个选项。

    1. 将整个应用程序保存在同一个文件夹中,并将 angularjs 内容保存在公用文件夹中。
    2. 将整个应用保存在同一个文件夹中,AngularJS 视图保存在 laravel 视图文件夹中。
    3. 完全分离后端和前端。

    第一个和第二个选项是最简单的,如果您有一个中小型应用程序,也可以。在这种情况下,只需将所有 AngularJS 文件保存在 public 文件夹中,或者如果您选择将它们与 laravel 视图混合,只需删除 .blade 扩展名(或更改 laravel Blade/angularjs 模板语法)

    我认为在做一个 SPA 应用程序时最好保持后端尽可能安静,关键是将逻辑推送到浏览器,这意味着如果你将 php 和 js 混合太多,你的应用程序可能会变得一团糟。

    文件夹结构完全由您决定,您选择什么选项都没有关系。但一个好的开始是将您的应用程序分成逻辑部分。

    /app
        application.js
        /partials
             user.html
             login.html
             etc.html
        /vendor
             Angular.js
             Lodash.js
             Etc.js
        /controllers
             User.js
             Etc.js
        /directives
             Charts.js
             Etc.js
        /filters
             Custom.js
             Etc.js
        /services
             Backend.js
             Etc.js
    

    您还可以查看this 以获得良好的 angularjs 样式指南。

    以上是一个基本的文件夹结构,你可以根据自己的喜好自定义它。如果您有一个小型应用程序,您可以删除文件夹并只使用 controllers.js directives.js and services.js (etc) 并将所有 javascript 保存在同一个文件中。这完全取决于你。当应用程序增长时分离,并始终重构。

    如果您选择第三个选项,您将不得不稍微自定义后端。这可能是最难的选择,但它也为您提供了极大的灵活性。基本上,您可以将 laravel 放在一起,并在 node.js 中构建后端,或者使用 laravel 作为另一个用 Ember.js 编写的 SPA 应用程序的后端,而无需对代码进行任何更改。请注意,如果您选择此选项,您将无法使用一些 laravel 的东西,例如刀片模板。您还必须为 CORS 设置您的 laravel 应用程序,请注意,在安全性方面可能需要更多编码,例如 CSRF 令牌等。

    在将您的应用程序投入生产时,您可以使用构建工具将您的前端应用程序最小化并合并到一个文件中。结帐ng-min 进行缩小。

    【讨论】:

    • 您可能希望使用 angulars $http 服务进行 AJAX 调用,并避免所有 $apply-ing。
    • 没错,对于任何更大的东西,使用 $http 或 $resource,甚至是 Restangular。
    【解决方案2】:

    这是我正在进行的项目之一。您可以看到我在 Angular js 中如何获得部分视图。如上所述,您无需将视图文件放在公共文件夹中。

    https://github.com/naveensky/wm-demo-tracker

    【讨论】:

    • 在你的项目中,如何用AngularJS调用Blade模板?因为 Angular 会在公共文件夹而不是 app 文件夹中查找它。
    猜你喜欢
    • 2013-06-26
    • 1970-01-01
    • 2013-08-27
    • 2015-07-08
    • 1970-01-01
    • 1970-01-01
    • 2015-06-26
    • 2017-06-07
    • 2016-12-22
    相关资源
    最近更新 更多