AngularJS: Getting Started

Getting Started

AngularJS is a JavaScript framework that provides lots of solutions to many of web development’s problems. This isn’t to say that it is the end-all-be-all of web development tools, but it does provide a great jumping off point for your web application.

There are a few things that you’ll need to wrap your head around before jumping in full force but let’s take a quick look at the basics with the following super-simple web application.

HTML

Nothing in the HTML should surprise you. We’re working with a few HTML tags, attributes and a bit of “templating”. If you’re not familiar with things like HandlebarsJS, check it out – not that it has much to do with AngularJS, but it is useful to know about.

JavaScript

We haven’t written any JavaScript. We’re only including the angular.min.js script in the fiddle.

And what have we gained? Well, admittedly the sample application isn’t overly useful or exciting. We are, however, leveraging a couple of the main concepts of Angular with this sample:

  1. Model/view/controller (MVC): Your HTML template is the “view”. That view is affected by Angular’s model, called the scope. The scope is kind of hidden in this example, but you’ll become very familiar with scope as you work more with Angular.
  2. 2-way binding (wha?!?!): A “super feature” of angular – when we type into the text field, the text value of the H2 updates as we type.

For those of us who aren’t so good with delayed gratification, then this sample is pretty great. But, this is only the beginning. AngularJS has so much more to offer. We’re starting with small steps & keeping it simple…for now. There will be plenty more AngularJS to follow.

AngularJS, what is it?

AngularJS, Simply Put

AngularJS

AngularJS is a JavaScript framework. It provides an Application Programming Interface (API) that allows you to build web applications using JavaScript, HTML, & CSS. The API that Angular provides is a well thought out and robust set of solutions that provide you the ability to create powerful web applications more simply & quickly.

AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop. – angularjs.org

Thinking Differently

For me, and I’m imagining many others, Angular required a paradigm shift in the way I thought about application development. Angular doesn’t just allow you to manipulate the DOM. What angular does is allow you as the developer to extend the existing features of HTML and add on to the capabilities of the browser in a very slick way. Angular’s angle (ha!) is to control the view by inspecting the DOM for an injection point where you can hen create the features of your application. These injections can be objects that act as the logical control center for an existing tag like an <h1> or adding on attributes to that same tag. Angular also allows you to create completely new tags that can be used in you application. The result then become the components, views and logic of you’re application.

The point being is that now you have control over the features and functionality of the browser for your application. Understanding how your new features features are added to the browser, and how you can best structure your application to allow for simplified and maintainable development is the first step. The way I tend to think of it is that Angular is responsible for telling the browser what to do, you just need to provide the logic and data to allow it to do so. That is a very important concept to grasp with Angular – the data is what drives the application. You don’t, and shouldn’t, manipulate the DOM directly. You change the data, then it is up to angular to render the view correctly based on that data.

For example, instead of using jQuery (or angular’s jQLite) to manipulate the DOM to show some text or change a class, we change the data model. This change is evaluated and angular then updates and renders the view appropriately based on that changed data. You can see this in the sample below:

The displayed H1 value changes when we type into the text input. This is Angular being notified that the model has updated and that the view needs to re-render the updated data. There is nothing we need to do programmatically to set the “innerHTML” of a specific div with the new data. Also notice that there is no custom JavaScript in the jsFiddle above. We only have to include the library & specify the model & bindings.

For me, it took some time to get it. But, once I did, I loved it!

AngularJS: Simple Tabs

Because of projects and personal interest, I’ve been working with AngularJS lately. A recent project needed a tab component to switch between views. The following is a simple prototype of the tab component that I created.

With a background in Flash and Flex it is interesting and exciting to have to change my perspective on how to create and use these types of UI components. Angular forces you to think about the structure of not just the components, but also the entire application in a different way. Before, I’d look to a component framework to provide the tab control. Now, these types of components seem to come together rather simply. So far, Angular is impressing me.

Sencha’s EXTJS 4: Getting Started Quickly

Prerequisites:

Getting started with Sencha’s EXTJS

  1. Download the Library – EXTJS 4.0.7: http://www.sencha.com/products/extjs/download/ext-js-4.0.7/1234
  2. Unzip the contents of the download to a folder in root of your web server. I used /extjs. It should look something like the following image where “extjs” is at the root of your web server:

    Screen Shot of Unpacked EXTJS Files
    Screen Shot of Unpacked EXTJS Files
  3. Make sure your web server is running and open http://localhost/extjs/index.html in your browser.
  4. Click the View the Examples button.
  5. This is a good place to start to see what EXTJS is capable of.

