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.
Related
Does anyone know of a recent blog post or tutorial on which angular 2 .js files along with the appropriate d.ts files I need so I can just drop them into an existing VS solution without using NPM? I see that I can get the angular files here, but not sure which ones I need. According to the Angular docs, I need do nothing to get typings files for library packages that include d.ts files—as all Angular packages do., but again, when I look thru a sample Angular app, don't know which d.ts files I need.
I can't stand bloat and clutter. Below is a brand new asp.net core on .net 4.6 on the left, the same thing on the right after following this blog:
I can't stomache having to add over 13,000 files to get ahold of maybe 20?, 30? files.
Maybe I'm being too OCD about this, but right now I'll take any suggestions to avoid that bloat, even going with another front-end framework. I've briefly looked at Aurelia, which I like, but again, NPM. Not sure React is appropriate.
My business domain includes Category, which is a self-referencing class/table, and I'm after an intuitive UI where the user can quickly create their own Category structure without having to do a bunch of post-backs to the server. Seems with either Angular2 or Aurelia, I'd only need a couple of Components to accomplish this in the browser.
I know Angular 1.5 added Components, and I may explore that if need be. From what I understand about React, it's not for data management.
So to reiterate my questions, can I get just the Angular2 files along with their d.ts files so I can code in typescript? If not, the same question for Aurelia. And if not, any way that I can keep bloat down yet still write some elegant front-end code.
Any help will be appreciated
Ok so for Development purposes yes your Angular 2 stuff will be massive (its annoying but necissary) however as I am sure you know, once you build your angular app for production (using angular cli for example) it cuts all those 40,000 files down to about 10. for example this is my application before and after production...
and after
So I would guess you want to build your angular stuff out first and then drop it in you application
I am new to Angular and making a small project.
For now, I have one large App.js where I define my route config and controllers and such.
In my index.html file, I link to this script file and everything works fine, I have multiple views and a small working app.
Now I would like to extract the controllers from my big javascript file, but then, what is the best way to include all those files? I do not want to have one script tag per file.
If you are worried about the fact that you will add the files manually over and over again, you could try to automate this process using Gulp or Grunt but it will take a bit of research. What I recommend, though, is using an already set-up generator with these systems in place for you. Such a generator would be the Hottowel generator made by John Papa, which also respect his Angular Styleguide.
Whatever you choose in the end is your preference, but I recommend looking into such generators and explore their way of doing the architecture of an Angular application and then see what suits your needs best.
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 want to do some front-end designs in Cloud9, something like a portfolio page with some CSS animations etc, and rather than writing in vanilla HTML, I'm interested to learn/use Jade, since it will make the code look clearner.
How do I setup Jade in Cloud9? For example, set it up so if I change index.html to index.jade things will just work as normal.
p.s side question, is Jade a good choice for my purpose? I've heard Mustache, Handlebars, Slim, or even using React? I just want to write HTML like using Sass.
If you'd like to use Jade anywhere, you'd have to translate Jade to HTML before serving it. The following is the general way:
Store your Jade files in a separate folder
Use either the Jade command line or use Grunt plugin or Gulp plugin for compiling all your Jade templates to the destination directory where you're serving your HTML from.
[Optional step for Cloud9] If you've set that all up, you can use Cloud9's custom builders (Run > Build System > New Build System) to add that to a builder that you can invoke using the build menu.
I assume here you just want a simple Web page, and aren't using Express etc, which would have a somewhat different flow than the above.
Regarding your side question. I don't think StackOverflow is the best place to ask that, and in any case, the answer to any such question is eventually 'depends' and 'try each of them out', 'research', 'use what you know best', 'use what suits your needs best', and some combination / mutation of the above :).
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