accern

Accern web development task

Description

This page is a replica of www.accern.com. The website is a single page web application made in Angular Js. The server is created in Node JS with Express. It also has Zendesk widget embadded in it.

Technology stack

1. Client side library manager - Bower.
2. UI framework - ZURB Foundation 5.5.3 (Dependency - jquery-placeholder, jquery.cookie, fastclick).
3. Fonts - Google fonts Poppins|Roboto.
4. Font icons - Fontawesome.
5. Javascript library - Jquery 3.1.1.
6. Javascript framework - Angular 1.6.1.
7. Routing module - angular-route 1.6.1, angular-ui-router 0.4.2.
8. Script manager/ dependency manager - Require JS 2.3.2.
9. Zendesk widget.

Folder structure

• node_modules
• public
• bower_components
• app-styles
• master.css
• app-scripts
• config
• appConfig.js
• controllers
• mainController.js
• directives
• appDirective.js
• appReferences.js
• coreModule.js
• views
• home.html
• company.html
• resource.html
• contact.html
• img
• bower.json
• main.js
• index.html
• package.json
• README.md
• server.js

The _public_ folder contains all the client side code which is hosted as static resource by Express.

The public folder contains bower_components, app-styles, app-scripts, views and img folders.

bower_components has got all the client side libraries.

app-styles has got the custom CSS files.

views has the partial HTML pages for different routes.

app-scripts has all the angular components in different folders config, controllers and directives.

config has got the config file for ui-routes.

controllers has got the angular controllers.

directives has got the angular directives.

Application flow

The entry point to the client application is index.html which acts as the master page for our application. It has got the navigation bar, ui-view (to include the partial templates) and the footer.

The index.html has got the script for Zendesk widget in the header and reference to the require.js with data-main as main.js file (main.js holds configuration for require.js).

main.js is the entry point for Angular coreModule, holds reference to the script files and define the dependencies.

main.js

require.config({
    waitSeconds: 200,
    paths : {
        'jquery': 'bower_components/foundation/js/vendor/jquery',
        'fastclick': 'bower_components/fastclick/lib/fastclick',
        'jquery-placeholder': 'bower_components/jquery-placeholder/jquery.placeholder',
        'jquery.cookie': 'bower_components/jquery.cookie/jquery.cookie',
        'foundation': 'bower_components/foundation/js/foundation',
        
        'angular': 'bower_components/angular/angular',
        'angular-route': 'bower_components/angular-route/angular-route',
        'angular-ui-router': 'bower_components/angular-ui-router/release/angular-ui-router',
        'coreModule': 'app-scripts/coreModule'
    },
    shim : {
        'foundation': {
            deps : ['fastclick', 'jquery-placeholder', 'jquery.cookie']
        },
        'angular' : {
			deps : ['jquery']
		},
		'angular-route' : {
			deps : ['angular']
		},
		'angular-ui-router' : {
			deps : ['angular']
		},
        'coreModule' : {
			deps : ['angular-route' , 'angular-ui-router']
		}
    }
});

require(['coreModule'], function(){

});

The coreModule.js defines the angular module and bootstraps angular to the document taking the angular componets referenced in public/app-scripts/appReferences.js.

coreModule.js

define(function(){
    //Core Module
    var coreModule = angular.module("coreModule",["ngRoute", "ui.router"]);
	//Loading all angular components defined in appReferences file
	require(['app-scripts/appReferences'], function(references) {
		require(references, function(){
			//Bootstraping angular to the document
			angular.bootstrap(document, ["coreModule"]);
		});
	});
})

appReferences.js

//Path to the angular components are referenced here
define(function(){
	return [
		'app-scripts/config/appConfig',
        'app-scripts/controllers/mainController',
        'app-scripts/directives/appDirective'
	];
});