Get Angular http://blog.getangular.com Web Apps Made Simple Mon, 07 Dec 2009 02:37:58 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 <angular/> plugin for WordPress http://blog.getangular.com/2009/12/06/angular-plugin-for-wordpress/ http://blog.getangular.com/2009/12/06/angular-plugin-for-wordpress/#comments Mon, 07 Dec 2009 02:20:58 +0000 misko http://blog.getangular.com/?p=65 Embedding <angular/> in existing pages is very easy, just add the appropriate <script/> tag. To make this even easier and to add few extras we have made a WordPress <angular/> plug-in for your enjoyment.

Basics

As expected you can now embed <angular/> into your blog like this:

<div>
Enter name: <input name="name" value="World."/><br/>
Hello {{name}}!
</div>
Which will render like this:

Enter name:


Hello {{name}}!

Advanced

But we have added something extra! If you want to share your code with the world you can do so by adding class="angular" attribute to your code.

<div class="angular">
Enter name: <input name="name" value="World."/><br/>
Hello {{name}}!
</div>
Which will render like this:

Enter name:


Hello {{name}}!
Enter name:


Hello {{name}}! 
<div class="angular">Enter name:<br />
<input name="name" value="World." /> <br/><br />
Hello {{name}}!
</div>

Installation

  1. Download <angular/> WordPress plug-in here.
  2. Upload the angular directory to the /wp-content/plugins/ directory
  3. Activate the plug-in through the ‘Plug-ins’ menu in WordPress
  4. Set your library and database name on the plug-in configuration page

angular-plugin-screenshot

]]> Embedding <angular/> in existing pages is very easy, just add the appropriate <script/> tag. To make this even easier and to add few extras we have made a WordPress <angular/> plug-in for your enjoyment.

Basics

As expected you can now embed <angular/> into your blog like this:

<div>
Enter name: <input name="name" value="World."/><br/>
Hello {{name}}!
</div>
Which will render like this:

Enter name:


Hello {{name}}!

Advanced

But we have added something extra! If you want to share your code with the world you can do so by adding class="angular" attribute to your code.

<div class="angular">
Enter name: <input name="name" value="World."/><br/>
Hello {{name}}!
</div>
Which will render like this:

Enter name:


Hello {{name}}!
Enter name:


Hello {{name}}! 
<div class="angular">Enter name:<br />
<input name="name" value="World." /> <br/><br />
Hello {{name}}!
</div>

Installation

  1. Download <angular/> WordPress plug-in here.
  2. Upload the angular directory to the /wp-content/plugins/ directory
  3. Activate the plug-in through the ‘Plug-ins’ menu in WordPress
  4. Set your library and database name on the plug-in configuration page

angular-plugin-screenshot

]]> http://blog.getangular.com/2009/12/06/angular-plugin-for-wordpress/feed/ 0 Creating an Instant Poll http://blog.getangular.com/2009/11/09/creating-an-instant-pool/ http://blog.getangular.com/2009/11/09/creating-an-instant-pool/#comments Tue, 10 Nov 2009 02:16:02 +0000 misko http://blog.getangular.com/?p=44 Say you are writing a blog article and would like to poll your readership about a topic. Here is a quick way of creating a poll on your blog.

Would you consider using <angular/> on you next project?

{{ {series:[{label:['Yes','No'],values:[poll.yes,poll.no]}]}|chart.pie3d:200:100 }}

Here is the explanation on how to do it in your Blog.

First, sign up with <angular/> http://www.getangular.com

Second, create a library and a database where to store your data on <angular/>. In our case the library is “angular” and the database is “blogdb”. (If you do view source on this page than you will be able to see the script tag)

Third, enter this text in you blog or on any place where you can host HTML.

<script type="text/javascript"
  src="http://angular.getangular.com/angular-1.0a.js#database=blogdb">
</script>

<div ng-entity="Poll:{yes:0, no:0}">


