Angularjs 2: My Journey

Well, started my course on Angular2 yesterday. So, I was thinking I would share my experience and thoughts about learning the latest Google technology as I go along.

Angularjs 2: February 23, 2017

Today I learned that, Angularjs2 is not Angularjs 1. They are completely different animals. If Angularjs1 is a walrus, then Angularjs2 is a Sea Lion. They’re kinda the same, but not really.

That’s not necessarily a bad thing! I mean, I was able to get up and running with my first Hello World application within 10 minutes — it really couldn’t be faster! Simply install the Angularjs 2 package from the CLI using npm (node’s package manager). Create a project, and ask it to serve… and you’re viewing “Your App” @ localhost:4200 tout suite!.

Install Angular2 via NPM

$ npm install -g @angular/cli
$ ng new PROJECT_NAME
$ cd PROJECT_NAME
$ ng serve

Additionally, I learned that (as with its predecessor), there is the main component, or “root component” entitled, ‘app-root’. And, that alot of what I will be building is components. So what are components? Well they consist of a .css file (optional), an .html (optional), a .ts (typescript file) (or two if you’re testing).

How to Create an Angular2 Component via NPM

$ ng generate userinfo

This generates four files (there are other commands to omit files):

  • userinfo.component.css (optional)
  • userinfo.component.html (optional)
  • userinfo.component.spec.ts (testing, optional)
  • userinfo.component.ts (required)

When i opened up the userinfo.component.ts file – the typescript file. I could clearly see an import statement at the top which seemingly imported the “Component” library from the angular/core. I imagine I could add additional libraries to import from angular/core or perhaps from external libraries.

The next section included an @Component({}) section with a number of parameters which reminded me of the Angularjs 1.5 versions of a directive. Mainly, the setting a selector part.

The selector can be set with a # – (just like in Angular 1.X), which makes this a div component so it would be called like

. Optionally, the component can be rendered by setting its call like this :

 

.

The templateUrl: would allow me to include an external html, but I can optionally write inline html instead by changing this parameter to ‘template’. Same goes for the style, include as external file as generated above, or use inline. The general rule for using inline html and css though, is if your component is small enough. So mostly, you’ll utilize the css and html generated files. If you don’t need them, you can simply delete them. The only required file — is the .ts file

Angularjs 2: February 3, 2017

So its been a few since my last post on this subject, and I’ve skipped ahead. So today, I’ll share some of the “oh yea” moments.

Constructor versus ngOnInit

Angularjs2 provides hooks to various points in the app’s lifecycle. But recently, I had this question: What is the difference between the constructor() and ngOnInit() ?. Here’s what I found out…

The constructor is called regardless of whether you include the constructor. The constructor is called before the ngOnInit. And the constructor is used to initialize parameters and variables. The ngOnInit is where you would put code that needs to make sure component’s initializations have taken place. The ngOnInit happens right after the constructor is called. So put your code in ngOnInit when the component has built.

// Annotation section
@Component({
  selector: 'my-app',
  template: `
Hello {{ name }}
` }) // class MyApp { // Constructor call is optional... if I don't // include the constructor, it will be called by default. // Every Class has a constructor by default. // Instantiate any code you need to initialize in your component. constructor() { this.name = 'Valerie'; } setChildComponent(info) { this.ChildComponent = info; } // ngOnInit is auto generated in the file when you create your component. // Initialize any child components here. ngOnInit(){ setChildComponent(info); } }

What is a Javascript Callback Function?

When I was asked what a callback function was, I immediately thought of jQuery; as we so often pass a function as a parameter to a jQuery method. Most of the time, a passed in function will execute after the initial method’s code is complete.

jQuery’s onClick Function; a Callback method.

Examine the sample below of a pretty typical function call to jQuery’s onClick event, whereby you pass a function() as a parameter… The example below includes another call to the jQuery hide function which also passes in an anonymous function which will activate when the hide function has completed.


