Develop Reference

angularJS routes(with no error) not working

File Structure <-- attached here
I am making a angularJS web app with asp.net MVC 4.I have carefully configured routes but my partial view is not being injected, although URL changes to that specific route. I don't know what I am missing. I think its something with my file structure but couldn't figure it out.
'use strict';
var app = angular.module('foodyApp', ['ngMaterial', 'ngRoute', 'ngMessages'])
.config(function ($mdThemingProvider) {
$mdThemingProvider.theme('default')
.primaryPalette('green')
.accentPalette('red')
.dark();
})
.run(function () {
console.log("App Runs fine");
})
.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when("order", {
templateUrl: "~/Partials/order",
controller: "orderController"
})
.when("menu", {
templateUrl: "~/Partials/menu",
controller: "menuController"
})
.when("about", {
templateUrl: "~/Partials/about",
controller: "aboutController"
})
.when("contact", {
templateUrl: "~/Partials/contact",
controller: "contactController"
})
.when("billing", {
templateUrl: "~/Partials/billing",
controller: "billingController"
})
$locationProvider.html5Mode(
{
enabled: true,
requirebase: false
})
});
#{
ViewBag.Title = "FCMS";
}
<header md-page-header md-gt-sm>
<div md-header-picture style="background-image:url(img/pizza.jpg)">
</div>
<md-toolbar scroll>
<div class="md-toolbar-tools">
<h2 md-header-title flex md-gt-sm>Food Court Managment System</h2>
<md-button href="menu" aria-label="About">
Menu
</md-button>
<md-button href="about" aria-label="About">
About
</md-button>
<md-button href="contact" aria-label="Contact">
Contact Us
</md-button>
</div>
</md-toolbar>
<div class="main-fab" ng-controller="orderController">
<md-button href="order" class="md-fab md-accent" aria-label="Order Now">
<md-icon md-svg-src="img/ic_restaurant_menu_black_48px.svg"></md-icon>
</md-button>
</div>
</header>
<section>
<div flex-gt-md="100" flex layout="column">
<div layout="row">
<div>
<div>
<md-content layout-padding>
<div>
<ng-view> </ng-view>
</div>
</md-content>
</div>
</div>
</div>
</div>
</section>

You left out the .html extension for each of the templates
Try
$routeProvider
.when("order", {
templateUrl: "/Partials/order.html",
controller: "orderController"
})
.when("menu", {
templateUrl: "/Partials/menu.html",
controller: "menuController"
})
.when("about", {
templateUrl: "/Partials/about.html",
controller: "aboutController"
})
.when("contact", {
templateUrl: "/Partials/contact.html",
controller: "contactController"
})
.when("billing", {
templateUrl: "/Partials/billing.html",
controller: "billingController"
})

$state.go leads me to the otherwise statement and does not transition to the right state

