Log in

Vinay's Brain Dump

A place for my thoughts, learning and research.

My live blog whilst creating a new version of my website using AngularJS from scratch

by Vinay

Converting www.vinaytripathi.com which is written in ASP.NET to AngularJS, Bootstrap and HTML 5 www.vinaytripathi.com/AngularJS

 

 

10:56 pm - Started the process.

10:57 pm - Downloaded the AngularJS from http://angularjs.org/ version1.2.14

Machine generated alternative text:
Download AngularJS
There is currently no unstable version for download.
Branch Stable Unstable O
Build
Minified Uncompressed Zip
CDN
https://ajax.googleapis.com/ajaxflibs/angularjs/1 .2.14/angular. min.js o
Bower
bower install angular o
Extras Previous Versions [  Download

 

 

That has downloaded angular.min.js on my laptop

 

Next step, let get a bootstrap theme so save me time for designing

 

11:02 pm - Ok, bootstrap theme decided and download, next step is to setup source control and add the theme to the bit bucket :)

 

11:08 - Ok done, the files are in source control and I have checked in as an initial version.

 

Btw, did I mention that South Africa are actually doing quite well in test match against Australia, looks like they will take it to the wire.

 

11:11 - tossing up between using visual studio as an editor or just notepad++…… …….

……………

 

11:12 - Visual Studio 2013 it is :).. WhyjQuery15206106200215872377_1394033917359 Just because I can :)

 

Machine generated alternative text:

 

11:16 - Looks like the theme has some pre-defined, images, I would need to clean those up… taking a lean approach, I am just going to have a basic page with one menu item and I am going to write the test and get it deployed.

 

11:17 - Oh sorry, forgot that I need to add angular js file to the project as well.

Machine generated alternative text:
z Iii ¡
+Ç angular.min.js
aU bootstrap.min.js
aLT html5shiv.js
¡LI jquery-1.1O.2.min.js
¡U jquery.easypiechart.min.js
¡LI jquery.isotope.min.js
aU jquery.magnific-popup.min.js
¡LI jquery.nav.js
¡U jquery.scrollTo.js
¡U jquery.sticky.js
¡LI jquery.validate.js
¡U jquery.vegas.min.js
¡U main.js
¡U modernizr-2.62.min.js
¡U respond.min.js
¡U waypoints.min.js
n4.Ç’J ¡ndex.html

 

11:28 - ok so what do I have.. A base bootstrap website with no use of angular yet

Machine generated alternative text:
HOME

 

Machine generated alternative text:
ci-- weicane oegins --
<section id=”page-weicoae” ciass=”page-weicone”>
<div>
<ul ciass=”siider-controis”>
<ii><a id=”vegas-next” ciass=”next” href=”*” ></a></ii>
<ii><a id=”vegas-prev” class=”prev” href=”*”></a></ii>
</ui>
</div>
<div ciass=”container”>
<div ciass=’row’>
<header class=”centered’.>
<hl>Vinay Tripathi::/hl> ) i _________________________
____________ <p>Deveioper, Agile Coach &amp; Trainer.., did I said developer?</p>
_______ <pI know there is nothing here... I am working on it I:)</p>_.
</header>
</div>
</div> 4
</section><!-- welcome ends -->

 

11:29 - Time to do some angular changes, going to set a basic MVC structure

11:36 - This is how my control now looks

Machine generated alternative text:
controllers.js -øX main.js main.css index.html
‘use strict’;
/* Controllers */
var angularwebsite = ular.module(’angular14ebsite’, []);
Elangularwebsite.controller( ‘WelconePageCtrl’, function ($scope) {
$scope.authorNanie = ‘Vinay Tripathi’;
$scope.jobTitle = ‘Developer, Agile Coach &amp; Trainer.., did I said developer?I’;
J);
1

 

 

11:37 - Time to enable angular in webpage (btw, the controllers.js reside in js directory)

Machine generated alternative text:
j •Jjs
+,J angular.min.js
j bootstrap.min.js
+j controllers.js
html5shiv.js
¡T jquery-1.102.min.js

 

11:39 - oops my VS crashed with inconsistent line count error jQuery152025846507120877504_1394034777182? I am glad I had saved my code just before :)

11:40 - back in business… included angular.min.js in the page

Machine generated alternative text:
<script src=”js/anguiar.min.js”>øscript>
<script src=”js/jquery-1.1ø.2.min.js”></script>
<script src=”js/bootstrap.min.js’5</script>

 

Now let's tell the page that we are going to be using AngularJS

Machine generated alternative text:

 

Notice that I have included ng-app directive at body level, that is because at this stage I am only going to be using angular directive inside body, not in title or before body

 

