GoodFil.ms co-founder on Angular.JS

Here we go with yet another JavaScript framework to introduce you to! Angular aims to augment browser-based applications with Model–View–Controller (MVC) capability. It does so by reducing the amount of JavaScript needed to make web applications functional. These type of apps are also known as Single-Page Applications.

Check out our interview with Glen below to get a better idea of how Angular works.

Jess: I’m here with Glen Maddern, who’s a co-founder of GoodFil.ms. He’s going to tell us all about Angular JS today. It’s pretty new. What can you tell us about it?

Glen: Angular JS is a framework for building web applications. Different to a website, which is the traditional method of the Internet, where a server sends out a piece of HTML, and then you interact with it. A web application is a far more interactive element. It requires a bit of a new way of thinking. There are a lot of different ways of building these. I believe Angular JS is the first to bring a really new approach to that.

Jess: What helpful resources are out there? Where can I get started with something like Angular?

Glen: Angular JS’s own website is incredibly informative. The team behind it has put in a lot of effort to make it a really good place to get started. There’s a whole sequence of introductory YouTube videos about, taking you through each piece of the Angular JS puzzle, in about a ten minute sort of screencast. It’s a really good way to get started.

Jess: What kind of background skills do you have to have to use Angular? And what’s the learning curve like?

Glen: I admit, if you’ve got any experience building web applications with another framework, something like Backbone or Ember, it’s going to be a little bit difficult, because Angular puts a totally different emphasis to those. Angular is about extending HTML to make it much more useful for building applications. Those other projects are about abstracting away the HTML and really putting much more emphasis on JavaScript. The difference being that Angular means you write a lot less code. It’s far more declarative, but it does take a little bit of getting used to.

As for knowing JavaScript really well, I consider it kind of similar to Ruby on Rails. When that first hit the scene, a lot of people were building really cool stuff, but they didn’t really know Ruby. I think you can do the same thing with Angular, but eventually, if you are going to build much more complicated stuff, you are going to need to know JavaScript and obviously HTML, because there’s such a focus on that. You will need to know that pretty well.

Jess: What kind of applications can you build with Angular then?

Glen: Really, all sorts. I built a mobile site for Good Films myself, which has a lot of interactivity, and it needs to perform well on mobile devices. I really needed something with a lot more structure than anything I’d used before on the JavaScript that I’d been writing. Angular also starts at a really low level and doesn’t require you to write much code to get started. Really, there’s some things in the more advanced features, like directives and the way it uses dependency injection, that help you as your application goes from simple to complex. That’s why I think it’s a really good way of starting out and then as a structure for your main application.

Jess: What is Angular particularly useful for then?

Glen: Really for writing complicated web applications. I think it really does a good job of forcing you to separate the logic from your application from what actually updates the website, what manipulates the dom. If you are coming from a background of using a lot of jQuery, those things are totally connected. As your application grows more complicated, you start to struggle against that. Angular is really good at guiding you down a path where you end up with an application that’s well structured, without really realizing that you’ve been doing the right thing all along.

Jess: What is Angular less useful for then?

Glen: If you’ve just got a fairly static page just with a few elements of interactivity, you can use Angular there. It’s very lightweight, but the benefits are probably not worth the extra work. Particularly, the biggest complication comes down to search engines and the way they receive the HTML server you are sending. It’s definitely possible to take a web application and make it visible in the way that a search engine is expecting, but it is extra work. Using something like jQuery in that case, is definitely going to be easier.

Jess: What are good examples of Angular in the wild then?

Glen: Obviously, the mobile site for Good Films that I built. There’s a gallery on the Angular JS website, which has a lot of great examples. The Playstation 3 YouTube application just got rewritten in Angular, and there are photos on there. Really, start there and have a click around. There’s lots of stuff. The Angular JS site itself is an Angular app. The documentation site is an Angular app. If you really can, you can dig into the way those were built.

Jess: What exactly does an Angular JS app look like then?

Glen: It looks a little different than the JavaScript framework. I think the best way would just be to look at an example.

Jess: Let’s have a look.

Glen: Here we have a tiny little Angular JS app. This is running in an online code editor called Code Pen, which is really good for sharing snippets like this. The only thing I’ve had to do is I’ve added the Angular JS source code to the head of the document. That’s the only thing you need to do to get Code Pen working with Angular JS. Believe it or not, this is a small Angular JS app. I can show that by typing in some HTML in these handlebars, they’re called. Angular picks it up and evaluates one plus two and renders three. It’s doing that because it sees this attribute NG app.
That’s telling it that whatever is beneath it is an Angular document, not just pure HTML. If I remove that, you see, obviously, the raw HTML gets displayed.

What can you do with that? I’ll show you a little example. If I was to change this to an input and tell Angular that whatever I put in here, I want it to be saved in the model name. I can use another handlebar’s directive beneath it. Anything I type in this input gets saved in the variable name. Anything that’s in the variable name gets written out. You can see that this is happening as I type. I haven’t written a single line of JavaScript to have that. All I’ve done is declared that there’s a model and an output. That’s really where Angular starts to differentiate itself,
where it allows you to put more information into the HTML, without putting logic into the HTML. It’s simply declaring that there are places where you want to input and places you want to output. If I was to make this slightly more complicated, I could do something like that. Obviously, I don’t want that to be there if name is empty. I can do that quite easily by wrapping that up in another tag and using another Angular JS directive, which says NG show name. That just means only show it if name is present. As you can see, as I delete it, it disappears.

Hopefully, this has given you enough motivation to go and learn the rest of Angular JS. It’s an incredibly powerful framework. It requires very little code. In this example, I’ve written no JavaScript at all and I’ve got an interactive form. That’s all for now. This has been Glen Madden from GoodFil.ms. Thanks for tuning into this JumpCast on Angular JS.