6 ms·
Practical AngularJS Examples
- aram 13y agoSidenote: the code editor used to live-preview/edit how examples work is great; does anyone know of any similar OS projects? Post author (Martin Angelov) said that he built it himself on Ace, however it doesn't seem to be OS.
- bsaul 13y agoAnyone got a post on how to structure big angular apps ? i've been struggling a bit with menu bars : it seems to me that you can't prevent copy/pasting the menu bars on each of your screens if you want to keep meaningfull URLs (as the routing component only maps a url to a single controller).
- davej 13y agoIt's difficult to know for sure without seeing exactly what you're trying to do but perhaps a directive is what you want? If you're looking for general app structure tips then the Angular generator for Yeoman is a good place to start.
- diggan 13y agoUse common sense. First step, having the files in one folder. Everything mixed up. You move into a structure of seperating services from directives, controllers from filters and so on. But the way most people seems to be doing it (the Angular way™) when it comes to the bigger applications is by splitting it up by functionality/modules. So you have a forum and therefore probably at least 3 different modules, "thread", "user" and "forum" or something similar. Just follow the MVC pattern with whatever filestructure that works with you and your team. Copy/pasting the menu bars? For that, I would have a directive which controls the display of the menu and acting accordingly. Only when declaration is needed and it's reusable. I don't understand your point about meaningful urls though, they are as meaningful as you make them.
- bsaul 13y agowell using a directive means you still have to put it everywhere ( in all your views). i'm more used to something like a master template with global menus and a content div. but for that you would need multiple ng-views or something similar, since my menu bars also need to be linked to the context.
- deleted 13y ago[deleted]
- dchuk 13y agoUI Router solves this problem pretty handily
- kops 13y agoI used this http://stackoverflow.com/questions/12592472/how-to-highlight-a-current-menu-item-in-angularjs http://stackoverflow.com/questions/12592472/how-to-highlight... Works fine, as long as your URL scheme structured enough. Toss me your email, and I can give you the controller and the tmeplate code with link to the live site. I would have copy-pasted here but don't want to turn HN into stackoverflow.
- chrisrhoden 13y agoYou can listen for the $routeChangeSuccess event from outside of your ng-view. You can attach arbitrary key=> value pairs to your routes to annotate them in ways that are particular to your app. Hope this helps, let me know if it is unclear.
- kops 13y agoAs for the structure, I tried Yeoman but quickly gave up due to learning curve and lack of time. I settled on a simple folder structure with minimal grunt file which uglifies and minifies my code. If minification/uglification wasn't a concern then I would have ditched grunt too. Not because I have issues with these cool tools, but purely because I just don't have time to understand them thoroughly. AngularJS itself helped fix my jQuery spaghetti wonderfully though.
- mbell 13y agoPut your menu bar code in your 'master' template (wherever you're defining the location for your ng-view). Use a separate Nav controller for the menu bar. It seems like your biggest issue is just data sharing, e.g. each page needs different menu items or something. Just create an Angular service that provides the backing data for the menu bar and exposes an API to other controllers to change things in the menu bar or get the value of a search field in the menu bar, etc. This type of thing is exactly what angular services are for.
- polyfractal 13y agoHere is one of my angular projects: https://github.com/polyfractal/elasticsearch-inquisitor https://github.com/polyfractal/elasticsearch-inquisitor I'm not sure I would classify this as a "big" app, but it has four tabs and is slowly growing in functionality. The menu bar (and highlighting) is a very simple controller and service. Obligatory disclaimer: I'm by no means an angular expert.
- sararob 13y agoIf you want to add a backend to your Angular app, check out AngularFire. Here's the quickstart guide and tutorial: http://angularfire.com/quickstart.html http://angularfire.com/quickstart.html
- lifeisstillgood 13y agoThe oreilly book is geared heavily towards best practise for just such apps.
- susi22 13y agoI really like this since the source code is well documented and explains everything right in the code. Not like todomvc which is supposed to be for beginners yet have almost no comments... https://github.com/tastejs/todomvc/blob/gh-pages/architecture-examples/angularjs/js/controllers/todoCtrl.js https://github.com/tastejs/todomvc/blob/gh-pages/architectur...
- flylib 13y agoyour right, they should prolly focus more on commenting there stuff then making an example in every obscure framework possible
- Kiro 13y agoI don't understand why a custom filter is needed in "4. Instant Search". I thought "<li ng-repeat="i in items | filter:searchString">" did the same thing.
- arbus 13y agoI'm guessing that he wanted to show how to write your own modifiable filter with a simple example
- nawitus 13y ago>ng-show will show an element if the value in the quotes is truthful, What's the definition of truthful?
- Hovertruck 13y agohttp://docs.nodejitsu.com/articles/javascript-conventions/what-are-truthy-and-falsy-values http://docs.nodejitsu.com/articles/javascript-conventions/wh...
- elgamine 13y agoIn case someone missed this, http://www.egghead.io/ http://www.egghead.io/ All angular basics pretty well explained
- jacques_chester 13y agoI disagree. I went through the whole series and then, when I sat down to write an angular app, found that I had no idea what I was doing.
- dexterbt1 13y agoI recently viewed a few of their videos and I find them too short, seemingly lacking. It might depend on the audience though. In my case, a little theory and architectural overview works better, and the official docs cover this well enough.
- sheldor 13y agoI found these to be excellent resources when I started with angular almost a year ago. http://www.yearofmoo.com/2012/08/use-angularjs-to-power-your-web-application.html http://www.yearofmoo.com/2012/08/use-angularjs-to-power-your... http://www.yearofmoo.com/2012/10/more-angularjs-magic-to-supercharge-your-webapp.html http://www.yearofmoo.com/2012/10/more-angularjs-magic-to-sup...