0

I am building my first app with Angular and need some help to get off in the right direction. I should be a single page app.

My app consists of several "pages", like for example "Products" (with a list of products), Contact (with a contact form). The "Products" page should also link to an "Edit product" page where a productId is passed from the list on "Products".

The "old school" way of doing this would be to have a products.aspx and linking to editProduct.aspx?productId=123. That is the behavior I want to mimic.

My question is if I should use Tabs as navigation or if there is a better way of doing this that is up to date with Angular 1.2.

Thanks for your help!

peta
  • 139
  • 3
  • 18
  • The way you design your navigation does not depend on Angular, but on your front-end framework (Bootstrap, Yui, Foundation, ...). With Bootstrap, I usually use navbar menus, but tabs ar fine, too. – MarcoS Aug 17 '14 at 11:23

2 Answers2

1

you should use angular routing to delegate your page load via route provider. No need to depend on "tabs" to mimic a single page application (of course if you want tabs, you can use them, but if there are several pages, you can better set up angular routing).

Step 1 : create a shell page - index.html and setup ng-app and ng-view directive.

<html data-ng-app="myApp">
<body>
<a href="#/projects">Projects</a>
<div data-ng-view="">
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="App/app.js"></script>
</body>
</html>

Step 2 : create a js (app.js) file and set up angular routing and include it in the shell page (index.html) Here is an example - 

var app = angular.module("myApp", ["ngRoute"]);

app.config(function ($routeProvider) {
    $routeProvider.when("/login", { controller: "LoginController", templateUrl: "/app/login/login.html" });
    $routeProvider.when("/projects", { controller: "ProjectController", templateUrl: "/app/project/projects.html" });
    $routeProvider.when("/home", { controller: "HomeController", templateUrl: "/app/home/home.html" });
    $routeProvider.otherwise({ redirectTo: "/home" });
});

you can pass parameters via $routeParam. see - Pass URL to as $routeParam in AngularJS app and AngularJS - How to use $routeParams in generating the templateUrl?

Community
  • 1
  • 1
Rabi
  • 2,210
  • 17
  • 18
  • Thanks! whre do I put for example HomeController? In app.js or should I place it in a home.js that handles all logic in home.html? – peta Aug 17 '14 at 17:33
  • Better use separate js file for each controller. – Rabi Aug 18 '14 at 00:21
  • I've set up some html pages with routing, but when I place a form in one of the sub pages I realize that Bootstrap switches that I am using and the validation stops working. Any ideas why that happens and how to get around it? When I place the form in the shell page it works well. – peta Aug 18 '14 at 06:40
  • If I understand correctly you are trying to use angular validations. if you don't add novalidate attribute to
    while using a HTML5 compliant browser HTML5 validations will take place. So change your form :
    .....
    . If you still don't get the result, better create a plunk and add a new question.     – Rabi Aug 18 '14 at 06:46
  • Thanks for your help! I started a new question for this issue, it is not only about validation. http://stackoverflow.com/questions/25357684/bootstrap-switch-stops-working-with-angular-routing – peta Aug 18 '14 at 08:24
0

I suggest you have a look at the documentation for the angular-route module. This isn't included as part of the standard angular framework, but is available as an extra JS include on the Angular website.

The best place to start for info is here: https://docs.angularjs.org/tutorial/step_07

In general, modern browsers will treat anything before a '#' symbol as the URL to request from the server, and anything after it is ignored. Changing the portion of the URL after the '#' symbol will fire JavaScript events, but won't actually request anything new from the server. So, for example, linking from /MyOnePageApp/#/Products to /MyOnePageApp/#/Products/123 should cause angular to read from your route config without actually submitting a new page request to your web server.

If you would like more info, please let me know; I remember struggling with this when I first started with AngularJS.

Anthony Martin
  • 608
  • 6
  • 12