I will begin web project with AngularJS and want to organize my files appropriately including Web Api.
What is the best structure to use?
The detailed explanation of file structure in AngularJS is explained in AngularJS Up & Running by Shyam Seshadri & Brad Green.
Here is few tips from the book.
Have one controller, service, directive, or filter per file. Don’t club them into large
single files.
Don’t have one giant module. Break up your applications into smaller modules. Let
your main application be composed of multiple smaller, reusable modules.
Prefer to create modules and directories by functionality (authorization, adminservices,
search, etc.), over type (controllers, services, directives). This makes your
code more reusable.
Groups by functionality (login, autohorization)
Creates folder to reusable components (datepicker, widgets)
Creates seperate folder to third-party dependencies.
Related
Take a SaaS company that wants to pack all its services into a single, uhm.. Single Page Application using Angular (1). Now there is a public area (landing page, etc.) and an internal area. There are various layers of protection in the backend. There are different user groups with different privileges.
If the complete app is compiled into a single javascript file, hints for all routes can be found in the JS file quite easily. Then, there are services / $resources for interacting with the API, which again contain quite essential information on the functionality of the application.
Now the question: How could someone put modules on a certain non-binary protection level, and only load this particular module when the user is authorized to see it, all while not reloading the page?
I can find a way to lazily add modules to an angular application. I can also protect single files server sided and only send them to authorized users. But that seems like an unscalable hassle when there are more and more user groups.
Do you know any generic libraries for that purpose, ideally in sync with koa, which do not create a vast overhead? Do you know of some grunt / gulp / whatever processes, which help with that?
Thanks!
You can use latest ui.router which allows you to lazy load routes.
https://ui-router.github.io/ng1/docs/latest/interfaces/state.statedeclaration.html#lazyload
Also you can use web pack and use multiple entry points to create seperate bundles. https://webpack.github.io/docs/multiple-entry-points.html
By following above steps you can optimise the app but I don't think that this will add any protection to the web assets. You can minify to make life bit difficult to understand what your JS code is doing.
I have recently worked in a pure Scala-Play application and later in a pure AngularJS application. I'm very impressed with both and I'm wondering what is the sweet spot of combining the two frameworks together. Since the two frameworks can be complementary but also overlapping in different areas e.g. MVC and page routing, as far as I know these are some of the possibilities:
Single Page design, use AngularJS MVC-only and use Scala-Play as "dull" service layer backend with no full page refreshes.
Allow page reloads and each page reload becomes a different AngularJS root application. This seems quite flexible e.g. the client side is not bloatted with so much data for larger applications but better partitioned for the different use-cases. The downside is that I'd need different AngularJS MVC applications and I'm not even sure how to organize it as a project. Are there examples of this?
Typical server side Web App, use Play MVC-only and AngularJS for handling UI models for each separate page.
My choice of IDE for these types of architecture would of course be WebStorm but unfortunately I can't have all client-side (AngularJS and JavaScripts) and sever-side (Scala-Play) codes in a single project.
I believe that there is no the ultimate optimal architecture for combining Play and Angular. It depends on the specificity of the project, team etc.
The decision to develop UI part with Angular and the server side back-end with Play is very reasonable. Technically it may be done as following:
Development:
Both parts are developed as detached projects with the preferable IDE.
The client should have some entry point HTML page. It is reasonable to name it index.html, but is may be any other name.
For client-server integration do on the Play side as following:
Select a sub-folder under the play application root, which will serve as the "home" for the client files. The default solution is to use the folder public, since all files under it are automatically deployed.
All client files should be copied under the public folder. The files may be organized in any structure.
Add a route for the default URL as a route to the index.html. The argument path in the route should be the full path of the index.html relatively to the application root.
If index.html is directly in the public folder, the route is like this:
GET /defaultUrl controllers.Assets.at(path="/public", file ="index.html")
Add routing to the client files:
GET /*file controllers.Assets.at(path="/public", file)
Now the distribution package will include all the client files.
Putting of the client files into the public folder should be done automatically, for example by organizing the client directory structure and appropriate configuration of the client IDE.
You can find more examples in this post.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
i am developing a new massive project in larvel5 and angularjs , i just needed suggestions for what should be the best directory structure for angularjs to organize your code in inside my projects.how should be modules, controllers, directive and factory etc managed inside my project. my default directory structure is like
app
controllers
services
directives
In this, There are two web projects, one is or web api and another one is for client web page (SPA).
You just need a empty web project to start an angular project.
Index.html - It is the main html page for your application. All other pages (partial pages) for your project can be placed Inside the directory Pages.
Scripts - All your js files can be placed inside this directory. You can differentiate all your js files into it's sub-directories.
An ideal AngularJS app structure should be modularized into very specific functions. We also want to take advantage of the wonderful AngularJS directives to further compartmentalize our apps. Take a look at a sample directory structure below:
index.html
The index.html lives at the root of front-end structure. The index.html file will primarily handle loading in all the libraries and Angular elements.
Assets Folder
The assets folder is also pretty standard. It will contain all the assets needed for your app that are not related your AngularJS code. There are many great ways to organize this directory but they are out of scope for this article. The example above is good enough for most apps.
App Folder
This is where the meat of your AngularJS app will live. We have two subfolders in here and a couple JavaScript files at the root of the folder. The app.module.js file will handle the setup of your app, load in AngularJS dependencies and so on. The app.route.js file will handle all the routes and the route configuration. After that we have two subfolders – components and shared. Let’s dive into those next.
Components Folder
The components folder will contain the actual sections for your Angular app. These will be the static views ,directives and services for that specific section of the site (think an admin users section, gallery creation section, etc). Each page should have it’s own subfolder with it’s own controller, services, and HTML files.
Each component here will resemble a mini-MVC application by having a view, controller and potentially services file(s). If the component has multiple related views, it may be a good idea to further separate these files into ‘views’, ‘controllers’, ‘services’ subfolders.
This can be seen as the simpler folder structure shown earlier in this article, just broken down into sections. So you could essentially think of this as multiple mini Angular applications inside of your giant Angular application.
Shared Folder
The shared folder will contain the individual features that your app will have. These features will ideally be directives that you will want to reuse on multiple pages.
Features such as article posts, user comments, sliders, and others should be crafted as AngularJS Directives. Each component here should have it’s own subfolder that contains the directive JavaScript file and the template HTML file.
In some instances, a directive may have it’s own services JavaScript file, and in the case that it does it should also go into this subfolder.
This allows us to have definitive components for our site so that a slider will be a slider across the site. You would probably want to build it so that you could pass in options to extend it.
You can read detailed article from here
You can also take a look at these links :
Angularjs style guideline and
another article
found a solution for my angularjs directory structure.
I need to add new features to an already existing application. The application is built using Lithium and jQuery. The features that needs to be included have a complex view which allow users to analyze data and perform CRUD functionality. I won't go into details about the features here, but after working on a few simple Angular tutorials and side projects, I know that using AngularJS to create this view will make my life a lot more easier than creating the view using jQuery.
Over the course of the next few months we may convert the entire app to AngularJS.
I am uncertain about where I should place the Angular files and how to setup routing. How can I integrate AngularJS to Lithium so that part of the Lithium routing works and part of it is handled by AngularJS.
I also found this answer on stackoverflow but it doesn't mention folder structures or how to integrate Angular with Lithium. I think this link mentioned in the answers is supposed to have what I am looking for but it doesn't seem to exist anymore.
The link is down, but you can clone the source repository and run it yourself here: https://github.com/nateabele/li3-angular-presentation
Regarding organization, the simplest way would be to place the directory structure for your Angular components inside of /webroot. The more advanced (and in my opinion better) way would be to make them two separate applications: an AngularJS UI app, and a backend API in Li3 that it talks to.
I would like to combine the two generators jhipster and angular.
The jhipster entity generator generates entities for both spring/JPA and angular route/view/controller.
A REST point is not always linked to a view, hence I would want to generate the java and angular parts separately. Are there common practices for these issues?
Have you tested out the JHipster framework itself? I hate to ask such a basic question, but if you look at the structure of what is being delivered by hipster, you'll notice that the Spring API controllers/endpoints are all going to be under your main/java/com/[projectname]/web/rest folder, and your Angular calls to those endpoints will all be mapped under the /webapp/scripts/ folder as part of your Angular services file. If you simply want to remove the Angular views and customize, it should be as easy as deleting those files from your project.
However, if you are looking for another form of REST scaffolding tool, my suggestion is to look up http://forum.spring.io/forum/spring-projects/roo if you want to go build based on your entities or DDL2HBM if you want to build based on an existing DB.