https://github.com/cminhho/modular-angular-app-design

Angular Best Practice for App Structure
https://github.com/cminhho/modular-angular-app-design

Last synced: about 2 months ago
JSON representation

Angular Best Practice for App Structure

• Host: GitHub
• URL: https://github.com/cminhho/modular-angular-app-design
• Owner: cminhho
• Created: 2015-05-04T15:28:39.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2015-07-07T07:25:21.000Z (over 9 years ago)
• Last Synced: 2023-02-27T11:15:56.311Z (almost 2 years ago)
• Homepage:
• Size: 129 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Modular Angular App Design

### Directory Structure

Each module then has its own sub-directory and a file for directives, controllers, filters and services and a directory for views

#### The meaning of files and folders are as follows:

```

your-project/

  |- doc/

  |- node_modules/

  |- test/

  |- src/

  |  |- assets/

  |  |  |- 

  |  |- common/

  |  |  |- 

  |  |- modules/

  |  |  |- home

  |  |  |  |- config.js

  |  |  |  |- controllers.js

  |  |  |  |- directives.js

  |  |  |  |- services.js

  |  |  |  |- filters.js

  |  |  |  |- views/

  |  |  |- login

  |  |  |- app.js

  |  |  |- main-ctrl.js

  |  |- styles/

  |  |  |- main.styl

  |- vendor(bower_components)/

  |  |- angular-bootstrap/

  |  |- bootstrap/

  |  |- placeholders/

  |- .bowerrc

  |- bower.json

  |- Gruntfile.js

  |- index.html

  |- package.json

```

### Defining The Modules

```sh

// Define all your commons components

angular.module('app.resources', []);

angular.module('app.securities', []);

angular.module('app.directives', []);

// Define your modules 

angular.module('app.modules', [

   'app.home',

   'app.login'

]);

// Define your 3rd Party Modules 

angular.module('app.third-party', [

 'ui.bootstrap'

]);

// Lastly, define your "main" module and inject all other modules as dependencies

angular.module('YourApp', [

    'app.third-party',

    'app.resources',

    'app.securities',

    'app.directives',

    'app.modules'

  ]

);

```

Creating a YourApp Modules allows us to inject all our other modules which in turn allows each of our other modules to access each other

The YourApp also allows us to do routing and use ui-view in our index.html file:

```sh

  

  Your App

    


```

Then you defined your routes on the other modules

```sh

// src/modules/home/config.js

angular.module(‘module.home’, []) //define your module

  .config(

    [‘$stateProvider’,

      function($stateProvider) {

        $stateProvider

          .state(‘/home’, {

            templateUrl: ‘modules/home/views/home.html’,

            controller: 'HomeCtrl’

          })

   // ...

```

### Implementing Your Modules

Now when we go to add a controller/directive/service/filter to a module, we open up the appropriate file within that module and simply use the appropriate module name when we define it.

```sh

// app/modules/home/controllers.js

angular.module(‘module.home’)

  .controller(‘HomeCtrl’, function($scope) {

     $scope.patients = ‘something’;

  });

```