{"id":3018,"date":"2015-04-02T12:15:52","date_gmt":"2015-04-02T09:15:52","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=3018"},"modified":"2017-12-19T16:55:03","modified_gmt":"2017-12-19T14:55:03","slug":"angular-js-routing-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-routing-example\/","title":{"rendered":"Angular.js Routing Example"},"content":{"rendered":"

Hey geeks! Today’s example is related with routing in AngularJS. What I firstly found out, while searching over the net for similar resources, is that there isn’t yet any simple example, suitable for an Angular newbie. So, I’ll try to keep today’s post as simple as I can.
\n 
\n 
\n 
\n 
\n 
\n 
\n 
\n 
\n[ulp id=’LXJcMJZXSsqGXYW8′]<\/p>\n

1. What is routing in a web app<\/h2>\n

Generally, web applications make use of readable URLs that describe the content that resides there. A common example could be clicking on a homepage’s link: this means that a back-end action is being executed, that results to a different view on the client-side. We often confirm similar situations after interacting in the root of a web app ( \/<\/code> or index.html<\/code> ), by noticing a change to the browser’s url bar.<\/p>\n

2. Today’s example’s concept<\/h2>\n

In this example we will demonstrate a simple page navigation application. Suppose a homepage with two links and each one of them will redirect to a specified page.<\/p>\n

To get a better understanding of our concept, we ‘ll here implement an inline navigation. This means that we want our pages’ content to be displayed inside the initial\/home page<\/i>.<\/p>\n

AngularJS provides the ngView<\/a><\/code> directive to implement the fore-mentioned functionality. Specifically, ngView<\/code> directive complements the $route<\/a> service by including the rendered template of the current route into the main layout file. That is, each time the current route changes, the included view changes with it according to the configuration of the $route<\/code> service.<\/p>\n

So, keeping in mind that our index.html<\/code> contains a simple sentence with two links provided, assume we want to display the rendered templates (according to the clicked links) below that sentence; this should seem like:<\/p>\n

\r\n<p>Jump to the <a href="#first">first<\/a> or <a href="#second">second page<\/a><\/p>\r\n<div ng-view>\r\n<\/div>\r\n<\/pre>\n
As you see, the anchors’ targets are already named, so what is left, is to configure the respective routings for Angular.
\nSo, at this point we should have a complete homepage:<\/p>\n
index.html<\/code><\/u><\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<link rel="stylesheet" href="https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.2\/css\/bootstrap.min.css">\r\n\t<script src="http:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.2.26\/angular.min.js"><\/script>\r\n\t<script src="http:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.2.26\/angular-route.min.js"><\/script>\r\n\t<script src="script.js"><\/script>\r\n<\/head>\r\n    \r\n<body ng-app="RoutingApp">\r\n\t<h2>AngularJS Routing Example<\/h2>\r\n\t<p>Jump to the <a href="#first">first<\/a> or <a href="#second">second page<\/a><\/p>\r\n\t<div ng-view>\r\n\t<\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
In AngularJS, we can use the ngRoute<\/a><\/code> module for routing and deeplinking services and directives.<\/p>\n
Here are some important points before going on:<\/p>\n