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"
})

Angular ui.router Reload Template

First of all, I'm sorry for a long question, but it just has to be like that. Unfortunately...
I have a couple of templates and a couple of routing logic, all linked in separate files. For some reason the template I want to load (which depends on the region selected), doesn't load its region template. It loads, if I click it second time. Please note I have tried ever solution from this topic:
Reloading current state - refresh data
Nothing worked for me.
I have managed to resolve one (another region) of them by placing "{reload:true}" inline in the html code, like this:
<a data-ui-sref="uk-web" data-ui-sref-opts="{reload:true}">Energy Consultant</a>
Now I did the same for another template and it is not working. This is my html:
<div class="btn us-btn" data-ng-controller="carCtrlUs">
<script type="text/ng-template" id="careersTplUs.html">
<div class="closer">
<span class="close-me" data-ng-click="ok()">X</span>
</div>
<uib-accordion close-others="true">
<div uib-accordion-group class="modal-body modone panel-default pull-right" is-open="false">
<uib-accordion-heading>
<p class="car-heading">Sales Department <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
</p>
</uib-accordion-heading>
<ul>
<li><a data-ui-sref="us-web" data-ui-sref-opts="{reload:true}">Energy Consultant</a></li>
<li><a data-ui-sref="us-crm" data-ui-sref-opts="{reload:true}">Client Relationship Manager</a></li>
</ul>
</div>
<div class="modal-body modtwo panel-default pull-right" uib-accordion-group is-open="false">
<uib-accordion-heading>
<p class="car-heading">Marketing Department <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
</p>
</uib-accordion-heading>
<ul>
<li><a data-ui-sref="us-web" data-ui-sref-opts="{reload:true}">Web Developer</a></li>
<li><a data-ui-sref="us-crm" data-ui-sref-opts="{reload:true}">Marketing Coordinator</a></li>
</ul>
</div>
</uib-accordion>
<div class="show-me" ui-view></div>
</script>
<button class="btn" ng-click="open()" data-ui-sref="us-intro">United States</button>
</div>
app.js:
var app = angular.module('carApp', ['ngAnimate', 'ngSanitize', 'ui.bootstrap', 'ui.router']);
controller, for this template:
app.controller('carCtrlUs', function($scope, $http, $uibModal) {
$http.get('json/jobs-us.json').then(function(response) {
$scope.placeholder = response.data.default;
$scope.specs = response.data.specs;
$scope.open = function() {
var modalContent = $uibModal.open({
templateUrl: 'careersTplUs.html',
controller : 'modalContentCtrlUs',
controllerAs: '$ctrl',
size: 'lg',
backdropClass: 'backdropOver',
openedClass: 'modal-opened',
resolve: {
items: function() { return $scope.specs; },
items2: function() { return $scope.placeholder;}
}
})
console.log($scope.placeholder);
console.log($scope.specs);
console.log($scope.specs.web-dev);
}
});
});
app.controller('modalContentCtrlUs', function($scope, $uibModalInstance, items, items2) {
$scope.specs = items;
$scope.placeholder = items2;
$scope.ok = function() {
$uibModalInstance.close();
}
});
factory.js:
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state("us-intro", {
url:"/intro",
templateUrl: "templates/us/start.html"
})
$stateProvider
.state("us-web", {
url: "/web-developer/",
templateUrl: "templates/us/web-developer.html",
})
.state("us-crm", {
url: "/crm/",
templateUrl: "templates/us/crm.html"
})
/*next .state*/
}]);
Template:
<div ng-repeat="(k, v) in specs.webdev">
<h3>{{::v["job-title"]}}</h3>
<p>{{::v["job-body"]}}</p>
United States Apply Here:
<p>{{::v["job-apply"]}}</p>
</div>
As you can see I'm using ui-bootstrap (modal and accordion, since it is all in a modal window).
What can I do to make it refresh instantly? I'm stuck for days on this and it is frustrating... What am I doing wrong here?
EDIT: Please note that I know "::" is for one-way data binding. I've tried without it and the result is the same. I can probably resolve this by placing the data in question in the .json file, but that would really be an ugly hack.

<div ng-repeat="(k, v) in specs.webdev">
<h3>{{::v["job-title"]}}</h3>
<p>{{::v["job-body"]}}</p>
United States Apply Here:
<p>{{::v["job-apply"]}}</p>
</div>
The "::" avoid data binding to reduce digest cycle. Try to remove them.

