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.
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.
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:
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-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 lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop. – angularjs.org
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:
For me, it took some time to get it. But, once I did, I loved it!
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.
Open MyApp.html in a browser or refesh the browser if it is already open.
You should see something similar to the following:
Here is what is going on in the code example:
Ext.application: Defines the application named “MyApp”
launch: The built in launch event creates a Viewport and sets it’s config object with a layout and items.
layout: Tells the Viewport to fit to the size of its parent (in this case the body of the HTML)
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.
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
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.
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.
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)
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
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.
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.)