Hello World With AngularJs

To understand the basic architecture of creating a simple app lets make a Hello World with AngularJs. In the process, we will look at how to declare a new Angular app, create a controller, and create a Hello World directive.

Creating a new Angular module is pretty simple (The name can be whatever you choose):

var app = angular.module('adamsAngularApp', []);

As we have seen before, this will be used to let Angular know this is the app to look for our directives we have declared for upon DOM compilation. For this example we will just throw it up at the top of the page in the tag.

<html ng-app="adamsAngularApp">

Now to make a controller. The nice part about having controllers is to be able to manipulate the parents $scope that Angular provides in each controller or create a child $scope that can be manipulated per controller. Controllers also tend to help keep things readable and separated into nice and abstracted thoughts. Lets look at the declaration statement for a controller.

app.controller('MainController', function ($scope) {
    $scope.name = 'World'; //This is using the parent scope.
});

Angular is pretty neat with its $scope. As you can see above, we just added a name element to the scope that we can now use in our directive. Implementing the controller in part of our app is pretty simple. We could implement it solely on a div surrounding what we are using it for or if you need your whole page to use the controller, we can just throw it on the tag.

<body ng-controller="MainController">
</body>

Now lets put together a simple directive to go in the middle. Let’s take a look at the declaration of the directive we will use.

app.directive('helloWorld', function () {
    return {
        //We Will Fill this soon.
    };
});

Pretty simple. Now lets add some simple arguments in the return statement.

app.directive('helloWorld', function () {
    return {
        replace: true, //replaces new HTML element with template below
        restrict: 'AE', // directive can be used as a new HTML element or an attribute
        template: '<h3>Hello World. {{ name }}</h3>' //Template that will replace
    };
});

All comments are inline in the example. Basically, when this directive gets executed it’s going to replace the html element we created with the template in the directive. Also, take a look at how the $scope.name was used in the template. Upon execution this will be rendered as the value of name which is ‘Welcome.’ Now lets finish it off with the full html front.

<html ng-app="adamsAngularApp">
	<head>
		//Include reference to AngularJs
	</head>
	<body ng-controller="MainController">
		<hello-world />
	</body>
</html>

Simple AngularJs Directive

Let’s take a look at a simple AngularJs directive to start getting an understanding of how directives work and how AngularJs uses them. As discussed in the previous angular post, we have to mark some outer element on the page as ng-app. A little refresher, this tells angular that it needs to run through all of the DOM elements looking for directives. Once it locates all of the directives, they are associated with those DOM elements and will run now.

So what is a directive? In the simplest form, it is essentially just a function that is tied to the DOM and gets run when the DOM gets compiled. There are multiple ways to denote a DOM element with a directive. One of the more common ways it’s done, is just like putting ng-app directive in the body tag. Lets say we have a directive called angularDatePicker; you could mark a element like follows:

 <span angularDatePicker></span>

It is as simple as that, now every time the DOM is compiled, angular will see that directive and execute it on that span each time. Now lets take a look at a data binding and model example. Two built in directives that AngularJS gives us are ng-model and ng-bind. They are more or less just different ways of invoking your own directive. In the follow snippet. You will notice that when you type in the input box, the type is bound and output on in the divs denoted by these 3 different, valid, bind methods.

<body ng-app>
    <input type="text" ng-model="myDirective" placeholder="Type Some Text.." />
    <div ng-bind="myDirective"></div>
    <div ng:bind="myDirective"></div>
    <div ng_bind="myDirective"></div>
</body>

There are two more way to do the same binding but the only difference is they are the only 2 that are HTML5 compliant and should pass HTML5 validators.

<!-- HTML5 Compliant -->
<div x-ng-bind="myDirective"></div>
<div data-ng-bind="myDirective"></div>

All 5 of the methods above are valid ways to invoking a directive.

Here is a working JSFiddle to see it in action.  Click Here

Simple Beginner AngularJs Tutorial

I wanted to write a simple beginner AngularJs Tutorial as I dive into learning it myself that may help others. The following posts will be my learning as well as views.

The first thing to do is to include AngularJs. You can do this 2 ways:

