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!

AngularJS state not working correctly in Ionic

I'm new in Ionic and I have problem with state. I use Ionice tab template and I have few tabs. In one of the tab there is a link to another page. But 'state' doesn't work. It's probably something easy but I can't solve it.
My code is here (didn't connect it to ionic, just paste code). I want tab.read to work - the link to this page is in tab.dash.
// Ionic Starter App
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('account', {
url: '/account',
views: {
'': {
templateUrl: 'templates/tab-account.html',
controller: 'AccountCtrl'
}
}
})
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
})
.state('tab.read', {
url: '/read/:newsId',
views: {
'tab-dash': {
templateUrl: 'templates/tab-read.html',
controller: 'ReadCtrl'
}
}
})
.state('tab.informacje', {
url: '/informacje',
views: {
'tab-informacje': {
templateUrl: 'templates/tab-informacje.html',
controller: 'InformacjeCtrl'
}
}
})
.state('tab.zglos', {
url: '/zglos',
views: {
'tab-zglos': {
templateUrl: 'templates/tab-zglos.html',
controller: 'ZglosCtrl'
}
}
});
$urlRouterProvider.otherwise('/tab/dash');
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<ion-view view-title="TestApp">
<ion-content>
<div class="news">
<div class="list card" ng-repeat="item in news">
<div class="item item-dark">
<h2 class="light">{{ item.title }}</h2>
<p class="dark-light">{{ item.date }}</p>
</div>
<div class="item item-body">
<p>{{ item.text }}</p>
<button href="#/tab/read/{{ item.id }}" class="button button-small button-balanced">Przeczytaj całe</button>
</div>
</div>
</div>
</ion-content>
</ion-view>
Also account doesn't work correctly. But first I must solve problem with tab.read

use ui-sref to navigate using ui.router,
<div class="item item-body">
<p>{{ item.text }}</p>
<button ui-sref="tab.read({newsId: {{item.id}} })" class="button button-small button-balanced">Przeczytaj całe</button>
</div>

Setting up sub views and routes in ionic framework

I want to create and manage sub views in ionic but I couldn't figure out how to make it work, I want to make my login and dashboard pages as abstract, and all other pages be the sub views of dashboard :
for example : dashboard.fax or dashboard.inbox or dashboard.fax.send
I think my problem is my root ion_nav_view directive but I'm not sure, any suggestion how to make it work ?
index.html >>
<body ng-app="modiran">
<ion-nav-view name="menuContent"></ion-nav-view>
<!--<div data-ui-view="menuContent"></div>-->
</body>
partials/login.html >>
<ion-view view-title="login">
<ion-pane>
<div class="login">
<ion-content padding="true" scroll="false" ng-controller="SignInCtrl">
<div style="margin-top: 90%">
<div class="list list-inset login_inputs">
<label class="item item-input item-icon-right item-input-wrapper">
<i class="icon ion-person placeholder-icon"></i>
<input type="text" ng-model="user.username" placeholder="username" class="text-right">
</label>
</div>
<div class="list list-inset login_inputs">
<label class="item item-input item-icon-right item-input-wrapper">
<i class="icon ion-locked placeholder-icon"></i>
<input type="password" ng-model="user.password" placeholder="password" class="text-right padding-right">
</label>
</div>
<button class="item button button-block button-dark" ng-disabled="!user.username || !user.password"
ng-click="signIn(user)">login
</button>
</div>
</ion-content>
</div>
</ion-pane>
</ion-view>
partials/dashboard.html >>
<ion-view view-title="dashboard">
<ion-pane>
<ion-header-bar class="bar bar-header bar-dark" align-title="right">
<button class="button"><img src="img/navcon-logo.png" style="width: 35px; height:35px;"/></button>
<h1 class="title">modiran</h1>
</ion-header-bar>
<ion-content has-header="true" scroll="false" ng-controller="DashboardCrtl">
<div style="margin-top: 90%" class="dashboard">
<!--<i class="dash-icon"><img src="../img/24.png" style="width: 60%;height: 60%;"></i>-->
<img ng-src="img/Menubtn.png" style="width: 5%;height: 5%;margin-top: -8%;float: left;">
<img ng-src="img/MenubtnR.png" style="float: right;width: 5%;height: 5%;margin-top: -8%;">
<div class='circle-container'>
<a class='center' ng-click="GoTo('SmartOffice')"><img src="img/24.png"></a>
<a class='deg0'>
<img src='img/3.png'
onmouseover="this.src='img/3sel.png'"
onmouseout="this.src='img/3.png'">
<!--onmouseover="this.src='../img/3sel.png'"-->
</a>
<a class='deg45'>
<img src='img/4.png'
onmouseover="this.src='img/4sel.png'"
onmouseout="this.src='img/4.png'">
</a>
</div>
</div>
</ion-content>
</ion-pane>
</ion-view>
app.js >>
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
abstract: true,
templateUrl: 'partials/login.html',
controller: 'SignInCtrl'
})
.state('dashboard', {
url: '/dashboard',
abstract : true,
templateUrl: "partials/dashboard.html",
controller: 'DashboardCrtl'
})
.state('dashboard.SmartOffice', {
url: '/SmartOffice',
views: {
'menuContent': {
templateUrl: "partials/SmartOffice.html",
controller: 'SmartOfficeCtrl'
}
}
})
.state('dashboard.Fax', {
url: '/Fax',
views: {
'menuContent': {
templateUrl: "partials/fax/Fax.html",
controller: 'ّFaxCtrl'
}
}
})
$urlRouterProvider.otherwise('/login');
})

