Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Routing in AngularJS

Posted on 2014-02-11
2
Medium Priority
?
823 Views
Last Modified: 2014-02-12
Hi Experts,

I have following sample working code that uses angularjs routing on client side.Basically in reality I will have  vertical navigation bar with Add New order ,Show order and other menu items. Now what I want is if I select "Add New order" it should show  horizontal navigation bar  with "Add","Edit" and "Delete" tabs.

I am little bit confused where should I write routing details for "Add", "Edit" and Delet tabl for the  "Add New order" menu item using angularjs? I need sample working code for this.

Routing working example

THanks in Advance
0
Comment
Question by:ksd123
2 Comments
 
LVL 83

Accepted Solution

by:
leakim971 earned 2000 total points
ID: 39852939
You can add the Angular UI router :
https://github.com/angular-ui/ui-router
One of the demo : http://plnkr.co/edit/u18KQc?p=preview

It's similar to routeProvider but you use a stateProvider instead.

I don't really like it(but I'm not god :), I prefer to use directive.
So in each oif your page add_order.html and show_order.html you can just add :
<horizontal-navigation><horizontal-navigation>

So you create a directive for this new HTML tag :

sampleApp.directive("horizontalNavigation", [function() {
	return {
		restrict:"E",
		link: function(scope, element, attrs) {
// code
		},
		templateUrl:"your-horizontal-bar.html" // the template
	};
}]);

Open in new window


anywhere you put the tag : <horizontal-navigation><horizontal-navigation>
it will be replaced by your cached template your-horizontal-bar.html
0
 

Author Closing Comment

by:ksd123
ID: 39855474
Thank you
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Suggested Courses

571 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question