2

I'm trying to learn angular by building this small web app that has this layout:

design

Simply, the Header's going to say "first app!" each content nav button is going to be a different category (sports, music, etc) and each one is going to pull some public api and display it in a list on the content page in a table. I think I'm ganna have some search and filtering features and bread crumb if I decide to get fancy and add submenus.

Anyways, I understand the gist of Angular and I went through the phoneCat app tutorial on the angular site: https://docs.angularjs.org/tutorial and I have been watching bits and pieces of youtube videos on angular as well.

Unfortunately I'm still confused when it comes to transposing the concepts of routing/modules/services/directives/etc... into making an actual web app/site

I'm looking for someone to kind of give me a super high level view of how they would make this app using angular and explain it like I'm a total noob and maybe offer some simple rule of thumb tricks to think about angular in terms of web app components (eg. when I think of the data in a json file and I want to display it, what could I think of that in terms of angular concepts (data/model/view?) or ie: you'll be using ng-repeat a lot, etc.)

Here are some questions I have off the bat:

  1. How many .html files should I have (views?) Do I make a .html for each content page?

  2. The Header, Nav and bread crumb (if I use sub menus) will always be displayed to the user. Does this mean I have a index.html page with <div ng-view></div> in the body and then have a main.html with the header/nav/breadcrumb, and then have content1.html / content2.html/ content3.html etc separate? If this is true then how do I use more than one ng-view? Or is this where the concept of routing comes in? Could someone explain how I would set up these pages from a ng-view/routing perspective at the simplest level?

  3. What does angular.module() do? and when do I use it? I see it at the top of controllers, routing, and services files, etc...

  4. Could someone use an example when and how they use a service / factory?

I feel like this is asking a lot for someone to explain. I'm not very computer-sciency minded and I feel stuck in this place where I feel like I can almost build a really cool app but just need to put all the pieces in the right place.

Thanks

Improve this question
1
  • Just in case anyone stumbles on this, I want to include a video I found that REALLY helped me understand how to put it all together: youtube.com/watch?v=QETUuZ27N0w Commented May 18, 2014 at 21:01

1 Answer 1

Reset to default
1

Great questions, I know I had my fare share when I first started. I am going to answer each question with a link that will give you detailed information of each.

  1. yes, you make a html page for each content page(aka view)

  2. Yes, your index page will contain all the static content, and you will use your ng-view directive to state the area that is dynamic. ng-views are the only way to make set dynamic content. You can use: switches, hide/show, and ng-repeats. For multiple views I would suggest you either user a combination of ng-views and in the views use a switch. If saving the state is very important, than I suggest you look at angular-ui https://github.com/angular-ui/ui-router

  3. Angular.module() is a way to separate/ modularize your code. This means that it is only used in the parts that you explicitly state. When used the dependencies stated will be injected.

  4. A great example of how to use the factory module, is in the angularjs tutorial from the official site. I would also suggest some great videos from egghead.io -https://www.youtube.com/watch?v=HvTZbQ_hUZY

If you are looking into a mobile solution, you might want to check out Ionicframework. It is angularjs but with added magic for mobile.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you, as I was reading your commend I found this video (youtube.com/watch?v=QETUuZ27N0w) tut with ui-router (instead of using ng-view) as an excellent tutorial for how angular comes together

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.