Now its time to replace some hard coding with model data (yes I know its still hard coded in controller, we'll get to it later)

 

I have included controllers.js in page as well

Machine generated alternative text:
<script src=”js/angular.min.js”></script>
<script src=”js/controllers.js’5</script>I

 

11:55 - Ok, so something is missing, my scope field is not getting picked up by page… time to write some test and debug

PS: Australia need 3 more wickets to win series 2-1

 

I am going to add a directory called test under root

 

I would need to install karma and going to write test using Jasmine's BDD framework

 

I have created karma.js into config directory

Little configuration required for karma, after config, this is how it looks

Machine generated alternative text:
Jmodule.exports = function(config){
conf 1g. set({
basePath : ‘..?‘,
files : [
‘js/angular.js’, -
‘js/angular_*.js’,
Itest/unit/**/*.is
],
exclude : [ ‘.
‘js/angular-loader.js’,
],
autoWatch : true,
frameworks: [‘jasmine’],
browsers : [‘Chrome’],
plugins : [
‘karma-junit-reporter’,
‘karma-chrome-launcher’,
‘karma-firefox-launcher’,
‘karma-script-launcher’,
‘karma-jasmine’
],
junitReporter : (
outputFile: ‘test_out/unit.xml’
suite: ‘unit’
}

 

Its also a good idea to include a batch file to execute the test, so I am going to create a batch file under script folder which I can run again and again

 

Looks like I forgot to install the karma plugin, so this is what I got when I run test.bat

Machine generated alternative text:
HMM [pluqinJ uannot Find piugin Karna—junit—reporter. .
Did you forget to install it ?
npm install karma—junit—reporter ——saue—dev
ARM [karma]: Port 9876 in use
Karma vO.1O.9 server started at http://localhost:9817/
Starting browser Chrome
ARM [watcher]: Pattern “C:/Projects/Personal/uinaytripathi.com/AngularJS Uersion/js/angular.js” does not match any file
ARM [watcher]: Pattern ‘C:/Projects/Personal/uinaytripathi.com/AngularJS Uersion/js/angular—*.js” does not match any fi
le.
ARM [watcher]: Pattern “C:/Projects/Personal/uinaytripathi.com/AngularJS Uersion/test/unit/**/*.js” does not match any
file.
Connected on socket UFT—ykSdHlK2by9EXbra
Chrome 33.0.1750 (Windows): Executed O of O fTiTiiU (0.515 secs I O secs)

 

Btw, test.bat looks like this

Machine generated alternative text:
@echo off
3 REM Windows script for running unit tests
4 REM You have to run server and capture some browser first
S REM
6 REM Requirements:
7 REM - NodeJS (http://nodeis.org/)
8 REM — Karma (ppi install —g karma)
10 set BASE DIR=%’-dpO
11 karma start “%BASE ÐIR%\. .\config\karma.conf.js” %*

 

 

Will also need some plugins to be installed, I need to run the following command in my powershell windows

npm install karma-junit-reporter

 

Now I can start the karma webserver

 

12:24 am - ok so my Karma webserver has started

Machine generated alternative text:
f Karma X
- C [IocaIhost:9878/?id=63186825
Karma vO.1O.9 - connected
Chrome 33.01750 (Windows) is idle
_Lx
F1

 

But there are some errors -

Machine generated alternative text:
.jl/uina,tripathi.com/Angu1a]Šl
11111M [Karnaj rort Y(b in us
‘IARH [karma]: Port 9877 in us ____________ _____ _____
[Nh, Fk.iimaj: Karma uO.1O.9 seruer 
FNFP I I.iun”he’: Startinq browser Chrome[
‘ffiRH [watcher]: Pattern “C:/Projjects/Person.
Le. __________________________________________________ _______
‘ffiBH watcher ______________________________________
File. _______ __________________
INFO  on soci!TlII1IIT1šiF11.1i1
Throme 33.0.1750 (Windows): ExecutedOof 0 (0.313 secs / O secsl
]: Patter”C:1Projects/P’-iiiiiil1’
tjjiFYT1 il š’i i’1:1Tl !TliLT1 f171

Well that is because I don't have any tests :)

 

So let's add some test

 

So it seems like as soon as I added test and fixed a problem with path in my karma config file, the tests are executed automatically, nice!!

 

Machine generated alternative text:
Chrome 33.0.1150 (Windows): Executedlof 1 (0.618 secs/0.113 secs) I
IH[II Iwtciier]: Changed file “C:/Projects/Personal/uinaytripathi.com/AngularJS Uersion/test/unit/controllersSpec.js”.I
ReferenceError: module is not defined
at nu1l.<anonmous> (C:/Projects/PersonalJuina,tripathi.com/AngularJS Uersion/test/unit/contro1lersSpec.js:
:20)
at null.<anonymous> (C:/Projects/Personallu inaytripathi.com/ÑnqularlS Uersionltest/un it/contro1lersSpec.js
:5)
at C:/Projects/Personal/vinaytripathi.com/ngularJS tJersionltest/unitlcontrollersSpec.js:4:1
Chrome 33.0.1750 (Windows): Executed 1 of 1 (0.629 secs / 0.073 secs) I

 

So my test is failing, but whyjQuery15207938427641056478_1394034964079 Let's debug

 

Looks like the problem is with my module

Machine generated alternative text:
HeferenceError: module is not_defined!

 

So here is my problem, I didn’t had module defined

Machine generated alternative text:
Elhtmlclass=”no-js” ngpp

 

Ok, so let's define it

 

Machine generated alternative text:
ng-app=°angu1arWebsite>

 

 

Hmm… so once I have defined the module name in my index.html, my website seems to pick the scope property but my test is still failing, what am I missing?

 

Machine generated alternative text:

 

2:00 am - phew.. Finally able to get the unit test to work. Couldn't quite work out what was missing from the error message and after sometime and few tries, manage to solve the missing dependency and its all working. Looking back, I should have looked at that dependency first :)

Machine generated alternative text:
at I:IrrojectsIrersona1Iuina,tripathi.cowHngu1arJs Uersaon!testlunat/controllersSpecjs:4:1 ___________
hrome 33.0.1750 (Windows): Executed 1 of 1 (0.91.1 secs I 0.117 secs)
Changed file “C:IProjectsIPersona1Iuina,tripathi.cor/Angu1arJS UersionltestlunitlcontrollersSpec.js”J
hrome 33.0.1750 (Windows): Executed 1 of 1 (0.856 secs I 0.122 secs)

 

2:02 am - My website is configured to use angular, the page is binded to controller and its scope, the unit test is working as well, let see if I can get it deployed to server :)

 

2:10 - Started the publish process, not too long to go :)

 

3:05 - Site published... off to bed now :) http://www.vinaytripathi.com/AngularJS

 

BTW, Australia has won the test match as well :) 

 


TAGS:

My Journey from a software developer to an Agile Coach and Trainer

by Vinay

Feels like yesterday when I started working for Fosters as a .NET developer. My first full time job after completing my masters degree. Looking back, I can only say that I must be so lucky to have that as my first job. Some wonderful people and some amazing work, I must say I learnt a lot from that job.

Lots has changed in my career and in my personal life in last 10 years. I have moved through the rank and have worked in different role from a developer to senior developer to development manager and now as an Agile coach and trainer. Each role had its good and not so good days but each role has given me some learning which has helped me to grow as a professional and as a person.

Outside my work life, lot of changes has happened to my personal life as well, I am married now and lives with my beautiful wife and 2 gorgeous daughters who are the world to me.

Just like what Steve Jobs said in his speech at Stanford, you can only connect dots looking backward, it certainly seems true for me. Every decision I have made, every path I have taken had led me to where I am and I am proud of it.

Though I miss my technical days and coding, I certainly enjoy coaching people on agile mindset and agile values and principles and help them deliver value to the customers.

That's it for now but I will be writing more on my Agile experiences and will be sharing my learning.. stay tuned :) 


Agile

A Journey to RC from Beta for VS 2012 and Windows 8

by Vinay

OK, so VS 2012 RC came out on Thursday along with Windows 8 RC. The new version contains some exciting features and they are very nicely explained by Scott Hanselman in his blog

I wasn't a very early adopter for Windows 8 and VS 2012, infact I only had Windows 8 CP installed on my Touchsmart last week (and yes it hurts to go through the same exercise again in a week), but as soon as I read that RC is out, I had to give it a shot.

Upgrading Windows 8

I already had Windows 8 CP running on my touchsmart along with Windows 7 on a different partition. Unlike some previous versions, Windows 8 team have made the upgrade as smooth as possible. For a starter, you don't even have to download a stand alone copy of Windows 8 ( you still can if you want to), you can download the Windows8-ReleasePreview-UpgradeAssistant which is only a small installer but it will provide you a step by step guide and will even install the Windows 8 for you.

The other option is to download a copy of Windows 8 in ISO Format, burn it to disk or a bootable USB and intall a fresh copy.

For me, I chose the long way :), as I already had ISO format installed, I mounted it while still in Windows 8 mode (using Windows 8 inbuilt mounting feature ) and upgraded it, mind you, it did wiped all the libraries and files, but in my case, I only had CP installed a week ago, so I had nothing to loose. Once the setup finished, I was up and running again :)

Upgrading Visual Studio 2012 (you can call it VS 11 if you'd like)

Ok, so I made one mistake, I from previous experience, went straight in and uninstalled .NET 4.5 beta, VS 2012 and all other dependencies, and then I read Scott's blog and realised that you don't need to uninstall the beta, you can install the RP straight on top of beta, oh well...

 

So now I have Windows 8 RP, VS 2012 RC and I am ready to start building Metro Apps and also exploring new features of VS.

 

I'll blog soon about new features of VS and also will start blogging on Metro apps.

Till them, I'll go an enjoy my Windows 8 :)

 

PS: oh one thing I forgot to mention, even though my HP touchsmart is a multi touch (2 point touch), its not very smooth when it comes to using all the cool gestures and touch features of Windows 8, but none the less, it's still fun.

 


My First Blog

by Vinay

Hello and welcome to my technical blog.

 

Very soon, I will be posting my brain dump and research mostly around Microsoft Technologies.

 

So stay tuned and thanks for visiting !! Cool


TAGS:

General