<a data-ui-sref="uk-web" data-ui-sref-opts="{reload:true}">Energy Consultant</a>
// it should be
<a data-ui-sref="us-web" data-ui-sref-opts="{reload:true}">Energy Consultant</a>

I have solved this..What I wanted to do is to make the "URL" the same. I have changed the url to manifest the region by the region code, so it is working now.
For example:
UK:
$stateProvider
.state("de-web", {
url: "/web-developer-de",
templateUrl: "templates/de/web-developer.html",
})
.state("de-crm", {
url: "/crm-de",
templateUrl: "templates/de/crm.html"
})
Italy:
$stateProvider
.state("it-web", {
url: "/web-developer-it",
templateUrl: "templates/it/web-developer.html",
})
.state("it-crm", {
url: "/crm-it",
templateUrl: "templates/it/crm.html"
})
United States:
$stateProvider
.state("us-web", {
url: "/web-developer-us",
templateUrl: "templates/de/web-developer.html",
})
.state("us-crm", {
url: "/crm-us",
templateUrl: "templates/de/crm.html"
})
Although this works, I'm not happy. How can it be achieved that the templates are being loaded into the same url?

Angular routes giving 404 error

I'm getting 404 errors when I try to click through my angular routes, and I'm not sure whats wrong. I have these links:
Home
Portfolio
About
Travel
And the routes are set up here in routes.js
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'home.html',
controller: 'mainController'
})
.when('/portfolio', {
templateUrl: 'portfolio.html',
controller: 'mainController'
})
.when('/about', {
templateUrl: 'about.html',
controller: 'mainController'
})
.when('/travel', {
templateUrl: 'travels.html',
controller: 'mainController'
});
});
My understanding is that when I click on the , for instance, the controller will look for /about in the routes provider. Then it will see that the template about.html fills that request, and then about.html will fill into ng-view. The request is just giving me a 404 at http://localhost:8000/about, though. What am I doing wrong?
Getting no errors, but here's the rest of my angular app for reference:
var app = angular.module('app', ['ngRoute']);
app.controller('mainController', ['$scope', '$routeParams', function($scope, $routeParams) { }]);
And the HTML
<div class="mountainSection">
<div class="ang-wrap" ng-view></div>
</div>
<div class="controlPanel">
<div class="buttonWrap">
<div class="home button">
Home
</div>
<div class="divider">|</div>
<div class="portfolio button">
Portfolio
</div>
<div class="divider">|</div>
<div class="about button">
About
</div>
<div class="divider">|</div>
<div class="intl button">
Travel
</div>
</div>
</div>

Argument 'AppCtrl' is not a function, got undefined, can't seem to fix

This is my angularApp.js:
var app = angular.module('intuo', ['ui.router','ngMaterial', 'ngAnimate']);
app.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider.state('home', {
url : '/home',
templateUrl : '/home.html',
controller : 'MainCtrl'
}).state('login', {
url : '/login',
templateUrl : '/login.html',
controller : 'AuthCtrl',
onEnter : ['$state', 'auth',
function($state, auth) {
if (auth.isLoggedIn()) {
$state.go('home');
}
}]
}).state('register', {
url : '/register',
templateUrl : '/register.html',
controller : 'AuthCtrl',
onEnter : ['$state', 'auth',
function($state, auth) {
if (auth.isLoggedIn()) {
$state.go('home');
}
}]
});
$urlRouterProvider.otherwise('home');
}]);
This is my bootstrap.js file (basically just create new module):
angular.module('controllers', []);
This is my AppCtrl.js:
angular.module('controllers')
.controller('AppCtrl', ['$scope', '$mdSidenav',
function($scope, $mdSidenav){
$scope.toggleSidenav = function(menuId) {
$mdSidenav(menuId).toggle();
};
}
]);
Example of other controller i have (probably will get me the same error):
angular.module('controllers')
.controller('NavCtrl', ['$scope', 'auth',
function($scope, auth) {
$scope.isLoggedIn = auth.isLoggedIn;
$scope.currentUser = auth.currentUser;
$scope.logOut = auth.logOut;
}
]);
This is my index.html file where it says AppCtrl & NavCtrl:
<body layout="column" ng-controller="AppCtrl">
<md-toolbar layout="row">
<div class="md-toolbar-tools">
<md-button ng-click="toggleSidenav('left')" hide-gt-sm class="md-icon-button">
<md-icon aria-label="Menu" md-icon="../images/menu.svg"></md-icon>
</md-button>
Intuo App
</div>
</md-toolbar>
<div layout="row" flex>
<md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')">
<!-- <nav class="navbar navbar-default pull-right" >-->
<ul ng-controller="NavCtrl">
<li ng-show="isLoggedIn()"><a>{{ currentUser() }}</a></li>
<li ng-show="isLoggedIn()">Log Out</li>
<li ng-hide="isLoggedIn()">Log In</li>
<li ng-hide="isLoggedIn()">Register</li>
</ul>
<!-- </nav>-->
</md-sidenav>
<div layout="column" flex id="content">
<md-content layout="column" flex class="md-padding">
<ui-view></ui-view>
</md-content>
</div>
</div>
The error i'm getting is :
Error: ng:areq
Bad Argument
Argument 'AppCtrl' is not a function, got undefined.
I've looked around a bit but can't seem to get it to work.

