I'd like to know if possible to separate a yeoman app by modules (like MEANJS generator) basically with the following structure:
Module 1
views
controllers
services
css
config
module1.js
Module 2
views
controllers
services
css
config
module1.js
Module 3
etc
etc
same structure
App.js
For me is more convenient to do it this way and the official angular generator doesn't support that structure
is there any way to accomplish that with an existing yeoman generator?
Maybe this generator will do the trick?
https://www.npmjs.org/package/generator-cg-angular
It follows the Angular Best Practice Guidelines for Project Structure and allows you to create submodules with their own directories.
Related
As mentioned in the image, Angular app1 is common module for both app2 and app3. Is it possible to inject app2 and app3 inside common module?
If it is not possible, can anyone give some idea how we can implement this?
Note: Currently i am trying to inject app2 and app3 using bower install. Is this correct?
Finally we have implemented this functionality using AngularJS Modularization.
Webpack is a module bundler, what does that mean? Well, it basically take modules with dependencies and generate static assets to represent those modules.
for more info:
http://angular-tips.com/blog/2015/06/using-angular-1-dot-x-with-es6-and-webpack/
I'm currently working on an Angularjs based project.I am using RequireJs library to load dependencies asynchronously.
Following is my project structure :
index.html
vendors
angular.js
require.js
underscore.js
css
bootstrap.css
app.cs
images
App
app.js
signup
signup.controller.js
api.user.resource.js
user.service.js
templates
Login.html
profile
profile.controller.js
api.myprofile.resource.js
myprofile.resource.js
templates
profile.html
How can I combine all files inside of App folder into a single minifieds app.js file.Please help me to create a Grunt Task
Have a look at https://github.com/jrburke/almond. It is a minimal AMD API implementation designed for use with optimized builds.
For packaging require applications with Grunt use https://github.com/gruntjs/grunt-contrib-requirejs.
When creating a new project using Yeoman's angularJS generator (yo angular), the app is initialiazed with the following directory structure:
app
scripts
controllers
aFeatureController
bFeatureController
directives
aFeatureDirective
bFeatureDirective
views
aFeatureView
bFeatureView
While this traditional MVC structure works well, I find it harder to navigate than a feature -centric structure, where all files related to the same section of the app are living under the same roof. In other words, I'd like to have the following structure instead:
app
aFeature
aFeatureController
aFeatureDirective
aFeatureView
bFeature
bFeatureController
bFeatureDirective
bFeatureView
Is it possible to configure gruntfile and Yeoman so that grunt keeps tasking and Yeoman scaffolding generators still function properly?
The structure you pointed out is generated by the default angular yeoman generator.
For the feature based structure that you want, (which I personally like as well), can be generated by other yeoman generators like generator-cg-angular.
There are quite a few generators which do the same. You can find one that suits you best by searching for angular on yeoman. These generate this structure by default without having to change your grunt or writing a new generator.
I try to build a modular application using AngularJS. My first idea is to group each module by functionnality with this kind of folder structure :
/core
controllers.js
directives.js
app.js
/modules
/users
controllers.js
directives.js
/invoices
controllers.js
directives.js
/messages
controllers.js
directives.js
...
Notice that the "core" folder contains basics features that will always be in the app. Others modules can be add or remove independently.
As my application will be large, I also want to use lazy loading. I implemented this solution : http://ify.io/lazy-loading-in-angularjs/ which seems to me actually the easiest way. The problem is that it only does lazy loading for controllers, services, directives ... but not for AngularJS modules.
I know there is another way which permits to lazy load Angular modules (http://blog.getelementsbyidea.com/load-a-module-on-demand-with-angularjs/) but I think it's way too hacky as it uses Angular's core methods.
My question is : does it make sense in my case to use different AngularJS modules for each of my modules, like this :
angular.module('core', ['ngRoute', 'users', 'invoices', 'messages'])
angular.module('users')
angular.module('invoices')
angular.module('messages')
What is the advantage of this approach ? Are AngularJS modules usefull - for now - only for third-party modules for Angular ?
I'm asking this since AngularJS 2.0 will support natively lazy loading. Miško Hevery from Google says "[you] should group by view since views will be lazy loaded in near future", and that we should use one module per application, see it here : https://www.youtube.com/watch?v=ZhfUv0spHCY&t=34m19s
Is it correct for a large application to just use one module for my app like this :
angular.module('core', ['ngRoute']);
And then lazy load my controllers, services and directives based on a route or a view ?
We have a similar structure (on a very large app) to the one you are proposing here, except don't have controllers,services and the like bundled up into single .js files. Instead we just separate our concerns with views, services and the like all bundled into a single module. So each meaningful component might looks like:
/my-component
- i-do-something.js
- a-view.html
- a-view-that-is-a-child.html
- a-view-ctrl.js
- index.js //the thing that creates a module and returns it
/ tests
- i-do-something-spec.js
- a-view-ctrl-spec.js
This is all bundled up into a single app module (named for our org). Then a simple boot module angular.bootstrap(['app'])s the whole thing.
We use browserify to compile all this stuff and it has worked nicely so far.
I am new to backbone / Marionette. I am working on complex application building on Marionette and Handlebars templates.
We are using RequireJs for AMD loader.
Code structure
We have structured our code into modules and each module will have its templates, views and controllers.
Assets
js
libs
modules
login
templates
views
LoginController.js
registration
templates
views
RegistrationController.js
I am looking for grunt with requirejs build samples for this code structure. I was not able to find any link which meets our code structure.
This is an example project from Derick Bailey, creator of Backbone.Marionette: https://github.com/derickbailey/bbclonemail/tree/master/public/javascripts/bbclonemail
It has a code structure very similar to yours, he's not using requirejs though, since he's relying on the modules system.
Hope this helps.