logicmania

Recently i got chance to work with 2 technologies. One is the most popular framework and another is the latest version of the later one. Its AngularJS and Angular2. Most interesting thing was, i had to write the entire code in ES6. Intresting? Scenario The scenario is interesting. Most SPA in AngularJS face a big challenge. As the project grows it will become slow to load. The modules, libararies. Everything need to be loaded in the initial stage. In this scenario lazy loading comes in to handy. The modules and libraries only be loaded whenever they were required and it's dynamically added to the application. Though Angular2 supports lazy loading by dafault, AngularJS doesn't support lazy loading by default.  And also angular need to register the directives, controllers etc. It will create so many requests for a single module. If we could bundle all the required templates, js ,css into a single file we could reduce the number of requests send to the server for retrieving...

Find the previous  episode here . Checkout the part 3 branch git checkout -b part4.0 origin/part4.0 Lets change the templating a bit different so that we could add data to the template. Now if we click on a link other than home everything will be gone. So we will move the link list to the index before maincontent so that it will always remain there. Next we will replace the modules/home/Home.html with some dummy text. The index.html wil looks like this <div>   <ul>     <li><a href="#home">Home</a></li>     <li><a href="#employee">Employees</a></li>     <li><a href="#project">Projects</a></li>   </ul> </div> <div id="maincontent">   </div> Next we will add some more dummy content to other template html file in projects and employees . And also change the controllers to load and how the content. And also we need to...

Find the previous  episode here . Checkout the part 3 branch git checkout -b part3.0 origin/part3.0 We have created the routing and added a test module to the application. Lets try to add more to module. Templating          Am going to use RequireJS "Text" plugin for templating along with  Underscore.js and Jquery Text     An AMD loader plugin for requireJS to load text resouces. We will load html using text. Underscore.js     " Underscore  is a JavaScript library that provides a whole mess of useful functional programming helpers without extending any built-in objects. " underscore provides a powerfull templating option. You could try lodash also which is a fork of UnderscoreJS Let's do some coding now. First we need to create a template in html. We will extract this code from index.html and will create a new html in modules/home/templates/home.html <div> <ul> <li><a href="#home">Hom...

Find the previous episode here . Checkout the part2.0 branch git checkout -b part2.0 origin/part2.0 In this section we will look into how a routing can be done. For this we are using another lightweight routing framework Page.js .  First install it using bower. bower install visionmedia/page.js We already had added the page in config.js. Now we need to create a router.js which will be in router folder.   define(['page'], function(page) { }); We will create a blank module with loading the page framework. Here we use the Module ID for the module which we defined in config.js. You could use the url also like "bower_components/page/page" But it would be better if a module id us used. NOTE: In requireJS the .JS extension will not be used. Next we will require the router module in app.js. define(['config'], function(config) { "use strict"; require(['router/router']); }); This will load the router module after loading the c...

Modular programming helps to divide the application code based on the module. These programming style helps to manage as well develop the application easily. Requirejs is lightweight framework used in javascript to develop applications using the modular programming. RequireJS RequireJS is lightweight javascript framework which enables AMD(Asynchronous Module Loader). RequireJS helps to load javascript file and modules asynchronously. Apart from using in browser , it’s also be used alongside in Node projects. Why RequireJS? It’s lightweight, scalable, comes with an excellent optimising tool. Apart from these the use of  RequireJS comes handy when you need to divide and load javascript files and modules whenever they need. Suppose you had an application which have a home page, employees, and projects module. And had 3 javascript files like home.js, employees.js and projects.js. Normally in single page application you need to load these files when the page loads. L...

It’s time to install webmin .  Webmin is a web based system administration for unix based system. Webmin is accessible through any browser. For more info visit the website . But before we need to setup something  before. It’s a minimal install so it needs to install wget first. yum install wget Next we will install some other requirements for webmin yum -y install perl perl-Net-SSLeay openssl perl-IO-Tty There’s actually 2 ways to install webmin as the website states . One is using the yum repos and other is downloading the rpm. I prefer rpm that’s why i installed wget first. Next we will download the webmin rpm. wget http://prdownloads.sourceforge.net/webadmin/webmin-1.760-1.noarch.rpm Next we will install the rpm rpm -U webmin-1.760-1.noarch.rpm Once the webmin is installed it is accessible through the network using the port 10000 and also through https. But in centos we need to add the port and https in to the firewall. Run the following c...

It’s the second part of my homeserver build. You can find the first part here . I have initially planned to use NAS4Free for the os. But later changed to Centos 7 as Redhat distributions were my favourite one. And also i would like use GitLab and need run the server as well as NAS server as well as a testing Home Server. As it’s hard to use a  wired  connection to the router i compelled to use a Wifi dongle which will not be supported by the NAS4Free. First installed Centos 7 ( 1406 ) minimal install. To my surprise it detected the WIfi dongle i have used the static ip of 192.168.1.250. Using RAID 10 in my 4 500GB HDD i have successfully installed the server and also i have installed the Webmin which will accesible through https://192.168.1.250:10000 . But when i updated the packages the Wifi simply stop to work. It’s showing in the nmtui but not activating . It’s status is DOWN. Then i downloaded Centos 7 ( 1503 ) and reinstalled it. The problem is it’s showing in the...

I have been planning to build a cheap home server since my external HDD failed unexpectedly. My initial search leads to FreeNAS. But after posting foolish questions in forum i found out that it requires better hardware as it’s based on ZFS. ECC supported RAM and MOBO will be a cost overhead for my rig as i decided to go for some second hand hardware. Then i found this NAS4Free. It’s not simple as FreeNAS but it’s based on UFS so it need not be a heavy hardware. I bought a second hand i3 pc with four hdd and ran NAS4free for 3-4 days. One of it’s hdd failed sometime. I think the problem is with the PSU. So i bought a new Corsair vs450 .So that’s my rig. Lets see the spec. Mobo : Intel Desktop Board DH55TC CPU : Core i3 530 @ 2.93Ghz RAM : 2GB Kingston PSU : Corsair vs450 HDD : 1 x 500GB WD Green 3 X 500GB Seagate Here is some pictures :  Front : My 140MM deepcool Fan  Side View  HDD bay Mobo Ram My Cable Man...

it's continuation of previous post . Lets try to add  a new CRUD module to the app. First create a new module using the yo generator. We will create a new module to add a company name and it's location. yo meanjs:crud-module company It will ask some questions. Need to specify angular folders. Select all those. Next it will ask about menu. whether it need to be added or not. type 'Y' so it will create those links. So the module is loaded. If you check the app folder you will find some new files in the app. Currently it had option to add the name only. We will add location also. Lets edit that. Navigate to  model app/models/ and open company.server.model.js . This file consist the model of the module 'company'. This will define the mongoose schema . Lets add properties for this schema. var mongoose = require('mongoose'), Schema = mongoose.Schema; var CompanySchema = new Schema({ name: { type: String, default: '', req...

It's a continuation of previous post . Lets discuss about the application structure in a MEAN.js Application. Actually MEAN follows a MVC(Model-View-Controller). There are mainly two types of application structure for MVC. 1. Horizontal Folder Structure         This type of structure follows the division on functional role rather than the feature.The files and folders will kept inside a application folder .  There will be one controller folder for all application controllers. Horizontal structure is for simple projects where the features were limited. An example for this structure is app ----controllers ----models ----routes ----views config ----env ----strategies ----config.js ----express.js public ----config ----controllers ----directives ----css ----filters ----images ----views ----services server.js package.json app folder consists of all the express.io files or the server side files. app/controllers folder holds all express controller logic. a...