Adam Things

Simple Beginner AngularJs Tutorial

AngularJs, Coding,

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

Coding, JavaScript,

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

Coding, Html Agility Pack

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

HTML CSS Progress Bar

Simple HTML CSS Progress Bar Using Squares with JSFiddle

Coding, CSS, ,

It took awhile to come across a progress bar that was light and had rounded sections like I wanted. I created a progress bar that is mainly HTML and CSS except for updating the width using JavaScript. The concept is quite simple, we overlay however many squares we want with a background div for the progress meter. Lets take a look at the HTML markup for this.

<div class="Progressbar">
    <div class="ProgressbarMeter"></div>
    <div class="InnerDivs"></div>
    <div class="InnerDivs"></div>
    <div class="InnerDivs"></div>
    <div class="InnerDivs"></div>
    <div class="InnerDivs"></div>
</div>

Its really simple, we have a containing div that holds it all together and controls the main width for the progress bar. Inside Progressbar we have 6 divs total; 1 div is the progress meter bar and the other 5 are the div overlays for the squares.

Now for the CSS portion.

.Progressbar {
    background-color: #d7d7d7;
    width: 110px;
    margin-top: 1px;
    position: relative;
    height: 41px;
    border-radius: 3px;
}
.ProgressbarMeter {
    background-color: #669900;
    width: 40%; /*This controls the green progress bar.*/
    margin-top: 1px;
    height: 40px;
    border-radius: 3px;
    position: absolute;
}
.InnerDivs {
    border: 1px solid black;
    width: 20px;
    height: 40px;
    border-radius: 3px;
    float: left;
    position:relative;
}

The only item really to take note of within the CSS is the width under ProgressbarMeter. This controls the width of the progress bar.

Here is a quick image of what it looks like.

HTML CSS Progress Bar

HTML CSS Progress Bar

JSFIDDLE Link to the above progress bar example: JsFiddle HTML CSS Progress Bar

Create Custom KnockoutJS Binding For Enter Key Press

Coding, JavaScript, ,

Today I had to add an event to an input box that when the user hits enter on the keyboard, it would call a JavaScript function. However, it’s pretty easy to do with a onkeypress=”” but it still uses a lot of other JavaScript and jQuery. I wanted to do this with using a custom KnockoutJS binding for the enter key so lets take a look at the mark up first.

//Field for typing. enterKey is the name of the custom binding.
<input id="name" data-bind="value: name, enterKey: addName" /> 

//This is the button for if they click instead of enter.
<input id="addName" type="button" data-bind="click: addName" value="Add" />

Take notice that in the first line and in the second like they are both pointing to the same function addName. Now lets take a look at the custom binding called enterKey.

// Custom Binding
ko.bindingHandlers.enterKey = {
  init: function (element, valueAccessor, allBindings, data, context) {
    var wrapper = function (data, event) {
      if (event.keyCode === 13) {
        valueAccessor().call(this, data, event);
      }
    };
    ko.applyBindingsToNode(element, { event: { keyup: wrapper } }, context);
  }
};

The cool thing about this customer knockoutjs binding is that you could pass it any function to call. All you would have to do in the markup is data-bind="enterKey: aDifferentFunction" and it would work the same. This obviously works great if you have multiple instances where you would like to check the enter key press and do a certain function without having to do a ton of checking of what’s calling what.

This was answered by Dennis on StackOverflow when I asked how to convert javascript onkeypress to knockoutjs to call on enter.

Friends

Alpha 46 Studios - Custom Web Design
Developer Memes : Hilarious!
Mr. D's Carpet Cleaning In Arizona
Alienware Fx Themes

StackOverflow Profile

profile for Adam at Stack Overflow, Q&A for professional and enthusiast programmers