Laravel 和 AngularJS 视图结构

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14606382/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-09-14 07:32:07  来源:igfitidea点击:

Laravel and AngularJS views structure

angularjslaravel

提问by Side

I recently started to digg in to angularjs, and would help me a lot with my new project, but im stucked with the view structure part.

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

So what i dont really understand is, how to build it up. Is it okay if i create html angular partials and not creating laravel views, so laravel would only handle the database instert fecth edit delete, and the angular partial views would handle the result show, and forms.

所以我真正不明白的是,如何建立它。如果我创建 html 角度部分而不创建 Laravel 视图可以吗,所以 Laravel 只会处理数据库插入 fecth 编辑删除,而角度部分视图将处理结果显示和表单。

So my buold up would look like this. My assets folder

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

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

And creating restful controllersfor them what handlets listed above

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

Or if someone could show my a basic exaple about this, just the controller and view part, how to build up a singple page with showing result, and one with grabing by id i would really be grateful.

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

Thank you

谢谢

回答by stormpat

When starting a Laravel & AngularJS project you are in charge of the backend and frontend. Basically you have 3 options.

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

  1. Keep the entire app in the same folder, and the angularjs stuff in the public folder.
  2. Keep the entire app in the same folder and AngularJS views in the laravel view folder.
  3. Separate your backend and frontend completely.
  1. 将整个应用程序保存在同一个文件夹中,并将 angularjs 内容保存在公共文件夹中。
  2. 将整个应用程序保存在同一个文件夹中,并将 AngularJS 视图保存在 laravel 视图文件夹中。
  3. 将后端和前端完全分开。

The first & second option are the simplest, and its OK if you have a small/medium sized application. In this case just keep all the AngularJS files in the public folder, or if you choose to mix them with laravel views just drop the .blade extension (or change the laravel blade/angularjs template syntax)

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

I see its best to keep the backend as restful as possible when doing a SPA app, the point is to push the logic to the browser, this means your app can become a mess if you mix php with js too much.

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

The folder structure is totally up to you, and it does not matter what option you choose. But a good start is separating you app into a logical parts.

文件夹结构完全由您决定,您选择哪个选项并不重要。但是一个好的开始是将您的应用程序分成逻辑部分。

/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

You can also check thisfor a good angularjs styleguide.

你也可以检查这个以获得一个好的 angularjs 样式指南。

The above is a basic folder structure, just customize it as you see best. If you have a small app, you could drop the folders and just have a controllers.js directives.js and services.js (etc)and keep all your javascript in the same file. This is totally up to you. Separate when the application grows, and always refactor.

以上是一个基本的文件夹结构,只需按照您认为最好的方式进行自定义即可。如果您有一个小应用程序,您可以删除文件夹,controllers.js directives.js and services.js (etc)然后将所有 javascript 保存在同一个文件中。这完全取决于你。当应用程序增长时分开,并始终重构。

If you choose the third option you will have to customize the backend a bit. This might be the hardest option, but it also gives you great flexibility. Basically you could drop laravel all together, and build the backend in node.js, or use laravel as a backend for another SPA app written in Ember.js without making any changes in the code. Note if you are choosing this option you cannot make use of some laravel stuff, like the blade templating. You will also have to setup your laravel app for CORS, and note, there can be some more coding when it comes to security, like CSRF tokens and such.

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

When going to production with you app you can use a build tool to min & concat you frontend app into one file. Checkout ng-minfor minification.

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

回答by Naveen

This is one of the project I am working on. You can see the way how I have partial views in angular js. As suggested above, there is no need putting your view files in public folder.

这是我正在从事的项目之一。您可以看到我如何在 angular js 中获得部分视图。如上所述,没有必要将您的视图文件放在公共文件夹中。

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

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