$( "#clickme" ).click(function() {
 
  //This call, passes a function to alert when the "hide" part is finished.
  $("p").hide("slow", function(){
        alert("The paragraph is now hidden");
   });

});

We can conclude that the Callback pattern is ideal for responding to html events, like the onClick event of an html button. But, this isn’t the only use-case for when to use a Callback Javascript pattern. In addition, the setTimeout() and setInterval() are examples of built-in javascript methods which follow the Callback pattern. But additionally, we may want to take advantage of the Callback pattern in our our code, specifically when we find ourselves reusing a particular piece of code, over and over. Let me provide an example.

A simple callback function

function concatenateName(firstName, lastName, callback){

    //We alert the user's full name.         
    var fullname = firstName + " " + lastName;
    alert(fullname);

    //if the user passes in a function, and it is a function - fire it here.
    if (callback && typeof(callback) === "function") {
        callback(lastName);
    }

}
var greeting = function(lastName){
  console.log('Welcome Ms. ' + lastName);
};

//Call the function and pass in the "greeting" function which will log the person's name to the console.
//
fullName("Jerry", "Seinfeld", greeting);


Official Definition of Callback Function

A callback function, also known as a higher-order function, is a function that is passed to another function (let’s call this other function “otherFunction”) as a parameter, and the callback function is called (or executed) inside the otherFunction.

When I’m coding I like to think of it as, passing in a piece of code that I would like to execute immediately after the function is complete.

Logo Design Contest Entries


Strict Standards: call_user_func() expects parameter 1 to be a valid callback, non-static method Su_Shortcodes::pricecolumn() should not be called statically in /home/vmtrotter3662/public_html/violetweb.ca/wp-includes/shortcodes.php on line 319

Notice: Undefined index: per in /home/vmtrotter3662/public_html/violetweb.ca/wp-content/plugins/shortcodes-ultimate/inc/core/shortcodes.php on line 1725

Notice: Undefined index: content in /home/vmtrotter3662/public_html/violetweb.ca/wp-content/plugins/shortcodes-ultimate/inc/core/shortcodes.php on line 1726

Notice: Undefined variable: atts in /home/vmtrotter3662/public_html/violetweb.ca/wp-content/plugins/shortcodes-ultimate/inc/core/shortcodes.php on line 1729

Strict Standards: call_user_func() expects parameter 1 to be a valid callback, non-static method Su_Shortcodes::pricecolumn() should not be called statically in /home/vmtrotter3662/public_html/violetweb.ca/wp-includes/shortcodes.php on line 319

Notice: Undefined index: per in /home/vmtrotter3662/public_html/violetweb.ca/wp-content/plugins/shortcodes-ultimate/inc/core/shortcodes.php on line 1725

Notice: Undefined index: content in /home/vmtrotter3662/public_html/violetweb.ca/wp-content/plugins/shortcodes-ultimate/inc/core/shortcodes.php on line 1726

Notice: Undefined variable: atts in /home/vmtrotter3662/public_html/violetweb.ca/wp-content/plugins/shortcodes-ultimate/inc/core/shortcodes.php on line 1729

Logo Design Contest Entries

Here are my latest logo design contest entries. They are available for purchase. If you see something you like, I will customize the logo design for you.

The visual elements of a brand play an important role in the success of any business. In today’s modern world of technology, it’s more important than ever to create your own brand. A logo will make you look “bigger” and “established” and convey that you are reputable. Clients will gain a sense of your stability. Your logo should differentiate you from your competition and assist in gaining new business.

Logo Design Pricing

Custom Logo Design Pricing

$229
  • Receive up to 3 Designs
  • Make up to 5 Alterations

Stock Logo Design Pricing

$125
  • Choose and existing design.
  • Unlimited customization

web-design

Web Designs

WEB DESIGN SNAPSHOT

In no particular order, here are just some web design projects I’ve worked on over the past 20 years.