Your both the controller's belongs to controllers module & basically you are initializing angular on the page by having ng-app="intuo" which has intuo module. But intuo don't have controllers module included in it(So controller is unreachable to your intuo module & that why angular is throwing an error.). You should include Controller module to your main module intuo.
Code
//initialize controller module first before intializing
angular.module('controllers', []);
var app = angular.module('intuo', ['ui.router','ngMaterial', 'ngAnimate', 'controllers']);

Always to remember to include the correct scripts loading in each file! Forgetting to load in the controllers & factories will get you errors!

ui-router in ionic framework issue

I'm having trouble getting my routes to match up with my views. I have the following routes:
.state('tab.account', {
url: '/account',
abstract: true,
views: {
'tab-account': {
templateUrl: 'templates/tab-account.html',
controller: 'AccountController'
}
}
})
.state('tab.account.order', {
url: '/order/:id',
views: {
'order-view': {
templateUrl: 'templates/order-view.html',
controller: 'OrderController'
}
}
})
I have this in templates/tab-account.html
<ion-view title="Account">
<ion-content class="has-header padding">
<h1>Account</h1>
<h2>Your orders</h2>
<div class="card" ng-repeat="booking in bookings">
<div class="item item-text-wrap">
<b><a ng-click="viewOrder(booking.id)">{{ booking.carpark.city }}</a></b> on <b>{{ booking.date | date:'dd.mm.yyyy' }}</b>
</div>
</div>
I have this function in the controller for that view:
$scope.viewOrder = function(id) {
$state.go('tab.account.order', {id:id});
};
Then finally I have this view for the order:
<ion-view ui-view="orderView" title="Order">
<ion-content class="has-header padding">
<h1>Your Order</h1>
</ion-content>
The url seems to work, I end up with #/tab/account/order/1 but it doesn't load that final view!
Cheers in advance!

The ui-router configuration will depend on what you're trying to do.
It looks like you want the account view and the order view to be on separate pages, in which case you won't want it to be an abstract state, since from the ui-router wiki: "An abstract state can have child states but can not get activated itself. An 'abstract' state is simply a state that can't be transitioned to."
I'm not entirely sure you even want a child state for the same reason, since "child states will load their templates into their parent's ui-view." (https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#nested-states--views).
If this is the case, then you can do something like this:
.state('tab.account', {
url: '/account',
templateUrl: 'templates/tab-account.html',
controller: 'AccountController'
})
.state('tab.order', {
url: '/account/order/:id',
templateUrl: 'templates/order-view.html',
controller: 'OrderController'
})
Here's a plunkr: http://plnkr.co/edit/uuEQcxbWchxQyGV7wMlw?p=preview
The views objects have been removed, since you don't really need them unless you have multiple nested views.
If however you wanted the order view on the same page, then you could do something like this: http://plnkr.co/edit/8Tb1uhVDM0HCW8cgPRfL?p=preview
<ion-view title="Account">
<ion-content class="has-header padding">
<h1>Account</h1>
<h2>Your orders</h2>
<div class="card" ng-repeat="booking in bookings">
<div class="item item-text-wrap">
<b><a ng-click="viewOrder(booking.id)">{{ booking.carpark.city }}</a></b> on <b>{{ booking.date | date:'dd.mm.yyyy' }}</b>
</div>
</div>
<ui-view></ui-view> <!-- Where the child view will load -->
</ion-content>
</ion-view>
app.js:
.state('tab.account', {
url: '/account',
templateUrl: 'tab-account.html',
controller: 'AccountController'
})
.state('tab.account.order', {
url: '/order/:id',
templateUrl: 'order-view.html',
controller: 'OrderController'
})
You'll also probably want to remove your ion-content from the order view template, or else you might get some funky double scroll issues.
Hope this helps! Ui-router is pretty confusing, but their wiki has some great documentation and examples to clear things up.