Where can I find examples of complete AngularJS apps? | Hacker News Reader

Where can I find examples of complete AngularJS apps?

harmlesscodingtips.wordpress.com

34 pointstacon24 comments

You can find my quite heavy live app DuckieTV (think popcorntime/sickbeard for TV-Shows, but with your own torrent-client) here:

Live demo: http://duckietv.github.io/DuckieTV/ (v1.0 w.i.p.)

Homepage: http://duckie.tv/ (v0.94 latest release)

Source: http://github.com/SchizoDuckie/DuckieTV/

It's not just a plain old 'todo' style simple app, but has grown quite big over the last year and is still a continuous work in progress. Since i'm working with a team of people that are not angular pro's yet (nor am I, but I'm getting there) I'm trying to document nearly every js file and it's functions, so it might be an interesting read :)

Some Features:

- Translated using angular-translate

- Uses UI-Router and UI-Router extras for navigation

- Works on Chrome, Opera, Node-Webkit, Android, iPad(somewhat), Safari

- Grabs your TV-Show data from Trakt.TV's API and stores it locally to present you a calendar.

- Local data storage using custom-built WebSQL framework (therefore webkit only). Supports auto-db-creation, fixtures, migrations, JS get/set property Accessors (You can use a db bound object in a template)

- Cross-domain XHR support detection and auto-fallback to a proxy

- DOM Parsing from external services to return extrernal sites' data as JS objects

- Connects to your local uTorrent / qBittorrent / Tixati / Transmission

- Autodownloads

- Sync back watched statusses to Trakt.TV

- Experimental chromecast integration

- etc etc etc.

The "Click here to turn off your uTorrent ads" link on http://schizoduckie.github.io/DuckieTV/ appears to be broken.

Thanks! Fixed by adjusting my release notes.

I can't show you the code because it is proprietary, but maybe you'll find this useful.

At my place of work we are in the process of moving over a hundred apps of differing levels of complexity into a single app suite. Each app is simply a pluggable module we add to the suite, with user permissions, and it just works. So far we've moved about 20 apps (and created some new ones) and it is working great.

My only advice would be to make sure any shared resources between "apps" have full testing implemented from the beginning.

https://github.com/franklovecchio/running.budget

Never completed the linked docs (there are some, though), but there's quite a bit here if you dig into the source.

Thank you for sharing this! I really liked your explanation of why you made it. I'm a little lost at how one might go about installing and running it -- I'm sure I'm missing something obvious. I've starred in hope of re-finding this later.

Yeah, looks awesome. Looking forward to documentation on running it.

Thanks!

I guess I'll work on the documentation :)

TLDR for now (pretty standard): npm install, bower install, update the .env file with creds/specific config, grunt run, foreman start.

Updated enough to get you going! Docs linked in the readme.

https://medium.com/@franklovecchio/3878951179cd

I've got an example seed project [1] for angular that uses the latest ES6 modules specification. I took the approach of not only giving an example of just an app, but also the entire workflow. Bundling together a bunch of different technologies to make a really well integrated solution. Most importantly, testing is treated as a first class citizen.

[1] https://github.com/lookfirst/systemjs-seed/

I found this sample application to be a good learning resource: https://github.com/lifeentity/chat-app/

There's also a corresponding YouTube video that walks you through the development: https://www.youtube.com/watch?v=SXDVmAwmux8

I'm curious to see real world deployments of Angular based apps, even without the source code.

FB's React is much younger and we already can see it used in lots of popular web apps, but given the Angular popularity among the devs there's surprisingly little.

Do you happen to know of any large React apps with source available? I've been looking for some.

I found this example helpful: https://github.com/DanWahlin/CustomerManagerStandard

Kibana is a pretty big one:

https://github.com/elastic/kibana

Kibana doesn't follow the current recommended style guide. However I see both worlds, Google currently recommends a flat style, like

component_a/ component_a-service.js component_a-controller.js component_b/ component_b-service.js ...

while most people will do: services/ customer-service.js hello-service.js controllers/ controller_a.js controller_b.js ...

However thats the hardest part of your application, to find the style which suites your use cases

Also, for instance in my case, The new code organisation styles didn't come out until after the whole project was set up and grew fast. Migrating them can be a PITA.

https://github.com/HabitRPG/habitrpg

habitrpg.com

I wrote a very neat web ui client for managing remote downloads in angularjs. It has a simple codebase to learn from:

http://github.com/ziahamza/webui-aria2

There's a quite complete angularjs + go app from this blog post: http://jbrodriguez.io/introducing-mediabase/

GridCraft is a relatively full featured spreadsheet app built with Angular. The source is proprietary though.

http://gridcraft.com

IMHO, you should try to setup some kind of minimal demo that doesn't include signing up, looks nice on the videos, but I would like to give it spin without handing out all my personal data.

Fair point. I know them, but I'm not involved.

This looks like a great one:

https://github.com/twostairs/paperwork

Reply on news.ycombinator.com