<div ng-entity="Poll:{yes:0, no:0}">
  Would you consider using
  <a href="http://www.getangular.com">&lt;angular/&gt;</a>
  on you next project?
  <div ng-hide="poll">
    <ul>
      <li>
        <a href=""
           ng-action="Poll.loadOrCreate('useAngular',
             {:$.yes=$.yes+1;$.$save({:$root.poll=$})})">
          Yes
        </a>
      </li>
      <li>
        <a href=""
          ng-action="Poll.loadOrCreate('useAngular',
            {:$.no=$.no+1;$.$save({:$root.poll=$})})">
          No
        </a>
      </li>
    </ul>
  </div>
  <div ng-show="poll">
    {{ {series:[{label:['Yes','No'],
        values:[poll.yes,poll.no]}]}
       | chart.pie3d:200:100 }}
  </div>
</div>

Here is an explanation of how it works

  • ng-entity=”Poll:{yes:0, no:0}”: declares an entity ‘Poll’ in the database. A new entity will have a yes and no fields both initialized to 0.
  • ng-hide=”poll”/ng-show=”poll”: At first the variable poll is not defined so the first half of the page is displayed.  After the user votes the result of the vote is stored in poll variable which causes the question to hide and the poll result to show.
  • ng-action=”Poll.loadOrCreate(’useAngular’, {: $.yes=$.yes+1; $.$save({:$root.poll=$})})”: Clicking on the Yes/No will load (or create) a document with id “useAngular”. Once the document is loaded it will increment the yes/no property and save the document. Upon successful save the
  • {series:[{label:['Yes','No'],values:[poll.yes,poll.no]}]}|chart.pie3d:200:100: Display a 3D pie chart with yes and no ratio
]]> Say you are writing a blog article and would like to poll your readership about a topic. Here is a quick way of creating a poll on your blog.

Would you consider using <angular/> on you next project?

{{ {series:[{label:['Yes','No'],values:[poll.yes,poll.no]}]}|chart.pie3d:200:100 }}

Here is the explanation on how to do it in your Blog.

First, sign up with <angular/> http://www.getangular.com

Second, create a library and a database where to store your data on <angular/>. In our case the library is “angular” and the database is “blogdb”. (If you do view source on this page than you will be able to see the script tag)

Third, enter this text in you blog or on any place where you can host HTML.

<script type="text/javascript"
  src="http://angular.getangular.com/angular-1.0a.js#database=blogdb">
</script>

<div ng-entity="Poll:{yes:0, no:0}">


<div ng-entity="Poll:{yes:0, no:0}">
  Would you consider using
  <a href="http://www.getangular.com">&lt;angular/&gt;</a>
  on you next project?
  <div ng-hide="poll">
    <ul>
      <li>
        <a href=""
           ng-action="Poll.loadOrCreate('useAngular',
             {:$.yes=$.yes+1;$.$save({:$root.poll=$})})">
          Yes
        </a>
      </li>
      <li>
        <a href=""
          ng-action="Poll.loadOrCreate('useAngular',
            {:$.no=$.no+1;$.$save({:$root.poll=$})})">
          No
        </a>
      </li>
    </ul>
  </div>
  <div ng-show="poll">
    {{ {series:[{label:['Yes','No'],
        values:[poll.yes,poll.no]}]}
       | chart.pie3d:200:100 }}
  </div>
</div>

Here is an explanation of how it works

  • ng-entity=”Poll:{yes:0, no:0}”: declares an entity ‘Poll’ in the database. A new entity will have a yes and no fields both initialized to 0.
  • ng-hide=”poll”/ng-show=”poll”: At first the variable poll is not defined so the first half of the page is displayed.  After the user votes the result of the vote is stored in poll variable which causes the question to hide and the poll result to show.
  • ng-action=”Poll.loadOrCreate(’useAngular’, {: $.yes=$.yes+1; $.$save({:$root.poll=$})})”: Clicking on the Yes/No will load (or create) a document with id “useAngular”. Once the document is loaded it will increment the yes/no property and save the document. Upon successful save the
  • {series:[{label:['Yes','No'],values:[poll.yes,poll.no]}]}|chart.pie3d:200:100: Display a 3D pie chart with yes and no ratio
]]> http://blog.getangular.com/2009/11/09/creating-an-instant-pool/feed/ 0 Lowering the price of Web-Apps http://blog.getangular.com/2009/10/18/lowering-the-price-of-web-apps/ http://blog.getangular.com/2009/10/18/lowering-the-price-of-web-apps/#comments Mon, 19 Oct 2009 04:28:33 +0000 misko http://blog.getangular.com/?p=33 The old saying goes: Ideas are a dime a dozen, it’s the execution that counts.

