AngularJS - Recommended Folder Structure

Usually at starting of the project, we don’t spend much time for project folder structure. This scenario works nicely in short term for rapid development, but in long term it creates lot of duplicate code issue and maintainability issue.

See the following two different kinds of folder structures

Normal folder structure:

projectapp/                        è this is the root folder

………………… index.html    è used main landing page

………………… app.js   è used for loading angular module, configuration, routes and etc.

…………………. controllers/         è used for specifying application required controllers

…………………………… loginController.js

…………………………… signupController.js

……………………………dashboardController.js

………………….directives/                è used for creating all re-useable html directives

……………………………loginInfoDirective.js

……………………………menuDirective.js

……………………………headerDirective.js

…………………………… footerDirective.js

………………….services/       è used for creating data services

………………………… userinfoService.js

………………………… itemService.js

………………….js/                  è used for specifying all third partly libraries

…………………........ jquery.js

……………………… angular.js

……………………… ngstorage.js

……………………… lodash.js

………………….templates/  è used for specifying all required html views

……………………….. logintemplate.html

……………………….. signuptemplate.html

………………………… dashboardtemplate.html

The above structure is very common and also has some amount of separation. Here mainly we kept all views in one folder, all external libraries in one folder and all controllers in one folder.

The above structure looks good for smaller project. But in larger application it is not developer friendly structure. Take a simple example for modifying login page; we need to find out login controller, directive, service and login view to make necessary change.

Recommended folder structure:

projectapp/                         è this is the root folder

………………… index.html       è used main landing page

………………… app.js                è used for loading angular module and configuration.

…………………. app.routes.js  è used for specifying angular routes/states

…………………. app.constants.js è used for specifying application constants

…………………. app.messages.js è used for specifying validation messages, alerts

…………………. components/      è used for specifying page components

…………………………. login/

……………………………… loginController.js

……………………………… loginService.js

……………………………… loginTemplate.html

…………………………. dashboard/

…………………………………… dashboardController.js

…………………………………… dashboardService.js

…………………………………… dashboardTemplate.html

………………….shared/                        è used for creating all re-useable components

…………………………. header/

……………………………….. headerDirective.js

.................................................. headerController.js

……………………………….. headerTemplate.html

…………………………. menu/

………………………………. menuDirective.js

………………………………. menuTemplate.html

………………….assets/                 

…………………………… img/          è used for specifying application images

…………………………………. favicon.png 

…………………………… css/           è used for specifying application styles

…………………………………. site.css

…………………………………. bootstrap.css

…………………………… libs/          è used for specifying all third partly libraries

…………………………………. jquery.js

…………………………………. angular.js

…………………………………. ngstorage.js

…………………………………. lodash.js

………………………….. js/               è used for specifying custom JavaScript files 

The above structure shows modularized approach to build angular application. Here, we kept all routes in app.routes.js, all constants in app.constants.js, all login related functionality into login component.

Happy Coding :)

JavaScript – Different ways of Function Declaration

1. Function Declaration
This is normal way of declaration using “function” keyword followed by function name and list of parameters

Example:
function Add(a,b)
{
   return a+b;
}
Add(5,10) ; // output - 15
Add(2,3); // output – 5

2. Function Expression

• It is determined by function keyword followed by list of parameters
• It acts as anonymous function i.e. without function name
• A function expression can be stored in a variable, after that the variable can be used as a function

Example: 
var x= function Add(a,b)
{
   return a+b;
}
x(5,10) ; // output : 15
x(2,3); // output : 5

3. Function Constructor

• It is determined using “new” keyword followed by “function” keyword

Example:
var x = new function(“a”,”b”,”return a+b”);

x(5,10) ; // output : 15
x(2,3); // output : 5

4. Invoke Function as object method

• It allows us to define function as object methods

Example:
var empObj = {
firstName: ” Christopher”
lastName: ” Nolan”
fullName: function() {
  return this.firstName + “ “ + this.lastName ;
  }
}
empObj.fullName(); // output : Christopher Nolan

5. Invoke Function with a Function Consturctor

• If a function invocation is preceded with the new keyword, it is a constructor invocation

Example:
function emp(fname,lname)
    this.firstName = fname
    this.lastName = lname
    this.fullName: function() {
        return this.firstName + “ “ + this.lastName ;
    }
}
var empObj = new emp(“Christopher”,” Nolan”);
empObj.firstName; // output : Christopher

6. Self-Invoking Function

• A self-invoking expression is invoked automatically, without being called.
• b) Function expressions will execute automatically if the expression is followed by ()

Example: 

( function() {
     console.log(“Christopher”);
})();
// output : Christopher

Happy Coding :)

Grunt Configuration in Visual Studio

Grunt is a JavaScript based task runner used to perform plenty of operations like concatenation, minification, copy, clear, check for quality using JS Hint, uglify, minify css, image compression and etc.

Grunt place a vital role in client side frameworks like AngularJS, ReactJS, Vue.JS and etc.

See the following are popular Grant tasks

1. grunt-contrib-concat : It is used to concat multiple files and generate single file
2. grunt-contrib-uglify : It is used to minify javscript files, removes white spaces, removes commented code and rename variables 
3. grunt-contrib-cssmin : It is used to compress CSS files
4. grunt-contrib-imagemin : It is used to compress images
5. grunt-remove-logging-calls : it is used to remove console.log statements
6. grunt-ng-annotate : It is used to add angularJS dependency injection annotations
7. grunt-ng-annotate-analyze: It is used to identify missing angularJs dependency injection annotations

You can download complete steps from the link : Download

Happy Coding :)