At this point your ready to go. The Getting Started Guide has plenty of information to get your rolling and provide you will a decent knowledge set for EXTJS development.

You want to build something though right? So, let’s build.

  1. Create a directory named “extplay” in the root of your web server.
  2. In the extplay directory create a MyApp.html file.
    Usually EXTJS applications are contained in a single HTML file.
  3. Open the MyApp.html file in your text editor.
  4. Add the following HTML template code to your application:
    <!--<!DOCTYPE HTML>
    <html>
        <head>
            <title>EXTJS Getting Started: MyApp</title>
            <link rel="stylesheet" type="text/css" href="/extjs/resources/css/ext-all.css">
            <script type="text/javascript" src="/extjs/ext-all.js"></script>
            <script type="text/javascript" src="app.js"></script>
        </head>
        <body></body>
    </html>
  5. You will notice the app.js file in the HTML above.
  6. Create the app.js file in your extplay directory and open it in your text editor.
  7. Now we can write some code for our simple application.
  8. Add the following code to the app.js file:
    Ext.onReady(function() {
     Ext.Msg.alert('Status', '<h1>Hello World!</h1>');
    });
  9. Open MyApp.html (http://localhost/extplay/MyApp.html) in your browser. You should see something similar to the following image:

    Sencha EXTJS: Message Box
    The EXTJS Message Box
  10. This is not a full-on EXTJS application – this just illustrates how you can use pieces and parts of EXTJS when and how you’d like.
  11. Let’s create a EXTJS application.
  12. Open app.js.
  13. Replace the code in app.js with the following code:
    Ext.application({
       name: 'MyApp',
       launch: function() {
        Ext.create('Ext.container.Viewport', {
        layout: 'fit',
        items: [
        {
         title: 'EXTJS: MyApp',
         html : 'Hello World!'
        }
       ]
      });
     }
    });
  14. Open MyApp.html in a browser or refesh the browser if it is already open.
  15. You should see something similar to the following:

    Sencha EXTJS: EXTJS Barebones Application
    Sencha EXTJS: EXTJS Barebones Application
  16. Here is what is going on in the code example:
    1. Ext.application: Defines the application named “MyApp”
    2. launch: The built in launch event creates a Viewport and sets it’s config object with a layout and items.
    3. layout: Tells the Viewport to fit to the size of its parent (in this case the body of the HTML)
    4. items: defines the children of the viewport. In this case a title and some HTML.

Now you’ve got an EXTJS 4 application up and running. What do you think?

I’ll follow this post up with some more information on what really goes on with the application, creating and managing the “items” or children of your application & how Sencha handles dependancies and deployment.

SenchaResources:

Mozilla Ubiquity – Useful and fun

So i’ve been checking out Ubiquity and playing with it a bit. Even in its “early, rough” state, it is fun stuff to play with and definitely useful!

I even had the time (about 2 min cause I just copied one of their commands) to create a custom command for is.gd the shorter URL service.

[js]
CmdUtils.CreateCommand({
name: “isgd”,
takes: {“url to shorten”: noun_arb_text},
preview: “Replaces the selected URL with an is.gd URL.”,
execute: function( url )
{
var baseUrl = “http://is.gd/api.php”;
var params = {longurl: url.text};
jQuery.get( baseUrl, params, function( isgdUrl )
{
CmdUtils.setSelection( isgdUrl );
})
}
})
[/js]

To add this command jsut open up Ubiquity (opt/ctrl+Space) and type command-editor, then hit enter. Add the code (it automatically saves as you type). Then your good to go.

To use the new command, have some text selected in a new email or blog post, open Ubiquity type isgd, then the url, hit enter and the text that was selected will be replaced with the shortened URL.

Shortening a URL with is.gd and Ubiquity
Shortening a URL with is.gd and Ubiquity

Of course there are plenty of other ways you can use/play with Ubiquity.

Ubiquity’s Intro: http://is.gd/1Wns

Custom Commands: http://is.gd/1Ydc

That’s right, I even used Ubiquity to create the links above.

Christian Cantrell HTML & Apollo

Lots of cool stuff with JavaScript and HTML integration. The HTML component, being able to load in both Google and Yahoo maps at the same time. Nice stuff, but it seems to me like it is just asking for spaghetti code. Of course that is up to the code management of the developer. Pretty cool presentation, but not a whole lot of meat as far as what I’m interested in.

Apollo Keynote

Mike Chambers got up and gave a great introduction to the Apollo team and let everyone know about the great swag that was given out to all the attendees:

Adobe really pumped up the swag for Apollo Camp:

  • Flex Builder with charting
  • Apollo CD with goodies and docs
  • Apollo t-shirt
  • Apollo Book

Kevin Lynch dropped in to present a good overview about why Apollo and why Adobe might present the bits and bytes of Apollo early. Adobe revolutionizes how the work engages with ideas and information across multiple platforms (This is a huge push…cross platform) and devices.

  • Client tchnolgies
  • Server technologies
  • Applications

Pretty much the standard pitch about Adobe technolgies, but hey it’s Kevin Lynch, he’s been doing this for 10 years. One of the big pushes is for PDF, PDF is being released to ISO.

Apollo is trying toenable web to the desktop. There are a couple differenct engines that are inside of Apollo based on what people are trying to create. Mostly what is happening is people are trying to create tools that bring in more desktop functionality into the web space, also includein gthe mobile space.

– Establishing a first class presence for your application.

Desktop Rich Internet Applications (dRIAs) is the direction Adobe is looking.

SWF and HTML – top level to build applications in Apollo.

SWF – AS, FLex, XM, Video, Audio,

HTML – JS, CSS ,XML

Local Fiel access, netowork status, drag and drop, clipboard access, background processin, mutiple window support, custom window crome.

Examples:

  • Companion applicaiton for amazon watchlist
  • Feed reader with HTML, Scriptaclous (Web app running as a desktop app)
  • Flex word processor (Buzzword) desktop companion to web application.
  • PDF Support sample applicaiton – finnancial data applicaiton, PDF support will be supplied via the Acrobat plugin (so if you don’t have it you’ll need to install it)

Timeline:

  • H1 – 1st 1/2 of the year (labs next week), Moxie Alpha release, creative suite 3
  • H2 – Flex (Moxie), “Phil0” (Apollo – internet TV app), Flash Media Servier

Q&A:

  • No plans to support QuickTime
  • Centralized distribution and installation
  • Installation super smooth and clean
  • Migration from Flex 2 into Moxie…flex team says “Very easy!”
  • Kevin Lynch says “Whats Moxie?” really, someone asked a question about migrating current Flex applications to Moxie and he asked what it was…hehe.
  • Apollo, most likey will not be the name of the product, someone else has taken it. So they are look at another “cool” name, well just have to wait and see what it is I guess.

Apollo camp!

We’re in San Francisco for Adobe’s Apollo camp. Just had lunch with a couple of the guys from the Flash Player QA team. Definitely a fun bunch to to meet and talk with.

I’ll be sure to update with any nifty things that I get out of the Apollo presentations. only a couple of hours of waiting left.

Keep an eye on my twitter or the apollocamp twitter.

AJAX Data Services Released

Adobe labs has released the AJAX Data Services – AJAX Data Services is a JavaScript library that lets AJAX developers access the messaging and data management capabilities of Flex Data Services directly from JavaScript. It lets you use Flex clients and AJAX clients that share data in the same messaging application or distributed data application.

[Check it out]

Expand to the Desktop with Apollo!

I attended the Adobe Developer Week session for Builder Killer Desktop Apps.

What is Apollo?
A Cross-OS run-time that allows a developer to leverage existing assets and knowledge to build and deploy desktop applications.
Apollo will allow you to leverage Flash, HTML, PDF, & Rich Media. With that you have the ability to create RIA’s containing video and other rich media such as 3D. You are also able to create applications that are not constrained by the “Square Box”. So you can create applications with transparencies, rounded corners and all the other fun stuff.

Some of the other details are listed below:

  • It will be free!
  • You get to use your existing knowledge to build applications
    • You can build applications in many technologies (Flex, Flash, AJAX, HTML…)
  • Access to many of the usually expected OS level operations (File management etc.)
  • It is cross platform:
    • Windows OS (2K, XP & Vista)
    • Mac OS (Tiger)
    • Linux (No Specifics)
  • A developer version will be released on labs.macromedia.com before the end of the year
  • The 1.0 release is planned for the first half of 2007
  • It’s not Central 2.0. Completely different code base
  • The look and feel of the application is completely controlled by the developer
  • Command line tools will be provided to build and package the application
  • The initial release it targeted to the desktop with future releases supporting additional devices

Here are some screen shots of actual Apollo apps (notice these are not running in a browser yay!):


Audio player with visualizer.


Audio player with visualizer.

Apollo Desktop RIA
Desktop RIA example. Notice the transparency and rounded corners!


Enterprise level travel application for salesforce.com to connect sales people.