Angularjs Routing not working with other config options

Question

I'm new to angular trying to implement routing in my angularjs app. My app does the followings

user can login via facebook
then he/she can select a link to navigate

Following is my main angularjs file (with route and facebook connect, facebook connect is working :)), My problem is , routing doesnt work..

#app.js
var app = angular.module('myApp', ['facebook', 'ngRoute'])

    .config([
        'FacebookProvider',
        function(FacebookProvider) {
            var myAppId = '<FB app ID>';
            FacebookProvider.init(myAppId);

        }

    ],
     function($routeProvider) {
        $routeProvider
            // route for the home page
            .when('/add', {
                templateUrl : '../pages/add_form.html',
                controller  : 'addCtrl'
            })

            .when('/', {
                templateUrl : 'pages/home.html',
                controller  : 'mainController'
            });
      }  
    )

and when I add a debug pointer to line .when('/add', {control flow is not coming to that line at all.

Following is my href

<li><a href="#add">Add & Edit Recipes</a></li>

I'm following this tutorial for routing , any help would be greatly appreciated

** UPDATE **

my html

<!DOCTYPE html>
<html class="gt-ie8 gt-ie9 not-ie" data-ng-app="myApp">
  <head>
    //stuff
    <body class="theme-default no-main-menu main-navbar-fixed" data-ng-controller="MainController">

      <script>var init = [];</script>
      <div id="main-wrapper">
        // some html
        <ul class="nav navbar-nav">
      <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Home&nbsp;&nbsp;<i class="navbar-icon fa fa-angle-down"></i></a>
      <ul class="dropdown-menu" data-ng-show="logged">
        <li><a href="#/add">Add & Edit Recipes</a></li>
        <li><a href="#">Unpublished</a></li>
        <li><a href="#">Published</a></li>
        <li class="divider"></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      </li>
      <li><a href="#">Recipe</a></li>
    </ul>

        <div id="content-wrapper">
          <div ng-view>
            <%= yield %>
          </div>
        </div>
        <div id="main-menu-bg"></div>
      </div> 

    </body>
  </html>

Try . Also, look into your templateUrl. When you run the page in debug mode, go into the Network settings, and when you try to navigate to /add, see if you get a 404 or a 200 status code when it requests '../pages/add_form.html' — Onosa, Aug 25 '14 at 15:37
@Onosa, thanks for the quick reply, unfortunately nothing happens when I changed to "#/add" and I can see nothing in Networksettings as well — sameera207, Aug 25 '14 at 15:48
When you click on "Add & Edit Recipes", another request is not sent? Hmm... Could we see more of the html, then? I'm wondering if it's not part of your angular domain. Like, is it inside an ng-app or controller tag? — Onosa, Aug 25 '14 at 15:52
@Onosa, thanks again , I updated my HTML (only the parts needed to avoid the mess) :) — sameera207, Aug 25 '14 at 16:00
I've been looking at this over and over and I just can't figure anything out. Did you see that the tutorial you linked had a working code demo at http://embed.plnkr.co/dd8Nk9PDFotCQu4yrnDg/preview — Onosa, Aug 25 '14 at 20:48
@Onosa, yeah I checked that, but I guess the problem is there is something wrong when I try to combine both `route` and `facebook` connect modules in `app.js`. Thanks for your time again. — sameera207, Aug 25 '14 at 22:12

Angularjs Routing not working with other config options

0 Answers0