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