If I am creating an Angular 2 application from scratch, is interoperability of modules, components, directives, ect. affected by folder structure if the filepaths of the 'imports' are adjusted accordingly (assuming only files containing these things are the only thing we're shuffling). For example, I decide to have folders such as 'components', 'services', 'styles', 'main' (for root module+component), as opposed to having all of the mentioned thigs in one folder...I could divide those things any which way I wanted as long as 'import {'#blahblah'}' reflected relative position in directory appropriately?
First, if you are creating a new Angular application from scratch, I'd highly recommend using the Angular CLI: https://github.com/angular/angular-cli. If you do, it has its own thoughts on the project file structure.
Second, if you put the templates and styles in the same folder as the associated component, you can simplify your code and use relative paths.
Other than that ... you are free to set up your file structure anyway you wish.
You can, but you should not. Dividing project files by type instead of feature is considered as bad practice, see https://angular.io/guide/styleguide#style-04-07
As it being already stated here you can use Angular CLI to start your project having all best practices in place and to check out Angular styleguide that give you some more details/theory on that.
However it is also very important to get your project logical structure right for that you can check this repo as example (FYI it is build with Angular CLI) and that ng-conf talk by #DeborahK also checkout this article on the same matter.
Related
I am using Yeoman to auto-generate a project using Bootstrap & Sass. The one thing I am having trouble with is changing the default structure of the project to be more modularized. The generator is here on GitHub.com
Currently the application is structured like so:
/app
/images/
/scripts/
/controllers/
main.js
app.js
/styles/
main.css
/views/
main.html
index.html
I'd rather have it separated into individual directives with a core(shared) folder, so that it would be like so:
/app/
/directives/
/home/
home.html
homeCtrl.js
home.sass
index.html
app.module.js
app.route.js
But I am having difficulty figuring out the best method of modularizing the project. Am I supposed to be creating the file structure that I want with the pre-generated application, and then edit it within the Gruntfile.js? Is there a more streamlined way of doing this, or am I SOL doing it manually?
The best and elegant way is to follow their guideline around creating a customised template which you can use to generate apps based on it.
However, if this is a one off thing you probably won't need to bother unless you want to create something decent and share it with community, so other people can use your template and create their app with modularised structure.
Even if you don't try to write your own template you can still read the guide and modify the initial template generator to change the file structure before creating the app for you.
Here is another good article around template customisation:
https://scotch.io/tutorials/create-a-custom-yeoman-generator-in-4-easy-steps
This project appears to be abandoned. The most recent change is a year ago, there are 67 issues and 18 pull requests. It's probably only generating Angular 1.x code as well, and that may not be "up to date" with current Angular 1 best practices.
You can, of course, fork the project and make changes yourself, and even take over maintenance of it, but you might be better to look at something like Angular-cli, which generates Angular2 code, and is being actively developed.
So I've been looking around to see what the most popular / standard folder structure is for Angular 2 apps and it doesn't seem like there is one. Is there anyone who is using in Angular 2 in production who can shed some light?
Here are some approaches I found:
1) Split by feature, with 1) a shared folder 2) a folder for each feature that contains all the files (whether component, or service, or whatever) directly inside that folder
https://angular.io/docs/ts/latest/guide/style-guide.html#!#application-structure
2) Angular 1 style (no nesting or separation by features, just components, pipes, services, models)
For #1 would it feels weird not having a subfolder for components, subfolder for services, etc. Where would I put a service being used across all the routes?
BTW I'm using the Angular CLI generator: https://github.com/angular/angular-cli
The style guide provides lots of does and don'ts about how to structure your app https://angular.io/styleguide
It says to maintain a flat hierarchy with a folder per feature and related files (component, template, style, ...) in the same folder.
I think that it depends of how you like to organise your app. If the app is small I like to separate them by type (components, services, views, etc) but if it's a big and complex application then I use to divide it by functionalities because it's easier to find the folder you are looking for.
Another alternative would be a combination of both, divide the app by type (components, services, etc) and then inside each type divide it by similarity (all the components related to users inside the folder components/users/usercomponent1, usercomponent2, etc)
I am newbie to angularjs and i have to know the code structure and directory structure in angularjs
My directory Structure
My Doubts are
1)I want to know is the above directory structure is correct
2)Is it advisable to use controller for every individual module separately
3)Is correct way to write all run ,config and declaring module plugin in the same file (ex:app.js)
There is most widely accepted style guide for angularjs projects even angular team support this style guide by john papa.
He is the active member in the angular core community.
He has created style guide for angular1 and angular2.
even you can use
yeoman tool to get scaffolding done for you and they follow these style guide
angular project generator.
follow the instruction, after that it will be like
yo angular [app-name]
I want to know is the above directory structure is correct.
Its totally depends on you how would you organize you project setup, there is nothing hard and fast rule that you have to follow to setup your project structure. well if we talk about your structure it seems to be good setup you have established except images folder i would prefer image folder in the asset folder. otherwise your setup seems to be fine.
is it advisable to use controller for every individual module separately
Yes, its good practice to use a separate controller for every module, and categorize them as per you folder structure.
although there are a lot of projects are there from where you can easily got your all answers, also there are many popular repository's are there which describe the best folder structure for the project setup you can also refer to most popular style guide of angular here -
https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#application-structure
https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md
I have a internet application mvc4 with areas, for my organization each area represent a SPA and through "Manage NuGet Package" I installed "Durandal 1.2.0", "Durandal Transitions 1.2.0" and "Durandal Router 1.2.0". I organized the folders and quit the "views" and "viewmodels" from folder "App" of Durandal and put the new views in folder "VIews" of mvc4 area for example:
Areas-->NewArea-->Views-->ControllerFolder-->views-->shell.html
Then I put the '"viewmodels" in "Script" folder for example:
Scripts-->NewArea-->ControllerFolder-->viewmodels-->shell.js
Scripts-->NewArea-->ControllerFolder-->main.js
Then I changed paths for JS of durandal, for example in main.js:
define(['../../../App/durandal/app',
'../../../App/durandal/viewLocator',
'../../../App/durandal/system',
'../../../App/durandal/plugins/router',
'../../../App/services/logger'],
And I changed main.js in the next line:
viewLocator.useConvention('viewmodels', '../Areas/NewArea/Views/ControllerFolder/views');
But that configuration of folders fails because the next line calls various times the module "viewLocator" in its definition and rewrite the configuration of "useConvention" with default value:
app.setRoot('viewmodels/shell', 'entrance');
That behavior only happen when the folders "views" and "viewmodels" don't stay under "App" folder of "Durandal".
Please help me, how to have various SPAs in the same project?
You might want to consider your deployment strategy. For example, if you need to optimize this app, both SPAs will end up in the same file. However, instead of having them both under the app folder, you can make separate folders, and give each SPA it's own main.js file.
In more advanced scenarios, you may create a "bootstrapper" app that loads one or another of the SPAs. The bootstrapper would contain code that is common to both SPAs. But each SPA (and the bootstrapper) can be optimized independently.
There are many options. Mainly, consider your final deployment strategy and that will help guide you here.
Also, the issue you have above is probably related to the fact that the standard conventions may not work in your setup, and you would need to override some functions with your own mapping.
I ran into the exact same problem this morning. I originally formatted the project to be:
app/spa1/viewmodels
app/spa1/views
app/spa2/viewmodels
app/spa2/views
Using this structure I hit the exact same wall you did. After reading your post, I restructured the project to be:
app/viewmodels/spa1
app/viewmodels/spa2
app/views/spa1
app/views/spa2
Using this structure, navigation works fine. I set up three SPAS and was able to navigate all three. The other benefit of this structure is that you are now following the standard convention so you don't have to configure the view locator. Just make sure the main.js file for each spa uses:
app.setRoot('view models/spa1/shell), app.setRoot('view models/spa2/shell), etc.
Finally, by structuring this way, you move the main.js files up the structure which eliminates the ../../../ in all your defines.
I hope this helps.
We have a large web project, where we need components which can talk to each other which can be put in a central repository of components for different projects.
Using reuirejs and Backbone for the modular development. Went through different boilerplate available for backbone and requirejs, but none matched my requirement. So I have created following directory structure. It can be explained as follows.
---resources
|---custom-components
|---mycomponent
|---js
|---views
|---models
|---collections
|---css
|---templates
|---mycomponent.js
|---mycomponent2
|---js
|---views
|---models
|---collections
|---css
|---templates
|---mycomponent2.js
|---libraries
|---backbone
|---underscore
|---jquery
|---jquery-ui
|---jqueryplugins
|---jcarouselite
|---thirdpartyplugins
|---page-js
|---mypage.js
|---mypage2.js
resources directory will contain all the resources. Under that we will have 4 directories as mentioned.
libraries, jqueryplugins and thirdpartyplugins are obviusly the directories for the name they say.
page-js directory will contain the actual main-js which will be used inside our html file as requirejs data-main attribute.
Custom-component is where all widgets created by us will reside, as you can see it has a js file with same name as that of the component, which will be entry point of this widget. This directory also has directories for js, css and templates. CSS and templates will be loaded by text plugin and CSS plugin respectively. Js directory will contain all the backbone code to make this widget work.
Custom components will be asked by main-js residing in page-js.
Coming to what I need.
1. I want experts to have review this directory structure in perspective of large web projects, where you will need to share your widgets with other teams. suggestions are welcome.
2. My each custom-component will define a module, which will have dependencies within package structure as well as outside package structure. I want to know, if there is any way to use r.js to optimize only my custom widget dependency within package structure and let the plugins and libraries optimized separately.
3. I am developing single page ajax application, so I will be asking modules on demand so I need to cleanup modules and widgets when I dont need them, is there any way for cleaning up I should be aware of?
About the directory structure
As a directory structure pattern, I highly recommend using directory structure of cakePHP. it's really robust as in words!! I'm running multiple apps (one of them is as big as Groupon) and it works just like a charm.
You may need to tweak it a little because, you know, cake is a PHP framework and yours is a javascript one.
Here is the cake's awesome MVC directory structure:
Please note that you may host thousands of apps on a single cake installation. so if you're interested, what are you waiting for? go to their site and read their docs.
About the cleaning up techniques
Well, here is one of the downsides of the Javascript which I don't like. there is no real way to destroy a OO module like in Java or C++. here we don't have such things like C++'s ~ destructors.
For many years, programmers use module = null to free up memory from un-used codes.
Take a look at these also:
Can dynamically loaded JavaScript be unloaded?
Loading/unloading Javascript dynamically
How to unload a javascript from an html?
Hope it helps and good luck on designing your app ;D
Probably I'm late in answering this, but anyway let me share my views here, incase someone else finds it useful.
Your directory structure looks alright. It is always a better design to keep your business components self contained in to a particular directory. I will not recommend Cake MVC structure which break the Open Close Principle. Also have a look at the directory structure recommended by http://boilerplatejs.org which is a reference architecture for large scale JavaScript development.
I do not get the question very clear. when r.js is run it will optimize all JS files it find in the directory (exclude possible) and then create a single script by going though the dependency tree. In production you only need that single script (plus locale files if i18n plugin is used)
Read my blog post below. It might give you some hints: http://blog.hasith.net/2012/11/how-much-multi-page-single-page.html