So you are working on a project and all of a sudden you realize that it would be great to have a web-application which keeps track of something. It is exactly what would hit the spot, but than you think about it some more and you realize that your choices are

  • Custom app in php/java/ruby/rails/etc… would take you days to get up and running and than there is the cost of deployment. You have full control of everything but you have to be an expert in everything.
  • You could use Google docs (spreadsheet) but that does not have the right look and feel, as you can either have form for collecting data or you can have tabular data. You have zero control of the presentation.

So you think about it some more and you realize that the benefits are not worth the effort and the application does not get build. How often has this happen to you?

<angular/> is not about making the building of web-applications easier, it is about allowing you to build an application where no application would have been build before.

Let me give you an example. I do a lot of coding and often I get distracted. So I said, I would love to know the reasons why I get distracted. Would it not be great if I could keep a log, which would than draw a chart for me with how often and why I get distracted? I could have opened a spreadsheet, but somehow the act of opening a spreadsheet is a distraction in itself, so I doubt I would have done it every time I got distracted. So instead I took 5 minutes to hack together a quick HTML which allowed me to enter the reason why I was distracted in <angular/>. Now I am a mac user, so I click the “Open in Dashboard” on my safari and I had a dashboard widget which allows me to keep track of the reasons whenever I get distracted, with very little effort. I stop coding because I need to go to meeting, I activate Dashboard and enter the reason, someone comes over and asks me a question, ditto.

<angular/> allowed me to go from an idea to working app in 5 minutes. If it was not for <angular/> this simple app would simply not get built. It is great when technology makes existing things easier, it is even better when it enables things which simply would not have happened.

Wait! I have an idea, it would be great to get your opinion on what kind of quick and dirty applications you always wanted to build but the effort was not worth the benefit. What if, we could also vote on other peoples ideas too.

Well here it is:

If you can see this than you need to go to http://blog.getangular.com/2009/10/18/lowering-the-price-of-web-apps to get the full effect.

Your Idea:

  • Votes: ({{idea.yes-idea.no}}) like it:{{idea.yes}}; hate it:{{idea.no}} | {{idea.$audit.created.by}} | {{idea.description}}
]]> The old saying goes: Ideas are a dime a dozen, it’s the execution that counts.

So you are working on a project and all of a sudden you realize that it would be great to have a web-application which keeps track of something. It is exactly what would hit the spot, but than you think about it some more and you realize that your choices are

  • Custom app in php/java/ruby/rails/etc… would take you days to get up and running and than there is the cost of deployment. You have full control of everything but you have to be an expert in everything.
  • You could use Google docs (spreadsheet) but that does not have the right look and feel, as you can either have form for collecting data or you can have tabular data. You have zero control of the presentation.

So you think about it some more and you realize that the benefits are not worth the effort and the application does not get build. How often has this happen to you?

<angular/> is not about making the building of web-applications easier, it is about allowing you to build an application where no application would have been build before.

Let me give you an example. I do a lot of coding and often I get distracted. So I said, I would love to know the reasons why I get distracted. Would it not be great if I could keep a log, which would than draw a chart for me with how often and why I get distracted? I could have opened a spreadsheet, but somehow the act of opening a spreadsheet is a distraction in itself, so I doubt I would have done it every time I got distracted. So instead I took 5 minutes to hack together a quick HTML which allowed me to enter the reason why I was distracted in <angular/>. Now I am a mac user, so I click the “Open in Dashboard” on my safari and I had a dashboard widget which allows me to keep track of the reasons whenever I get distracted, with very little effort. I stop coding because I need to go to meeting, I activate Dashboard and enter the reason, someone comes over and asks me a question, ditto.