One being you reference it from your own server.

<script src="lib/angular/angular.js">

Or you can reference Google’s CDN.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>

Now that we have included the script the next thing we will do is include ng-app directive. AngularJs uses this concept of directives to mark a DOM element to get picked up by the Angular Compiler.  For almost any application of using Angular you want to include the ng-app directive on the very outer div or even the body tag.  This tells Angular to treat that element as the root or base element of the application.  From there, you can use Angular within that element without having to use the directive again.

<body ng-app>
</body>

Notice in the example above, since we included the  ng-app in the body tag we can now use Angular within the body without using the directive again.  Let’s take a look at using a simple expression with AngularJs within the body tag.  I would assume the majority of developer know how to use the + operator to concatenate two strings together.  Angular makes using expression like this inline pretty simple.

<body ng-app>
    I am {{ 'trying '+ 'to ' + 'concat' }}
</body

This is a core feature of Angular’s templating capabilities, a binding, the double-curlie braces {{ }} as well as a simple expression 'trying '+ 'to ' + 'concat'. When this binding is executed it will do the concatenations and you will end up with an output of “I am trying to concat”. Try and run a simple math function and see if the outcome is what you would expect.

Some math:  <p>4 + 6 = {{ 4 + 6 }}</p>

If you think the outcome is 10, then you are correct.  The binding will execute and add 4 and 6 together.

Here is a fiddle with a working example of this AngularJs tutorial.  Click Here For Fiddle

JavaScript Operators Challenge Question

JavaScript Operators Challenge Question that I stumbled upon from Stackoverflow and wanted to share it here to have as a fun challenge question.

The question is: In JavaScript, why does this equal 42?

[(0>>(0==0))+([0]+[(0==0)+(0==0)]^0)]*[(0^[(0==0)+(0==0)]+[0])+((0==0)<<0)]

Give it some thought. Have you figured it out yet?

Here is the explanation given at StackOverflow

The basic elements are as follows:

0==0

This is true, which can be coerced in to 1.

a >> b

The right-shift operator. In this case, it’s only used at the beginning of the expression as 0 >> 1 which evaluates to 0.

a^b

Bitwise XOR. Both usages above have either a or b are 0, and so the result is the non-zero operand.

[a] + [b]

String addition of a and b, evaluates to “ab”; if both a and b are numeric (e.g. [0]+[1] the result can be coerced into a numeric.

[a] * [b]

Multiplication can be performed on single element arrays, apparently. So this is equivalent to a*b.

Finally,

a << b

The left-shift operator; for positive integers this effectively multiplies by 2 to the power of b. In the expression above, this is used with b = 0, so the result is a.

If you apply the correct order of operations, you get out [2] * [21] which evaluates to 42.

Send it to your friends, see how good they are with JavaScript operators.

Html Agility Pack Get All Elements by Class

Html Agility Pack is a power tool for parsing through document source. I had a need where I needed to parse a document using html agility pack to get all elements by class name. It really is a simple function with Html Agility Pack but getting the syntax right was the difficult part for me.

Here is my use case:

I need to select all elements that have the class float on them. I started with this query which was working for just div tags.

var findclasses = _doc.DocumentNode.Descendants("div").Where(d => 
    d.Attributes.Contains("class") && d.Attributes["class"].Contains("float")
);

What this does is it takes your _doc and finds all divs within where they have an attribute names class and then goes one step farther to ensure that class contains float

Whew what a mouth full. Lets look at what an example node it would select.

<div class="className float anotherclassName">
</div>

So now, how do we get ALL ELEMENTS in the doc that contain the same class of float. If we take a look back at our HTML Agility Pack query there is one small change we can make to the .Descendants portion that will return all elements by class. This may seem simple, but took quite awhile to come to, if you simply leave .Descendants empty, it will return all elements. Look below:

var findclasses = _doc.DocumentNode.Descendants().Where(d => 
    d.Attributes.Contains("class") && d.Attributes["class"].Contains("float")
);

The query above will return ALL ELEMENTS that include a class with the name of float.

Documented based off my question on stackoverflow here: Html Agility Pack get all elements by class