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

Package manager


bower logo

Bower.io

bower.json configuration file


{
    "name": "my-app",
    "version": "0.0.1",
    "dependencies": {
        "angular": "~1.3",
        "angular-local-storage": "~0.1"
    },
    "devDependencies": {
        "angular-mocks": "*"
    }
}
            

Grunt

Task runner

grunt-contrib-copy


{
  copy: {
    build_app_assets: {
      files: [
        {
          src: [ '**' ],
          dest: '<%= build_dir %>/assets/',
          cwd: 'src/assets'
        }
      ]
    },
    build_vendor_assets: {
      files: [
        {
          src: [ '<%= vendor_files.assets %>' ],
          dest: '<%= build_dir %>/assets/',
          cwd: '.'
        }
      ]
    }
}
                

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: "public-read",
      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 %>/templates-app.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/angular-ui-router/release/angular-ui-router.js',
         'bower_components/angular-ui-utils/modules/route/route.js',
         'bower_components/angular-cookies/angular-cookies.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( 'ng-startup.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 ...

cr-remote: Remote source, API, cognito, firebase(TODO)..

cr-auth: Login and authentication

cr-acl: Role and authorization

cr-session: Session manager, wrap of agular-localstorage

cr-aws: Aws integration, Cognito is ready, SQS and Dynamo are WIP!

Follow this project and help us with feedback and PRs

THE END

- ng-startup
- AngularJs Utils [ngUtils]