CODEWITHSUNDEEP
angularjsrequirejs
Nav
Nav

Reputation: 4540

Project Structure and File dependencies

I've come from GWT to AngularJS and trying to be happy with this switching. I started a new project and figuring up which project structure and dependency management is the best with Angular and JS development.

After walking around I found Angular-ui-rout($stateProvider) is the best for navigation and having nested views and also for file dependency it seems the best candidate is RequireJS. So I structured my project like this:

appConfig.js:

myModule.lazy = {
    controller: $controllerProvider.register,
    directive: $compileProvider.directive,
    filter: $filterProvider.register,
    factory: $provide.factory,
    service: $provide.service,
    animation: $animateProvider.register
};

for (var i = 0; i < states.length; i++) {
    $stateProvider.state(states[i]);
}

states is defined in seperate file:

var states=
[
{
    name: 'landingPage',
    url: '/',
    templateUrl: 'partials/landingPage/landingPage.html',
    resolve:{load:function($q, $i18n){
        return resolver ($q,$i18n,['landingPage','general'],
            [
                'partials/landingPage/landingPageController.js',
                'partials/landingPage/landingPageService.js'
            ]);
    }
    }
},
{
    name: 'a',
    templateUrl: 'partials/application/application.html',
    resolve:{load:function($q, $i18n){
        return resolver ($q,$i18n,'',
            [
                'partials/application/applicationController.js',
                'partials/application/applicationService.js'

            ]);
    }
    }
},

{
    name: 'a.defaultDash',
    url: '/defaultDash',
    templateUrl: 'partials/dashBoards/defaultDash/defaultDash.html',
    resolve:{load:function($q, $i18n){
        return resolver ($q,$i18n,[],
            [
                'partials/dashBoards/defaultDash/defaultDashController.js',
                'partials/dashBoards/defaultDash/defaultDashService.js',

            ]);
    }
    }
}];

So I have lazy js loading based on my definitions in states. (first question would be is this the best approach?)

Next step is developing my directives, oh..., it would be more than 50 directives in my app. Some of them are very complex and used once in a particular page, so we can say they are not general directives, in this case I am gonna to put codes in a separate js file with separate html for directive template and add js dependency to the related state, so when ever the state(parent view) is gonna to be requested the directive files will be load.

But what about my general directives? it doesn't make sense to have separated js/html files for each, So I am putting all codes in a single js file and put the script link in my index.html. The my problem is maintaining a single file is difficult and just want to make sure this is the best approach for running large-scaled project in Angular js or not? As I mentioned I've come from GWT (Full java env) with full OO concepts, interfacing, inheriting and files separation.

Thanks,

Upvotes: 1

Views: 325

Answers (4)

J_A_X
J_A_X

Reputation: 12847

I think you might be putting the carriage in front of the horse. Do you really need to split up your app right now? Is it at that point currently that performance is affected? I believe your answer is no and that you're trying to over engineer your solution instead of concentrating on getting a result. That being said, if you had to do this, it could be done in the future because of how angular does things (separation of concerns, etc).

By default, Angular doesn't do 'modules' very well. I did try out a project a while ago on github for modules which worked okay, but not great (at the time, this could of changed). Coming from a backbone project, I was trying to do the same as you; using RequireJS to do AMD. In the end, even in a very large project, we never really had to use any of it. Using the ng-boilerplate project, we had grunt concat and minify all javascript. The end result was a web app size of around 500kb (including fonts and icons).

If you really want to have a proper 'modular' angular project, you can always separate it into different apps altogether (ie. different functions/pages can be different apps). Your way of doing it (using resolve) isn't what resolve is made for (data loading before templating). I tried exactly this, but I found that there was a problem with dependencies in the end which put a wrench in my plans.

TLDR; over optimizing too soon. Try to get it working first with Angular without RequireJS. You can add AMD later if needed.

Upvotes: 3

Hardik Thakkar
Hardik Thakkar

Reputation: 394

For navigation purpose, I use this in all of my projects : https://github.com/ajoslin/angular-mobile-nav It also has navigation effects e.g. slide and modal presentation of pages. It also manages history on its own.

Upvotes: 1

Dinesh ML
Dinesh ML

Reputation: 931

You can model angular-app-mster projects (https://github.com/angular-app/angular-app ) to your projects. It will help you to your projects as a good project structure and coding standards.

Upvotes: 0

starchild
starchild

Reputation: 496

For a library of general directives, I prefer to house them in a separate project directory. Each directive lives in its own .js file (and .html template if applicable), and I use grunt to merge the source files into one. This takes some of the pain out of maintaining the directive library, while also making it easy to include the library in the main project.

If you go with this approach, I recommend using grunt-angular-templates, a grunt plugin for "automatically minifying, combining, and automatically caching your HTML templates with $templateCache", so that the html templates can be merged into one .js file, which can be concatenated with all of the other .js files using grunt-contrib-concat.

Upvotes: 1

Related Questions