Navigate/Search

Archive for the 'Angular.js' Category

AngularJS/Bootstrap Plunk

Friday, October 16th, 2015

I am trying to get really good at quickly implementing projects in AngularJS/Bootstrap.  Sometime I watch videos and I am amazed at how fast some people can put a Angular/Bootstrap application together.

I am practicing in plunker.  Plunker is AWESOME and fun.  Here is a link to my latest creation:

http://plnkr.co/edit/uyqkXeaOQWZkQueqYBx5?p=preview

Angular/Bootstrap Technology Stack

Monday, October 12th, 2015

Angular and Bootstrap are very complimentary.  There is some overlap.

The typical Angular/Bootstrap Stack Goes Like This:

jQuery -> Bootstrap -> AngularJS basically Bootstrap components make heavy use of jQuery.

Some angular purist prefer to use ng-strap.  When you use ng-strap you don’t have to use jQuery and Bootstrap components can be used as directives which is nice.  So that technology is:

Bootstrap-> ng-strap -> AngularJS

Why Study AngularJS and Bootstrap (AngularJS)

Sunday, October 4th, 2015

Why I Study AngularJS

There are a lot of very cool JavaScript frameworks.  I have chosen to focus on AngularJS.  There is one good reason not to study Angular JS and I know of big time projects that are not being implemented in AngularJS for this reason.

AngularJS is working as a 1.x version and they are moving to a 2.x version soon.  The 2.x version is abandoning many core concepts of 1.x.  So people don’t want to waste resources on a library that has an near term expiration date.

This actually makes me want to study AngularJS 1.x even more because we won’t have a chance to learn and understand it much longer.

See, AngularJS 1.x is very special.  It’s special because it changed my world view of how JS works.  Before Angular JS 1.x I had been on dozens of projects.  Projects that cost and earned millions of dollars.  Projects that were being developed by brilliant people with incredible amounts of resources behind them.

But, no matter how smart, or how much money, or how much planning… or whatever, I could always predict when they wouldn’t be able to reasonably maintain or grow the code any more.

All of these projects would healthily grow and do great things and then suddenly they would become unmaintainable.   It always, ALWAYS happened when the custom JS code base grew to 10,000 – 12,000 lines of code.  Once we’d written 10 – 12 thousand lines of code all progress would grind to a halt.

Then jQuery came along.  The jQuery didn’t change the law of 10,000 for me, but it made it possible for me to get a lot more out of the 10,000 lines.

Then frameworks like backbone.js came along.  What backbone.js did was let me separate out the model from the rest of the custom code.  Again, it allowed me to do more with the 10,000 and since the model can be totally isolated my code bases could reach about 12,000 lines before things went bad.  Basically, the view and controller could now reach 10,000 and I never needed more than 2000 lines of model code.  I suppose the model could keep growing, so theoretically to code could continue to grow.

Then about 3 years ago I started running into JS projects that were 20,000, 30,000 even 60,000+ lines of custom code.  And the projects were still growing and still healthy.

All of them were AngularJS projects.  There are a lot of reasons why AngularJS projects can grow to gigantic sizes and still be maintainable.  The core reason is because they implemented DI so well.  DI is key, it allows programmers to totally isolate code.  This allows you to keep growing until you hit physical limitations (like browser memory) instead of organizational limitations like try to figure out how changing one line of code will impact the other 59,999 lines of code.

DI allows you to set things up in such a way that you don’t have to worry about unintended consequences if you follow some basic rules.

I know that Angular 2.x is going to have DI and so it should work.  I don’t know if it will.  Time will tell.  But I know that the way Angular 1.x implemented services, directives, controllers, with the scope works and it may not be around much longer so seeing and understand something that worked for building massive JS applications may not be possible much longer… so get them while they are hot.

In a few days I will explain why Bootstrap.

Time To Start Studying AngularJS & Bootstrap Together

Monday, September 28th, 2015

For the last year or so I have spent a lot of time learning all about AngularJS.  It has been an amazing experience.  I am truly inspired by their DI implementations.  I also find the way directives work to be fascinating.  I think their controllers and the scope to be very cool.  It has been so fun.

I think the most basic building blocks are the Angular default directives.  I think the highest peak of Angular is the $compile service.

I surely don’t fully grasp everything in AngularJS, but I do think I have learned everything I can by studying AngularJS on its own.

I want to keep growing so I think it’s time to understand how AngularJS and Bootstrap can be made to work together.

One thing that is very cool is that there are two ways to integrate AngularJS and Bootstrap.  The first way is to use AngularJS and traditional Bootstrap.  In this scenario you have to use jQuery to varying levels.  The second way is to use AngularJS and ng-strap.  In this case you can use AngularJS only.

I think I can learn a lot by implementing different things with AngularJS/Bootstrap and then reimplementing the same things with AngularJS/ng-strap.

This is going to be fun!

$compile – sum up

Sunday, September 27th, 2015

I have been trying to figure out what $compile does/is.

$compile is an angular provider.  It is a standard that all providers that start with the $ are made by the Angular programmers.  Basically it’s rude to create a provider and name it with a $.

