AngularJS advanced project management

ANGULARJS ADVANCED
STARTUP
SHARED OF EXPERIENCES
Created by /Gianluca Arbezzano @GianArb

BIG PROJECT != LITTLE PROJECT
Maintainability, reusable code & modulability, tools

SEED PROJECT
The life is made of choice
How can I write a good UI?
How can I manage login/logout?
Where is my data?
A good foldering is a secret of success
Deploy?
For me seed project is perfect for the tests but it don't
responde at this questions

BOWER.IO
bower.json configuration file
{
    "name": "myapp",
    "version": "0.0.1",
    "dependencies": {
        "angular": "~1.3",
        "angularlocalstorage": "~0.1"
    },
    "devDependencies": {
        "angularmocks": "*"
    }
}

GRUNT-CONTRIB-CLEAN
{
  clean: [
      '<%= build_dir %>',
      '<%= compile_dir %>'
  ]
}

GRUNT-CONTRIB-WATCH
{
  delta: {
      options: {
        livereload: true
      },
      gruntfile: {
        files: 'Gruntfile.js',
        tasks: [ 'jshint:gruntfile' ],
        options: {
          livereload: false
        }
      },
      assets: {
        files: [
          'src/assets/**/*'
        ],
        tasks: [ 'copy:build_app_assets' ]
      }
  }
}

GRUNT-CONTRIB-CONCAT
{
  concat: {
    build_css: {
      src: [
        '<%= vendor_files.css %>',
        '<%= less.build.dest %>'
      ],
      dest: '<%= less.build.dest %>'
    }
  }
}

GRUNT-CONTRIB-JSHINT
{
  jshint: {
    src: [
      '<%= app_files.js %>'
    ],
    test: [
      '<%= app_files.jsunit %>'
    ],
    gruntfile: [
      'Gruntfile.js'
    ],
    options: {
      curly: true,
      immed: true,
      newcap: true,
      noarg: true,
      sub: true,
      boss: true,
      eqnull: true
    },
    globals: {}
  },
}

GRUNT-AWS
{
  s3: {
    options: {
      accessKeyId: "<%= conf.aws.accessKeyId %>",
      secretAccessKey: "<%= conf.aws.secretAccessKey %>",
      cache: false,
      access: "publicread",
      bucket: "<%= conf.aws.bucket %>"
    },
    build: {
      cwd: "build/",
      src: "**"
    }
  }
}
Deploy?

GRUNT-CONTRIB-LESS
{
  less: {
    build: {
      src: [ '<%= app_files.less %>' ],
     dest: '<%= build_dir %>/assets/<%= pkg.name %><%= pkg.version %>.css',
     options: {
       compile: true,
       compress: false,
       noUnderscores: false,
       noIDs: false,
       zeroUnits: false
     }
   }
  }
}
How can I write a good UI?

GRUNT-CONTRIB-HTML2JS
{
  html2js: {
    app: {
      options: {
        base: 'src/app'
      },
      src: [ '<%= app_files.atpl %>' ],
      dest: '<%= build_dir %>/templatesapp.js'
    }
  }
}

APPLICATION TREE
├── build.config.js
├── bower.json
├── configuration.json.dist
├── Gruntfile.js
├── package.json
├── README.md
└── src
    ├── app
    │   ├── app.js
    │   ├── app.spec.js
    │   └── home
    │       ├── home.js
    │       ├── home.less
    │       ├── home.spec.js
    │       └── home.tpl.html
    ├── assets
    │   └── fonts
    ├── index.html
    └── less
        ├── main.less
        └── variables.less
A good foldering is a secret of success

SINGLE MODULE
├── build.config.js
├── bower.json
├── package.json
├── README.md
└── src
      └── home
          ├── home.js
          ├── home.less
          ├── home.spec.js
          └── home.tpl.html
Every module is indipendent and splittable

BUILD.CONFIG.JS
{
  build_dir: 'build',
  compile_dir: 'bin',
  vendor_files: {
    js: [
         'bower_components/angular/angular.js',
         'bower_components/jquery/dist/jquery.js',
         'bower_components/bootstrap/dist/js/bootstrap.js',
         'bower_components/angularuirouter/release/angularuirouter.js',
         'bower_components/angularuiutils/modules/route/route.js',
         'bower_components/angularcookies/angularcookies.js'
    ],
    css: [
    ],
    assets: [
    ]
  }
}

INDEX.HTML
<html>
  <head>
    <% styles.forEach( function ( file ) { %>
    <link rel="stylesheet" type="text/css" href="<%= file %>" />
    <% }); %>
    <% scripts.forEach( function ( file ) { %>
    <script type="text/javascript" src="<%= file %>"></script>
    <% }); %>
  </head>
  <body>
  </body>
</html>

ROUTING
ui-routing
angular.module( 'ngstartup.home', ['ui.router.state'])
.config(function config( $stateProvider ) {
  $stateProvider.state( 'home', {
    url: '/home',
    views: {
      "main": {
        controller: 'HomeCtrl',
        templateUrl: 'home/home.tpl.html'
      }
    },
    data:{ pageTitle: 'Home' }
  });
})
.controller( 'HomeCtrl', function HomeController( $scope, $stateParams ) {
});

NGUTILS
... Open Source Experience ...
: Remote source, API, cognito, firebase(TODO)..cr-remote
: Login and authenticationcr-auth
: Role and authorizationcr-acl
: Session manager, wrap ofcr-session agular-localstorage
: Aws integration, Cognito is ready, SQS and Dynamo
are WIP!
cr-aws
Follow this project and help us with feedback and PRs

THE END
-
-
ng-startup
AngularJs Utils [ngUtils]

AngularJS advanced project management

Recommended

More Related Content

Similar to AngularJS advanced project management (20)

More from Corley S.r.l. (20)

Recently uploaded (20)

AngularJS advanced project management