harmonica.com

Harmonica Lessons – Web Design – WordPress

Integrated payment processing system into wordpress to automatically display products with sales data as set-up outside. Designed and integrated layout alterations into wordpress. Designed and developed single sales pages.

Chrysler / Jeep

Chrysler, Jeep – Web Design

As a web developer for Autodata, designed a jeep customizer for Jeep.ca which enables users to customize their own jeep. Carousel scrolling of each of the car parts, and auto swaps the image to update accordingly. In addition, provided ongoing bug fixing for chrysler.com by tracking down issues as reported by ticketing system; and providing solutions to each.

Theodore Alexander

Theodore Alexander – Web Design Custom C# .NET

Working for Critical Mass as the Interface Developer, sliced the PSD file to pixel perfection and worked with back-end developers to integrate with back-end C# / .NET with dynamic javascript elements. The sliding drawer didn’t which was considered for the home page, but ultimatately didn’t make it into the design, can be viewed here.

Bank of America

Bank of America – Web Design Java HTML CSS

Working for Critical Mass again, worked on their Americas Cheer website which celebrated the 2008 Olympics by integrating facebook, youtube, and twitter live blurbs to a beautiful, dynamic front end. As the Interface Developer, I was responsible for building the front page which randomly selected from three possible layouts, and filled each section dynamically with random social media blurbs.

The Shopping Channel

The Shopping Channel

Part of a large team of developers working to re-do the entire infrastructure of theshoppingchannel.com website in-house. As the front-end developer, worked with back-end developers on how to integrate a dynamic C# back-end with pixel perfect front end design. The challenges here were the ability to build “zones” dynamically to allow non-developers to affect real change on the site on a go-forward basis (in-house CMS).

Technologo – The place where it all began…

Technologo

Taking my visual basic experience and parlaying that into asp classic to build a complete suite of online B2B tools directed at the Promotions Industry.

Various

Case Study: Kings 1912 Mobile Web Design

Kings 1912 Case Study

Such is the case with Kings 1912, that their online ecommerce website simply contains far more information than is necessary for presentation on a mobile device. Users want to know your location, and be able to browse your products with ease.

The mobile design was features a slider and an accordion style menu system. And was built with jQuery.

Kings Mobile Site

revolution slider

Revolution Slider Generator

Simple, Easy to Use Revolution Slider Builder

Just about every website has a slider these days.

And, if you’re hosting a wordpress website — you’re probably using a Revolution Slider. And if you’re using the revolution slider, then you’re familiar with the Revolution Slider plugin for wordpress. And, if you’ve ever configured your own Revolution Slider, you know that — it’s not a simple task; especially not for a client.

Because building a slider can be a bit of a challenge, I built a simple, “less is more”, interface that clients can use with ease. Sadly, it’s not for WordPress — it is designed to work with straight html websites, but it could be used as a “cut-and-paste” implementation.

Check out demo : Revolution Banner Creator.

You’ll notice that the user is presented with a number of presets. This was done one purpose. The idea after all, is to make it fast and easy for the client, and not to overwhelm with the full list of features Revolution Slider provides.

PLEASE NOTE: The save feature does not work at this time. Includes only a subset of features.

popup

JQuery Plugin for Customer Service Call Center Dialogs

jQuery Plugin for Customer Service Built Better!

Ideal for building Call Center scripts for customer service reps to utlize while taking customer calls.

This small library for building a nested set of dialogs based off of a nested html ul list. Imagine having a series of dialogs with yes/no branches for each. Each button (yes, or no) when pressed, opens the appropriate (yes/no) dialog box, which in turn offers another set of yes/no options… and so on, and so on.

Click the link to view demo: Customer Sales Script Builder

The script is written by simply using plain html, as a nested ul list which represents the series of dialogs and its branches. We’ll let jQuery do the heavy lifting, and create all the dialogs for us.