<3 AngularJS

I had a learning week this week. I fell in love with AngularJS.

What Is It?

I don’t even know what to call it. A framework maybe. It totally changes how we make websites. It makes everything dynamic, and somehow manages to make everything easier in the process.

This is the old way. You request a page. The server looks at your request, gets data from a database, fills in a template, and posts it back to you. 

That has worked for years – and it’s cool. But doing it with AngularJS kinda makes a lot more sense.

It is kinda that simple. Templates are loaded dynamically and the HTML is rendered on the client. So your templates are resources just like images or stylesheets.

Example

To learn it I coded this website. Check this page out. So let me show you how the forum list is created. I’m not going to go into the detail of the workings – there’s enough tutorials on the site for that. I’m just going to show you how easy it makes stuff.

First of all we need the data, this is retrieved from this URL. It simply provides a list of forums with thread/reply counts.

So now we have the data we feed that into our controller and it fills a template in. This is where it gets clever.

Yep, that’s it. the ng-repeat copies that element for every child of forums (which we passed from our controller).. and it automatically does it all!

This is cool by itself – but guess what.. if you change the forums object in any way – edit it, add to it, remove from it – it’s reflected instantly in the design. It’s directly tied to it. You don’t have to do any work to make it update – it just updates.

URLs

A huge advantage is the URL system. For example, I coded a search system on the API site. A search for plasma.

http://api.facepunch.com/#/page/1/forum//thread//user//search/plasma

Totally dynamic – totally linkable (you can make these HTML5 links so they don’t have the # – but I don’t really care enough to do that). You can drill down to link to a certain forum, and a certain thread.

http://api.facepunch.com/#/page/1/forum/110/thread/1169457/user//search/plasma

Rad!

But it isn’t search engine friendly!

Sure it isn’t as friendly as a static html page – but it isn’t search engine unfriendly. Google still indexes ajax created websites.

More Stuff

There’s so much cool stuff going on that it BLOWS MY MIND. The examples on their front page speak for themselves.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s