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?
Jess: What kind of applications can you build with Angular then?
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?
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.
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.
Jess is a video content creator for Learnable and Sitepoint. She digs all things social media, Web 2.0, music, film, digital media and innovation. Feel free get in touch!