So it is “$compile” and that makes is an angular provider (sometimes called service) and is used to compile HTML into a web application.

Once you figure out what compile means (take HTML and makes a web app) you need to understand that $compile doesn’t actually compile.  $compile returns a function that compiles.  The function that compiles is often called a link function.

So what you do is give the $compile function some HTML.  The $compile function then returns a function (link function) and then you pass the link function a scope.  Then the link function takes the scope and creates a web application with the scope.

So $compile is a lot things.  It’s a provider and providers are also called services.  So it’s a service and the service has a constructor function.  If you pass $compile() (its constructor function) HTML it will parse the HTML and create a web application.

$compile – breaking it down

Friday, September 25th, 2015

Compiles an HTML string or DOM into a template and produces a template function, which can then be used to link scope and the template together.

Compiles – Takes HTML and creates a linking function.

HTML string – A string and the string is HTML

$compile – breaking it down

Monday, September 21st, 2015

Here is what the AngularJS folks say about $compile:

Compiles an HTML string or DOM into a template and produces a template function, which can then be used to link scope and the template together.

I find this definition to be both confusing and straight forward.  I find it confusing because it’s a very complicated subject.  I find it straight forward because it’s a very well written statement.

So let’s break this down and start with “Compiles”

I think compiles is a super confusing word in this context.  The reason it’s confusing is because if you come from a deep JS background then you have never been exposed to the concept of compiling code.  If you come from a Java background then you have been exposed to the concept but it’s a very different concept.

Here’s what Angular says:

Compile: traverse the DOM and collect all of the directives. The result is a linking function.

So in Angular a compile searches through the DOM and then creates a linking function.

Compiles – Takes HTML and creates a linking function.

More musings about $compile.

Thursday, September 17th, 2015

I think $compile is really hard to understand.  The reason it’s so hard to understand is because it’s a combination of a lot of very difficult concepts.

Here is Angular’s description of $compile:

Compiles an HTML string or DOM into a template and produces a template function, which can then be used to link scope and the template together.

Simple right?  Yes it is if you understand all of the words.  Basically, four or five people that know Angular inside and out got together and created this definition.  To them this is very clear.

One thing I like to do is to tear down a phrase and dig into each individual word or sub-phrase so that I can understand lots of concepts and then how they fit together.  This is a wonderful phrase for that practice and I am going to do that over the next few weeks:

Compiles an HTML string or DOM into a template and produces a template function, which can then be used to link scope and the template together.

Compiles -

Compiles an HTML string -

HTML string -

Compiles an HTML string or DOM -

Compiles an HTML string or DOM into a template -

template -

Compiles an HTML string or DOM into a template and produces a template function -

template function -

Compiles an HTML string or DOM into a template and produces a template function, which can then be used -

used -

Compiles an HTML string or DOM into a template and produces a template function, which can then be used to link scope -

scope -

link scope -

used to link scope -

then be used to link scope -

Compiles an HTML string or DOM into a template and produces a template function, which can then be used to link scope and the template together.

the template -

together -

link scope and the template together. -

can then be used to link scope and the template together. -

Compiles an HTML string or DOM into a template and produces a template function, which can then be used to link scope and the template together. -

 
Basically, this is brilliant phrase. It’s literately a single succinct phrase that describe dozens of complex concepts. It’s a HUGE and WONDERFUL source of water and it’s up to us to trying and drink it.

Temperature Converter Plunkr Done

Wednesday, September 16th, 2015

http://plnkr.co/edit/vmBZkre7jW0LYPRCiXJm?p=preview

I have been working on an AngularJS Application using built in directives in Plunkr.  I think I’m done.

The point of this application was to prove it could be done.  You can build a fully functional web application with just built in directives.

Should you build a web application with just built in directives?  No, you really shouldn’t… but.

When I first started working as a AngularJS developer I used to get very confused because sometimes the logic is in the HTML and sometimes the logic is in HTML and sometimes the logic is in CSS.

If you want to build and maintain AngularJS application you really need to be comfortable with built in angular directives.

If you spend a lot of time working playing with built in directives they become very simple to understand.

Angular JS Project: Temperature Converter – result formatting (version 7)

Saturday, September 12th, 2015

http://plnkr.co/edit/vmBZkre7jW0LYPRCiXJm?p=preview

Today I added formatting to the result of my Temperature Calculator.  This is an example of something that used to be very hard and it now very easy.

If you go to the plunk you will see on lines 23 & 31 something like:

<tr><td>Fahrenheit</td><td>{{currentF | number : 1}}</td></tr>

What new is the “| number : 1″ and what that does is tell the Angular to show currentF as a number with one decimal point.

Here’s where I have to explain some weirdness.  If you try to research this you will likely become very confused.  This is accomplished by using the Angular Filter provider.  The filter provider is confusing because this is not filtering it is formatting.  So that’s confusing.  Also when you look up the filter provider you might be thrown of by the fact that the filter provider neither filter nor formats, what it does is returns a function that filters and formats.

But if you just need to format the result this is very, very easy to use.