I am trying to move into the menu.home state but when I do $state.go('menu.home) it does not do anything and it goes into the otherwise statement. Not sure what I am doing wrong.
Controller.js
$state.go('menu.home');
routes.js
angular.module('app.routes', [])
.config(function($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
.state('login', {
cache: false,
url:'/login',
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
})
.state('menu.home', {
cache: false,
url: '/home',
views: {
'side-menu21': {
templateUrl: 'templates/home.html',
controller: 'MapCtrl' //'homeCtrl'
}
}
})
.state('menu.cart', {
url: '/page2',
views: {
'side-menu21': {
templateUrl: 'templates/cart.html',
controller: 'cartCtrl'
}
}
})
.state('menu.cloud', {
url: '/page3',
views: {
'side-menu21': {
templateUrl: 'templates/cloud.html',
controller: 'cloudCtrl'
}
}
})
.state('menu.test', {
cache: false,
url: '/test',
views: {
'side-menu21': {
templateUrl: 'templates/test.html',
controller: 'testCtrl'
}
}
})
.state('menu', {
url: '/side-menu21',
templateUrl: 'templates/menu.html',
abstract: true
})
//$urlRouterProvider.otherwise('/login')
$urlRouterProvider.otherwise(function($injector, $location) {
console.log("Could not find: " + JSON.stringify($location));
$location.path('/login');
})
});
every time I try to do $state.go('menu.home') this is the output i get:
Could not find: {"$$protocol":"http","$$host":"localhost","$$port":8100,"$$path":"/app/sear ch","$$search": {},"$$hash":"","$$url":"/app/search","$$absUrl":"http://localhost:8100/#/ap p/search","$$state":null,"$$replace":false}
login.html
<ion-view view-title="Login" id="login" name="login-view">
<ion-content class="padding">
<!--##########################Facebook Login#################################-->
<div class="facebookLogin">
<a class="facebook-sign-in button button-royal" ng-click="facebookSignIn()">Login with Facebook</a>
</div>
<!--#######################END Facebook Login#################################-->
<div class="list list-inset">
<label class="item item-input">
<input type="text" placeholder="Username" ng-model="data.username">
</label>
<
label class="item item-input">
<input type="password" placeholder="Password" ng-model="data.password">
</label>
</div>
<button class="button button-block button-calm" ng-click="login()">Login</button>
</ion-content>
</ion-view>
home.html
<ion-view title="Test" id="home" class=" ">
<ion-content padding="true" class="has-header"></ion-content>
<body ng-app="app" ng-controller="MapCtrl">
<!-- Google Maps -->
<link href="css/style.css" rel="stylesheet">
<ion-content scroll="false">
<div id="map-canvas"></div>
<!-- END GOOGLE MAPS!-->
<!-- Test button
<div class="TestButton">
<div class="button button-assertive" ng-click="Test()" ng-hide="hideTestButton">
<a class="button">Test</a>
</div>
</div>
End Request Test button----------->
<!-- OS/Production selection footer-->
<ion-tabs class="tabs-icon-top">
<ion-tab title="Apple" icon-off="ion-social-apple" icon-on="ion-social-apple" href="#/app/search" on-select="appleTab()">
<ion-nav-view name="tab-search"></ion-nav-view>
</ion-tab>
<ion-tab title="Windows" icon-off="ion-social-windows" icon-on="ion-social-windows" href="#/app/browse" on-select="windowsTab()">
<ion-nav-view name="tab-browse"></ion-nav-view>
</ion-tab>
<ion-tab title="Mobile" icon-off="ion-iphone" icon-on="ion-iphone" href="#/app/playlists" on-select="mobileTab()">
<ion-nav-view name="tab-playlists"></ion-nav-view>
</ion-tab>
<ion-tab title="Network" icon-off="ion-wifi" icon-on="ion-wifi"" href="#/app/playlists" on-select="otherTab()">
<ion-nav-view name="tab-playlists"></ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-content>
</body>
</ion-view>
If I comment out : $location.path('/login'); then it works. Not sure why this happens, Please help!

Is that all that is in your controller.js file? Maybe there is something in there that is preventing hitting that state. Make sure in your main html file you have <main ui-view></main> to establish all your routes.

Got it, so it does not like the href that i have in my ion-tabs in the home.html. It might be trying to resolve them which are not point to valid urls. Once I removed the href it worked perfectly fine. Thanks for all the help everyone!

Problems with implementing separate controller for each md-tab

My template HTML file 'testview.html' looks like this:
<div class="container-fluid">
<md-toolbar>
<h2 class="md-toolbar-tools">
<span>Test View</span>
</h2>
</md-toolbar>
<md-tabs md-stretch-tabs
md-selected="selectedIndex">
<md-tab label="basicConfig">
</md-tab>
<md-tab label="awardSettings">
</md-tab>
</md-tabs>
<div id="content" ui-view flex> </div>
</div>
This is my route controller 'testview.js':
angular
.module('app.testview')
.controller('TestView', TestView)
.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('basicConfig', {
url: '/basicConfig',
templateUrl: 'app/testview/testview_partials/basicConfig.html',
controller: 'BasicConfig as vm'
})
.state('awardSettings', {
url: '/awardSettings',
templateUrl: 'app/testview/testview_partials/awardSettings.html',
controller: 'AwardSettings as vm'
})
}]);
TestView.$inject = ['$state', '$scope', '$location'];
function TestView(state, $scope, $location) {
$scope.selectedIndex = -1;
$scope.$watch('selectedIndex', function(current, old) {
switch (current) {
case 0:
$location.url("/basicConfig");
break;
case 1:
$location.url("/awardSettings");
break;
}
});
}
Here's what my awardSettings.html looks like:
<form name="awardSettingsForm" id="awardSettingsForm">
<md-content flex layout-padding layout="row" layout-sm="column" layout-align-sm="space-between start" layout-align="space-between center">
<label style="font-size: 24px;">Award Settings</label>
</md-content>
</form>
I have my basicConfig & awardSettings html & controllers defined in separate files. I know that my routes are working correctly. But my problem is that I want the contents of basicConfig.html & awardSettings.html within their tabs. But that's not working. IT looks like below when I click on the tab
Any help would be appreciated. Thanks!

Never mind. I figured out what I was doing wrong. Had to change sub states to be part of the main state ie. change state from 'basicConfig' to 'testview.basicConfig'.
function stateConfig ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('testview.basicConfig', {
templateURL: 'app/testview/testview_partials/basicConfig.html',
controller: 'BasicConfig'
})
.state('testview.awardSettings', {
template: '<h3>Award!!</h3>',
controller: 'AwardSettings'
})
}

Angular route not working in custom menu directive