Try the following changes:
Remove name="menuContent" from the <ion-nav-view>. Why? login state doesn't specify where template should be loaded, by default it will load in the only available <ion-nav-view>, without a name. In case you want to add it, add it this way:
views: {
'menuContent': {
templateUrl: "partials/login.html",
controller: 'SignInCtrl'
}
}
Similarly for dashboard. To keep it simple, avoid giving name unless you have more than one nav views where templates can be loaded.
Your login state shouldn't be abstract state because you want to show login page.
You might need to check if user is logged in or not and conditionally show login or dashboard. You can do this in app.run block.

Remove navigation bar in sidemenu based template in Ionic/Angular JS

I created an application using the Ionic Framework and it works great. It is based on the sidemenu-template, so I always have a navigation bar on top of the application.
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-calm">
<ion-nav-back-button></ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon-round" menu-toggle="left"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-content>
<a menu-close href="#/app/bla">
<div id="profile-item">
<i class="icon ion-card"></i> Bla
</div>
</a>
<a menu-close href="#/app/register">
<div id="profile-item">
<i class="icon ion-card"></i> Sign-up
</div>
</a>
<a menu-close href="#/app/login">
<div id="profile-item">
<i class="icon ion-card"></i> Login
</div>
</a>
</ion-content>
</ion-side-menu>
</ion-side-menus>
app.js:
$stateProvider.state('app.login', {
url: '/login',
views: {
'menuContent': {
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
}
}
})
$stateProvider.state('app.start', {
url: '/start',
views: {
'menuContent': {
templateUrl: 'templates/start.html',
controller: 'StartsCtrl'
}
}
})
Now for the registration and login view I don't want to show the navigation bar at all. How can I remove it on specific view? I find this hard because the nav-bar is defined in menu.html which is called before the views.

I had to modify the routes definition in app.js:
$stateProvider.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
})
$stateProvider.state('start', {
url: '/start',
templateUrl: 'templates/start.html',
controller: 'StartsCtrl'
})
Only removing the toogle button did not work, as the user was still able to swipe right on the screen to show the menu.

Simply hiding the menu-toggle button should do the trick for you.
Set a variable on the rootScope based on which you can show/hide the navigation bar toggle button:
<button ng-if="$root.isShowNav" class="button button-icon button-clear ion-navicon-round" menu-toggle="left">
Set this variable's value inside your app's .run:
.run(function($ionicPlatform, $rootScope) {
// $rootScope.isShowNav = true/false based on some condition.
}
For example, here you could do something like this:
.run(function($ionicPlatform, $rootScope) {
$rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState) {
if (toState.name !== "app.login" || toState.name !== "app.start") {
$rootScope.isShowNav = true;
}
else {
$rootScope.isShowNav = false;
}
}
}