<angular/> allowed me to go from an idea to working app in 5 minutes. If it was not for <angular/> this simple app would simply not get built. It is great when technology makes existing things easier, it is even better when it enables things which simply would not have happened.

Wait! I have an idea, it would be great to get your opinion on what kind of quick and dirty applications you always wanted to build but the effort was not worth the benefit. What if, we could also vote on other peoples ideas too.

Well here it is:

If you can see this than you need to go to http://blog.getangular.com/2009/10/18/lowering-the-price-of-web-apps to get the full effect.

Your Idea:

  • Votes: ({{idea.yes-idea.no}}) like it:{{idea.yes}}; hate it:{{idea.no}} | {{idea.$audit.created.by}} | {{idea.description}}
]]> http://blog.getangular.com/2009/10/18/lowering-the-price-of-web-apps/feed/ 1 Sweet Spot for <angular/> http://blog.getangular.com/2009/10/04/sweet-spot-for-angular/ http://blog.getangular.com/2009/10/04/sweet-spot-for-angular/#comments Mon, 05 Oct 2009 03:39:11 +0000 misko http://blog.getangular.com/?p=29 Building web-applications is hard! Even the simplest hello world application will take you hours to set up and you have to know a lot about how many different pieces of technologies work together. Here is a quick inventory from the browser to the back end of what a typical web-application developer needs to know about: HTML, CSS, JavaScript, cookies, HTTP, URL encodings, Servlets, web-framework (i.e. web-work), authentication, threading, SQL, ObjectRelational mappers, DB Schema, RDMS, DB indexing. If you know all of that, than you have a good chance that after week of work, you can have a hello world application written which will allow the user to authenticate, and persist some data.

But, if you think about it most web-applications are just pretty UI on top of database CRUD (create, read, update, delete). Everything else you do is a constant marshaling of data back and forth. From the HTML input, to URL parameters, to HttpRequest, to BussinessObject, to Value Object, to SQL. Hope you did not make any mistakes, as now you have to do all of this in reverse.

The goal of <angular/> is to make CRUD applications easy to build. <angular/> is not a generic framework where you can build any kind of application, its sweet spot are CRUD web-applications.

We believe that there are many web-application which do not get build because the cost of building them is prohibitive. With <angular/> the cost of building these simple applications is greatly reduced.

While building <angular/> we had few goals in mind:

Managed Database

Building a web-applications is just half the battle, deploying them is another. Now you need to rent a host in the data-center where you can deploy the application, where the database can run. I hope you know how to administer and back up your database. <angular/> provides the database hosting as a service so that your <angular/> application does not have to worry about it.

HTML & CSS

There are a lot more web-designers out there than web-developers. We wanted to make <angular/> simple enough where many of the web-designers, which do not know how to program can now move to the business of building simple web-applications and hence provide a greater value to their customers. In order to build a simple web-application a knowledge of HTML & CSS is all which you need to know. The best way to think about <angular/> is that it is HTML with few extra attributes.

Security/Authentication

The cost of building security and authentication into your web-application is often overlooked when building web-applications. <angular/> offers both out of the box.

Embeddable

There are many ways to get your HTML published. (Blogs, Wikis, Content Management systems, to name a few) <angular/> allows you to enhance all of these pages behavior by adding the power of CRUD to these pages. Embeddability opens up a whole new set of possibilities of enhancing existing web-pages or creating mash ups.

Declarative

I can teach HTML to almost anyone (willing to learn) in just a few minutes. Teaching programming languages such as JavaScript requires weeks of work, and that is if you already know how to program. The difference is that HTML is declarative whereas JavaScript is procedural. You describe how the page looks like, vs instructing the browser how to draw one. This is a huge for the learning curve. Declarative vs procedural is the difference between web-designer and the web-developer.

Rich Widgets