I am having hard time to route to particular url since the menu is coming from directive. Below is the code:
The Route:
var myApp = angular.module('myApp', ['ngRoute', 'mainMenu']);
myApp.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'pages/main.html'
})
.when('/home', {
templateUrl: 'pages/home.html'
})
.when('/bollywoodGossips', {
templateUrl: 'pages/bollywoodGossip.html'
})
.when('/bollywoodNews', {
templateUrl: 'pages/bollywoodNews.html'
})
.when('/bollywoodEvents', {
templateUrl: 'pages/bollywoodEvents.html'
})
.when('/bollywoodFitness', {
templateUrl: 'pages/bollywoodFitness.html'
})
.when('/bollywoodWallpaper', {
templateUrl: 'pages/bollywoodWallpaper.html'
})
.otherwise('/', {
templateUrl: 'pages/main.html'
})
})
The Directive:
(function(){
var mainMenu = angular.module('mainMenu', []);
var newMenu = function($location) {
var link = function(scope, element, attrs) {
element.parent('a.menuBtn').click(function(){
element.toggleClass('test');
});
}
return {
restrict: 'E',
replace: true,
templateUrl: 'pages/directiveTemplate/menu.html',
link: link
}
}
newMenu.$inject = ['$location'];
mainMenu.directive('newMenu', newMenu);
}());
The Menu Template:
<ul class="dropdownMenu">
<li>Bollywood Gossip</li>
<li>Bollywood News</li>
<li>Events</li>
<li>Celeb fitness Mantra</li>
<li>Celeb Wallpapers</li>
</ul>
And the html:
<div class="mainMenu">
<p>
<span class="breadCrumb">Home</span>
<a href="" class="menuBtn">Menu <span class="glyphicon glyphicon-th-large"></span>
<new-menu></new-menu>
</a>
</p>
</div>
The Index file:
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="mainHeader">
<img src="imgs/mainHeader.jpg" alt="" class="img-responsive">
</div>
</div>
</div>
<div ng-view></div>
<div class="row">
<div class="col-xs-12">
<div class="footer">
<p>©2016 All rights reserved. NAYSA VAS Communications Pvt.Ltd.</p>
</div>
</div>
</div>
</div>
This renders correctly but when i click on any link inside the menu it does not route to that particular url. e.g #/bollywoodGossips .should go to index.html#/bollywoodGossips but it is not routing and remains still on index.html#/home. Please help I am new to directives..

Ionic app side menu with a login page

I am building an app that it's navigation based on a side menu. The problem I am having is trying to implement it along with a login page, that is not part of the side menu's scope, so that only after the login, the side menu navigation shall be used.
here's my app.js:
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('signin', {
url: '/sign-in',
templateUrl: 'templates/sign-in.html',
controller: 'SignInCtrl'
})
.state('sideMenu', {
url: '/sideMenu',
abstract: true,
templateUrl: 'templates/sideMenu.html',
controller: 'sideMenuCtrl'
})
.state('home', {
url: '/home',
templateUrl: 'templates/home.html',
controller: 'homeTabCtrl'
})
//})
$urlRouterProvider.otherwise('/home');
})
This is the Side menu's HTML:
<ion-view ng-controller="sideMenuCtrl">
<ion-pane ion-side-menu-content>
<ion-nav-bar type="bar-assertive" back-button-type="button-icon" back-button-icon="ion-arrow-left-c"></ion-nav-bar>
<ion-nav-view>
</ion-nav-view>
</ion-pane>
<!-- Left Side Menu -->
<ion-side-menu side="right">
<ion-header-bar class="bar bar-header bar-assertive">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content has-header="true">
<ion-list>
<ion-item ng-click="goTo(item.link)" class="item item-icon-left" ng-repeat="item in list" menu-close>
<!-- <i ng-class="item.iconClass"></i> -->
{{item.text}}
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
The controller:
.controller('sideMenuCtrl', function ($scope, $location, MenuService) {
console.log('Side menu is reloaded');
// "MenuService" is a service returning mock data (services.js)
$scope.list = MenuService.all();
$scope.goTo = function(page) {
console.log('Going to ' + page);
$scope.sideMenuController.toggleLeft();
$location.url('/' + page);
};
})

I have made a small demo for you,
Plunker Demo
html
<ion-view hide-nav-bar="true " class="view-bg-blue">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
</ion-nav-buttons>
<ion-content padding="true">
<h3 class="text-center">Welcome To Landing Page</h3>
<div class="row">
<div class="col">
<div class="text-center">
<h4>My App</h4>
<div class="row">
<div class="col">
<input placeholder="User">
</div>
</div>
<div class="row">
<div class="col">
<input placeholder="password">
</div>
</div>
<a class="button icon-right ion-chevron-right button-calm" ng-click="open()">Login</a>
</div>
</div>
</div>
</ion-content>
</ion-view>
app.js
var app = angular.module('myApp', ['ionic']);
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tabs', {
url: '/tab',
controller: 'TabsCtrl',
templateUrl: 'tabs.html'
})
.state('tabs.home', {
url: '/home',
views: {
'home-tab': {
controller: 'homeCtrl',
templateUrl: 'home.html'
}
}
})
.state('tabs.settings', {
url: '/settings',
views: {
'settings-tab': {
controller: ' signOutCtrl',
templateUrl: 'settings.html'
}
}
});
$stateProvider
.state('landing', {
url: '/landing',
controller: 'landingCtrl',
templateUrl: 'landing.html'
});
$urlRouterProvider.otherwise('/landing');
});
If you need any additional feature,Please let me know?Thanks