My first week of development using <angular/>
Dobrica Pavlinusic
accomplish my goal to write simple conference submission application
within
a week of first git clone of angular source from github.
I think it might be useful to summarize my experience here, especially
for
people who are still wondering if angular is worth a try. Executive
summary
is: yes it is!
If you want to take a look at source first, jump over to:
https://github.com/dpavlin/angular-mojolicious/blob/master/templates/conference/Work.html.ep
or if you want to click on something first hop over to
http://webpac2.rot13.org:3000/conference/Work
(which is temporary url which will be available until next reboot or
so)
I wanted to have simple form to submit data about papers for
conference.
Basically, one work per submission, but with possibility to group a
bunch of
works in symposium (single topic which have additional data).
My first idea for implementation (probably because of my relational
brain)
was to create two controllers, one for Work and another for Symposium
and
store Symposium.id within Work to make a connection. I tried different
approaches, including JavaScript global variables, putting state
inside
service and probably few more, but I couldn’t figure out how to share
state between controllers.
In the process, I figured out that your data object doesn’t really
exist
until it’s passed all ng:required checks, which actually pushed me
towards
another idea: use single controller and re-use symposium data in all
work
coping it from first work to second and so on. This provided better
overall
user experience :-)
In the end, I added another $resource to store Symposiums, but this is
really convenience (mostly because my REST back-end is basically hash
in
memory and I didn’t want to implement back-end queries yet). This
proved
to be easy, but does look a bit callback-ish.
I would love some feedback how other people are implementing master/
detail
form pattern in which they fetch data from two $resources and want to
keep
some kind of link between them (my solution basically replicates data
twice).
In the process, I also learned to pull code from github often. I had
week
old version which I couldn’t make working, and new version came out. I
noticed that I was hitting bugs which where already fixed on github.
Kudos
to speedy release cycle.
I have few things for which I’m not sure that I took a right route:
Since I store all authors in array, to have authors form appear on
page load
I use master data with empty strings which is required but invalid
value.
I’m using ng:eval to provide form _changes flag so I can show and hide
save button depending on form state. I noticed that ng:eval is
evaluated on
each form change but I have to fiddle with count using faking it to -1
so
that get/save requests wouldn’t make form changed. Is there a better
way
to do this?
I hope that my simple example with less than 200 lines might help
someone to
get started with angular.
I also implemented simple REST server which can be used to store data
in-memory and retrieve it. It currently doesn’t have any persistence,
but
I plan to store data in CouchDB directly (and even deploy angular
application in it) and it’s useful tool while trying different data
structures.
--
Dobrica Pavlinusic 2share!2flame
dpa...@rot13.org
Unix addict. Internet consultant. http://www.rot13.org/~dpavlin
VJ
We should think about creating a section on the web, something like
reference to projects using angular...
V.
On Nov 6, 2:56 pm, Dobrica Pavlinusic <dpav...@gmail.com> wrote:
> Thanks to great help I received at this list, I was basically able to
> accomplish my goal to write simple conference submission application
> within
> a week of first git clone of angular source from github.
>
> I think it might be useful to summarize my experience here, especially
> for
> people who are still wondering if angular is worth a try. Executive
> summary
> is: yes it is!
>
> If you want to take a look at source first, jump over to:
>
Misko Hevery
--
You received this message because you are subscribed to the Google Groups "Angular" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.
Dobrica Pavlinušić
> Hi Dobrica,
> glad that you have enjoyed coding in Angular. And tanks for the write up. Do
> you mind if I put some of your comments on our testimonial page?
Of course not :-)
> As far as displaying a save button only on change here is an example:
> http://angularjs.org/Cookbook:AdvancedForm
> The basic idea is that you have a master copy which came from the server and
> working copy which the user is editing.
> Cancel: means copy master to working
> Save: means save working and server return to master, then cancel
> Enable save: when master != working.
> again everything is explained
> here: http://angularjs.org/Cookbook:AdvancedForm
> -- misko
Damn. I should have noticed that, since I started from that example :-)
--
...2share!2flame... http://blog.rot13.org
Igor Minar
I looked at your code and noticed several things that we need to work
on when evangelizing and developing angular:
- angular makes TDD easy, and you should never write any angular code
without tests
- putting code into script tags in html templates will prevent you
from testing the code
- we need a better way to debug angular apps during development
- we need more examples of complicated web apps
- we need OOB integration with CouchDB as we think that they make an ideal match
Again, thanks for sharing your experience. Feel free to ask questions
when you need help.
/i
PS: and now go write some tests ;-)
Dobrica Pavlinusic
> I'm late to the party, but still wanted to say thanks :)
>
> I looked at your code and noticed several things that we need to work
> on when evangelizing and developing angular:
> - angular makes TDD easy, and you should never write any angular code
> without tests
I totally agree, comming from perl background :-)
> - putting code into script tags in html templates will prevent you
> from testing the code
True, it was just convinient to edit single file while experimenting.
> - we need a better way to debug angular apps during development
Only combination that I found useful was firefox with firebug which
returned useful stacktraces as opposed to chrome which didn't.
> - we need more examples of complicated web apps
> - we need OOB integration with CouchDB as we think that they make an ideal match
I'm using CouchDB as back-end right now, and it's mostly direct
translation from REST requests to couch.
I would love to deploy whole applicaton (javascript, html) into couchdb
itself, which would make deployment a simple replication to public
couchdb instance :-)
> Again, thanks for sharing your experience. Feel free to ask questions
> when you need help.
>
> /i
>
> PS: and now go write some tests ;-)
I took a look under test/ in angular distribution and they look really
nice and readable. However, I don't know how to run them. text.sh
results in:
java.lang.RuntimeException: java.net.ConnectException: Connection refused
which is probably java configuration error, but I don't really know
where to start with it.
Misko Hevery
- run server.sh
- navigate your browser to http://localhost:9876 and click capture
- run test.sh
- edit file
- goto #3
Igor Minar
if you want to get to the same state, you need to copy the following
files to your project dir:
- server.sh
- test.sh
- lib/jasmine-1.0.1/
- lib/jasmine-jstd-adapter/
- lib/jstestdriver/
you'll need to edit the first two files and fix the paths appropriately.
Additionally, you should copy angular files (all in
code.angularjs.org/angular-x.y.z.tgz) into lib/angular
Lastly, you'll need to create jsTestDriver.conf file in the root of
your project and fill it with something like:
server: http://localhost:9876
load:
- lib/jasmine-1.0.1/jasmine.js
- lib/jasmine-jstd-adapter/JasmineAdapter.js
- lib/angular-x.y.z.js
- src/*.js
- lib/angular/angular-mocks-x.y.z.js
- test/*.js
That's it. Let us know if you can't get it to work.
/i
VJ
for your project...
Angular should be only loaded as a lib, no reason for testing
angular :-D
I will do that.
V.
> > edit file
> > goto #3
>
> > -- Misko
> >> > > Thanks to great help I received at this list, I was basically able to
> >> > > accomplish my goal to write simple conference submission application
> >> > > within
> >> > > a week of first git clone of angular source from github.
>
> >> > > I think it might be useful to summarize my experience here, especially
> >> > > for
> >> > > people who are still wondering if angular is worth a try. Executive
> >> > > summary
> >> > > is: yes it is!
>
> >> > > If you want to take a look at source first, jump over to:
>
> >> > >http://www.rot13.org/~dpavlin
>
> >> > > --
> >> > > You received this message because you are subscribed to the Google
> >> > > Groups "Angular" group.
> >> > > To post to this group, send email to ang...@googlegroups.com.
> >> > > To unsubscribe from this group, send email to
> >> > > angular+u...@googlegroups.com.
> >> > > For more options, visit this group at
> >> > >http://groups.google.com/group/angular?hl=en.
>
> >> > --
> >> > You received this message because you are subscribed to the Google
> >> > Groups "Angular" group.
> >> > To post to this group, send email to ang...@googlegroups.com.
> >> > To unsubscribe from this group, send email to
> >> > angular+u...@googlegroups.com.
> >> > For more options, visit this group at
> >> >http://groups.google.com/group/angular?hl=en.
>
> >> --
> >> Dobrica Pavlinusic 2share!2flame
Igor Minar
is a project skeleton generator. I haven't thought much about the
implementation yet, but I'd like to get to the point where creating
angular projects would be as simple as creating rails or sprout core
apps.
$ ng "my-new-app"
creating my-new-app dir... done
creating my-new-app/lib dir... done
copying latest angular to /lib... done
copying latest jstestdriver to lib/... done
copying jasmine to lib/... done
copying jasmine adapter to lib/ done
generating jstdconfig file... done
...
...
$ ng start-test-server
done
and now you are ready to start hacking :)
/i