Finally, HTML forms have very limited widgets, you want date-picker? charts? maps? form validation? barcodes? formatters? well you have to go and integrate some JavaScript library and you have to know how to program (vs declaring what you want). We want to extend the HTML so that you can ask for these widgets in declarative fashion in <angular/>.

]]> Building web-applications is hard! Even the simplest hello world application will take you hours to set up and you have to know a lot about how many different pieces of technologies work together. Here is a quick inventory from the browser to the back end of what a typical web-application developer needs to know about: HTML, CSS, JavaScript, cookies, HTTP, URL encodings, Servlets, web-framework (i.e. web-work), authentication, threading, SQL, ObjectRelational mappers, DB Schema, RDMS, DB indexing. If you know all of that, than you have a good chance that after week of work, you can have a hello world application written which will allow the user to authenticate, and persist some data.

But, if you think about it most web-applications are just pretty UI on top of database CRUD (create, read, update, delete). Everything else you do is a constant marshaling of data back and forth. From the HTML input, to URL parameters, to HttpRequest, to BussinessObject, to Value Object, to SQL. Hope you did not make any mistakes, as now you have to do all of this in reverse.

The goal of <angular/> is to make CRUD applications easy to build. <angular/> is not a generic framework where you can build any kind of application, its sweet spot are CRUD web-applications.

We believe that there are many web-application which do not get build because the cost of building them is prohibitive. With <angular/> the cost of building these simple applications is greatly reduced.

While building <angular/> we had few goals in mind:

Managed Database

Building a web-applications is just half the battle, deploying them is another. Now you need to rent a host in the data-center where you can deploy the application, where the database can run. I hope you know how to administer and back up your database. <angular/> provides the database hosting as a service so that your <angular/> application does not have to worry about it.

HTML & CSS

There are a lot more web-designers out there than web-developers. We wanted to make <angular/> simple enough where many of the web-designers, which do not know how to program can now move to the business of building simple web-applications and hence provide a greater value to their customers. In order to build a simple web-application a knowledge of HTML & CSS is all which you need to know. The best way to think about <angular/> is that it is HTML with few extra attributes.

Security/Authentication

The cost of building security and authentication into your web-application is often overlooked when building web-applications. <angular/> offers both out of the box.

Embeddable

There are many ways to get your HTML published. (Blogs, Wikis, Content Management systems, to name a few) <angular/> allows you to enhance all of these pages behavior by adding the power of CRUD to these pages. Embeddability opens up a whole new set of possibilities of enhancing existing web-pages or creating mash ups.

Declarative

I can teach HTML to almost anyone (willing to learn) in just a few minutes. Teaching programming languages such as JavaScript requires weeks of work, and that is if you already know how to program. The difference is that HTML is declarative whereas JavaScript is procedural. You describe how the page looks like, vs instructing the browser how to draw one. This is a huge for the learning curve. Declarative vs procedural is the difference between web-designer and the web-developer.

Rich Widgets

Finally, HTML forms have very limited widgets, you want date-picker? charts? maps? form validation? barcodes? formatters? well you have to go and integrate some JavaScript library and you have to know how to program (vs declaring what you want). We want to extend the HTML so that you can ask for these widgets in declarative fashion in <angular/>.

]]> http://blog.getangular.com/2009/10/04/sweet-spot-for-angular/feed/ 0 Hello World, <angular/> is here http://blog.getangular.com/2009/09/26/hello-world-angular-is-here/ http://blog.getangular.com/2009/09/26/hello-world-angular-is-here/#comments Sun, 27 Sep 2009 02:17:12 +0000 misko http://blog.getangular.com/?p=6 If you see this text, than you are not reading this blog on our site, and the page will be static. To get the full effect please read the original blog on http://blog.getangular.com/2009/09/26/hello-world-angular-is-here/

Hi I am <angular/>! What is your name?
(Please enter your name into the text box).

Hello {{person.name}}! Please to meet you!

We would like to introduce to you a new way of building web applications! All you need is basic working of HTML & CSS and you can declaratively build a web-application in minutes.

