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>
Related
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"
})
I have a viewA and corresponding ControllerA but on click of an image on viewA i have to navigate to another ViewB and corresponding ControllerB, in ViewB have some check boxes then have a button on viewB that takes us to ViewA, then again i want to click the image on ViewA and Navigate to ViewB and restore the checkBox values (Checked, Unchecked). I have stored the values of checkboxes to service variable.
<body ng-app='demo'>
<script type="text/ng-template" id="home.html">
<h1> viewA </h1>
<img src="src" />
</script>
<script type="text/ng-template" id="about.html">
<h1> viewB </h1>
<h4>Click me to see ViewA: <input id="myCheckBox" type="checkbox" ng-model="checked" ng-change='checkView()'></h4>
</script>
<div>
<div ng-view></div>
</div>
</body>
script:
var demo = angular.module('demo', []);
demo.controller('HomeController', function ($scope) {});
demo.controller('AboutController', function ($scope,$location) {
$scope.checkView=function(){
//if($scope.checked)
if($('#myCheckBox').prop('checked') == true)
$location.url('/home');
}
});
demo.config(function ($routeProvider) {
$routeProvider.
when('/home', {
templateUrl: 'home.html',
controller: 'HomeController'
}).
when('/about', {
templateUrl: 'about.html',
controller: 'AboutController'
}).
otherwise({
redirectTo: '/home'
});
});
TRY THIS CODE:
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'
})
}
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!
I have html page with
<div ng-controller="MyCtrl">
<div ng-view>Some content</div>
myVar: {{myVar}}
</div>
And angular controller:
myModule.controller('MyCtrl', function($scope, $location) {
$scope.myVar = false;
$scope.someAction = function() {
$location.path('/anotherPath');
$scope.myVar = true; // changes in controller, but not in view
}
});
My module is
var myModule = angular.module('myModule', ['ngRoute']).config(function ($routeProvider) {
$routeProvider
.when('/anotherPath', {
templateUrl: 'anotherPath.html',
controller: 'MyCtrl'
})
.otherwise({
redirectTo: '/anotherPath.html'
})
});
anotherPath.htmlcontains only
<input data-ng-click="someAction()" type="button" class="btn" value="Some action">
After clicking on this input controller changes path, but in view value of myVar is still false. Why?
Here, you have defined your controller twice. Once on the parent div:
<div ng-controller="MyCtrl">
And once on the route for /anotherPath:
$routeProvider
.when('/anotherPath', {
templateUrl: 'anotherPath.html',
controller: 'MyCtrl' <-- This will be assigned to <div ng-view>
})
Leaving you with something like:
<div ng-controller="MyCtrl">
<div ng-view ng-controller="MyCtrl">
</div>
</div>
Therefore, when you call $scope.someAction() you are calling the function defined on the controller assigned to your inner view, rather than the function defined on the parent controller.
You should give your View its own unique controller in the route definition:
Angular:
$routeProvider
.when('/anotherPath', {
templateUrl: 'anotherPath.html',
controller: function($scope) {
// You don't necessarily need an implementation here
}
})
HTML:
<div ng-controller="MyCtrl">
<div ng-view>Some content</div>
myVar: {{myVar}}
</div>