Here are the kinds of things yo can do:

  • Bring static HTML to life with just a few keystrokes.
  • Persist your data in the cloud
  • Embed your application in existing web page, such as this blog article

Here is what you need to know:

  • Basic Knowledge of HTML & CSS
  • Optional: JavaScript if you want to take the application to the next level.

Here is what you DO NOT NEED to know:

  • Databases or SQL.
  • Back end technology such as Java, Ruby, C# or the likes.
  • For most things, you don’t even need to be a programer.

Well {{person.name}}, believe it or not, but this page is just a wordpress blog written in few minutes with a text editor. I have than added few extra angular tags to the HTML and the page came alive as you can see. Let me take you on the tour of what <angular/> can do.

Why don’t you tell me what you like to do for fun:

Hobby:

{{person.name}} likes to:

  • {{hobby}} [ X ]

Now lets save your hobbies:

Great! here is a QR code which if you scan with your iPhone (App: NeoReader) or Android Phone (App: Barcode reader) it will take you back to this page:

{{$window.location.href|qrcode}}

Congrats {{person.name}}, you have successfully saved your hobbies to the cloud. To access them later here is a permanent url which you can send to your friends or use to edit your hobbies later: {{$window.location.href}}

I am sure you are wondering how all of this magic is made. Well, here is a hint, go watch the screen-cast here. Than come back and check the source of this page, as well as the debug view of the internal state of the page here:

person={{person}}

<angular/> is still in beta, but we are looking for few brave souls to start building web apps and give us feedback. As a beta user we will work closely with you to help you get started and resolve any issues which you may run into. If interested, sign up on our mailing list (http://groups.google.com/group/angular) and send us an email with the kind of application you would like to build.

Happy coding and looking forward to hear from you…

The <angular/> team.

]]> If you see this text, than you are not reading this blog on our site, and the page will be static. To get the full effect please read the original blog on http://blog.getangular.com/2009/09/26/hello-world-angular-is-here/

Hi I am <angular/>! What is your name?
(Please enter your name into the text box).

Hello {{person.name}}! Please to meet you!

We would like to introduce to you a new way of building web applications! All you need is basic working of HTML & CSS and you can declaratively build a web-application in minutes.

Here are the kinds of things yo can do:

  • Bring static HTML to life with just a few keystrokes.
  • Persist your data in the cloud
  • Embed your application in existing web page, such as this blog article

Here is what you need to know:

  • Basic Knowledge of HTML & CSS
  • Optional: JavaScript if you want to take the application to the next level.

Here is what you DO NOT NEED to know:

  • Databases or SQL.
  • Back end technology such as Java, Ruby, C# or the likes.
  • For most things, you don’t even need to be a programer.

Well {{person.name}}, believe it or not, but this page is just a wordpress blog written in few minutes with a text editor. I have than added few extra angular tags to the HTML and the page came alive as you can see. Let me take you on the tour of what <angular/> can do.

Why don’t you tell me what you like to do for fun:

Hobby:

{{person.name}} likes to:

  • {{hobby}} [ X ]

Now lets save your hobbies:

Great! here is a QR code which if you scan with your iPhone (App: NeoReader) or Android Phone (App: Barcode reader) it will take you back to this page:

{{$window.location.href|qrcode}}

Congrats {{person.name}}, you have successfully saved your hobbies to the cloud. To access them later here is a permanent url which you can send to your friends or use to edit your hobbies later: {{$window.location.href}}

I am sure you are wondering how all of this magic is made. Well, here is a hint, go watch the screen-cast here. Than come back and check the source of this page, as well as the debug view of the internal state of the page here:

person={{person}}

<angular/> is still in beta, but we are looking for few brave souls to start building web apps and give us feedback. As a beta user we will work closely with you to help you get started and resolve any issues which you may run into. If interested, sign up on our mailing list (http://groups.google.com/group/angular) and send us an email with the kind of application you would like to build.

Happy coding and looking forward to hear from you…

The <angular/> team.

]]> http://blog.getangular.com/2009/09/26/hello-world-angular-is-here/feed/ 1