I use ui-router but ui-router can't find one of my state: Could not resolve 'main.tabs' from state 'main'. I found out that the config of the tabs module is not called, so main.tabs is not registered.
The initial state: $urlRouterProvider.otherwise('/main/dashboard');
The navigation to main.tabs is done with <a ui-sref="main.tabs" class="item" ng-click="toggleMenu()">Tabs</a>
index.html
<script src="app/main/main.js"></script>
<script src="app/tabs/tabs.js"></script>
<script src="app/dashboard/dashboard.js"></script>
<script src="app/app.js"></script>
main.js
var main = angular.module('main', []);
main.config(function ($stateProvider) {
$stateProvider
.state('main', {
url: "/main",
abstract: true,
templateUrl: "./app/main/main.html"
});
});
tabs.js
var tabs = angular.module('tabs', ['main']);
tabs.config(function ($stateProvider) {
$stateProvider
.state('main.tabs', {
url: '/tabs',
views: {
'main': {
templateUrl: './app/tabs/tabs.html',
controller: 'TabsCtrl'
}
}
});
// This is not called, I don't see the trace in the logs
console.log($stateProvider);
});
dashboard.js
var dashboard = angular.module('dashboard', ['models.dashboards', 'main']);
dashboard.config(function ($stateProvider) {
$stateProvider
.state('main.dashboard', {
url: "/dashboard",
views: {
'main': {
resolve: {
'dashboard': ['DashboardService', function (DashboardService) {
return DashboardService.getInstance();
}]
},
templateUrl: "./app/dashboard/dashboard.html",
controller: 'DashboardCtrl'
}
}
});
console.log($stateProvider);
});
Edit: ui.router is included
app.js (ionic is bundled with ui-router)
angular.module('starter', ['ionic', 'restangular', 'dashboard', 'ngCordova', 'LocalStorageModule', 'services.auth'])
From the ionic source:
var IonicModule = angular.module('ionic', ['ngAnimate', 'ngSanitize', 'ui.router']),
ng-app directive from index.html
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
Your app is the starter module. starter depends on dashboard. dashboard depends on main. None of those modules depend on tabs. So the tabs module is not loaded.
Related
When I start my asp.net mvc application (www.mysite.com), the home controller index action is loaded.
This action serves a view, and in that view my AngularJS app is loaded.
However, my AngularJS app wants to be started at www.mysite.com/#!/
Is there a way to force this, that when you go to the root that it gets redirected to /#!/ ?
What I have now is this:
<system.webServer>
<defaultDocument enabled="true">
<!-- this line enables default documents for a directory -->
<files>
<clear/>
<!-- removes the existing default document list -->
<add value="/#!/"/>
</files>
</defaultDocument>
but as you can guess this doesn't work.
I tested it at my local IIS and at Azure.
EDIT
To clarify: If I don't put the /#!/ at the end or the url, Angular does not kick in. Maybe that is the problem, that I do not have my config right?
my home state is this:
.state(appConfig.routes.home, {
url: "/",
views: {
'content': { templateUrl: "/Js/views/home/home.html", controller: 'ikvhomecontroller as vmhome' },
'homeheader#index.home': { templateUrl: "/Js/views/shared/sharedheader.html", controller: 'sharedheadercontroller as vmshhe' }
}
})
This is my config:
(function () {
'use strict';
angular.module(Main.config.name, [
// Angular modules
'ngResource',
'ngSanitize',
// Custom modules
// 3rd Party Modules
'ui.router',
'ngAnimate'
])
.constant('appConfig', Main)
.config(['$locationProvider', '$stateProvider', 'appConfig', '$httpProvider', '$urlRouterProvider', function ($locationProvider, $stateProvider, appConfig, $httpProvider, $urlRouterProvider) {
console.log('yep, I am at .config');
if (appConfig.useHtml5Mode)
$locationProvider.html5Mode(true);
else {
$locationProvider.html5Mode(false);
$locationProvider.hashPrefix('!');
};
$urlRouterProvider.otherwise("/");
$urlRouterProvider.when('/', 'index.home');
$stateProvider
.state('index', {
url: "",
views: {
"#": { templateUrl: "/Js/views/main.html" },
"header#index": { templateUrl: "/Js/views/header.html", controller: "menucontroller as vm" },
'content#index': { templateUrl: "/Js/views/content.html" },
"footer#index": { templateUrl: "/Js/views/footer.html" }
}
})
.state(appConfig.routes.home, {
url: "/",
views: {
'content': { templateUrl: "/Js/views/home/home.html", controller: 'homecontroller as vmhome' },
'homeheader#index.home': { templateUrl: "/Js/views/shared/sharedheader.html", controller: 'sharedheadercontroller as vmshhe' }
}
});
}])
.run([
'$http',
'$state',
'$rootScope',
'$templateCache',
function ($http, $state, $rootScope, $templateCache) {
$rootScope.$on("$stateChangeError", console.log.bind(console));
$rootScope.$on('$locationChangeSuccess', function (evt) {
console.log(evt);
});
$templateCache.removeAll();
}]);
})();
This is the html in the browser:
<div id="main" ui-view>
<div class="imgwrapper"><img src="/Images/iloading.gif" /></div>
</div>
<script src="/Scripts/jquery-2.2.0.js"></script>
<script src="/Scripts/modernizr-2.8.3.js"></script>
<script src="/Scripts/moment-with-locales.js"></script>
<script src="/Scripts/uihelpers/currencykeydown.js"></script>
<script src="/Scripts/uihelpers/datekeydown.js"></script>
<script src="/Scripts/uihelpers/labeltitleclick.js"></script>
<script src="/Scripts/uihelpers/textareagrow.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/angular.js"></script>
<script src="/Scripts/angular-route.js"></script>
<script src="/Scripts/angular-resource.js"></script>
<script src="/Scripts/angular-sanitize.js"></script>
<script src="/Scripts/angular-animate.js"></script>
<script src="/Scripts/angular-locale_nl-nl.js"></script>
<script src="/Scripts/angular-ui-router.js"></script>
<script src="/Scripts/config.js"></script>
<script src="/Scripts/App.js"></script>
<script src="/Scripts/helpers/calcutils.js"></script>
<script src="/Scripts/helpers/dateutils.js"></script>
<script src="/Scripts/helpers/SelectHelper.js"></script>
and the rest of my custom code goes here
you should modify your 'route.config.js' in angularjs like as -
angular.module('yourModuleName').config(['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$stateProvider.
state('login', {
url: 'login',
templateUrl: '/path/to your login page',
});
$urlRouterProvider.otherwise("/");
$urlRouterProvider.when('/', 'login');
}
]);
This will automatically route your page to localhost/#!/login when you start your application.
I have a nested ui-route in my application. The index page (root page), works, but not the nested pages.
Here is my app.js
var app = angular.module('app', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$stateProvider
.state('index',
{
url: '/index',
templateUrl: 'index.html'
})
.state("index.salesorder",
{
url: '/salesorder',
views: {
'mainlayout': {
templateUrl: 'partials/salesorder.html'
}
}
});
});
In my index.html, I have the div with ui-view attribute
<div ui-view="mainlayout"> </div>
I have also added the necessary scripts for angular, and ui-route. I do not get any errors in the console. But the salesorder does not show. I get to see the index though.
Your second state index.salesorder is a child state of index. Do you have the ui-view nested correctly? It looks like you might need 3 levels of ui-views.
try this:
var app = angular.module('app', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$stateProvider
.state("salesorder",
{
url: '/salesorder',
views: {
'mainlayout': {
templateUrl: 'partials/salesorder.html'
}
}
});
});
main.html:
<div ui-view></div>
salesorder.html:
<div ui-view="mainlayout"></div>
I am building an angular app with several modules close to john papas styleguide. Following that, I have several independent modules with their own route definitions and others with interceptors. My Problem is: when I run it on Cordova / Android, state definitions only seem to work, when I put them in the main module. In my Browser the work. Did anybody come over this issue yet?
E.g. this works on both local browser and on device with cordova:
//main.js
'use strict';
angular.module('main', [
'app.core',
'auth'
])
.config(function ($stateProvider, $urlRouterProvider) {
// ROUTING with ui.router
$urlRouterProvider.otherwise('/main/list');
$stateProvider
// this state is placed in the <ion-nav-view> in the index.html
.state('main', {
url: '/main',
abstract: true,
templateUrl: 'main/templates/menu.html',
controller: 'MenuCtrl as menu'
})
.state('main.login', {
url: '/login',
views: {
'pageContent': {
templateUrl: 'auth/templates/auth.login.html',
controller: 'LoginCtrl'
}
}
})
/* more states here */
This only works in local browser (main module same as above):
//auth.routes.js
'use strict';
angular
.module('auth.routes')
.config(config);
function config ($stateProvider) {
$stateProvider
.state('main.login', {
url: '/login',
views: {
'pageContent': {
templateUrl: 'auth/templates/auth.login.html',
controller: 'LoginCtrl'
}
}
})
}
//auth.module.js
'use strict';
angular.module('auth', [
'app.core',
'auth.constants',
'auth.routes',
'auth.controllers',
'auth.services',
'auth.interceptors',
'auth.config'
]);
angular.module('auth.constants', []);
angular.module('auth.routes', []);
angular.module('auth.controllers', []);
angular.module('auth.services', []);
angular.module('auth.interceptors', []);
angular.module('auth.config', []);
Error says that the state was not found on navigation.
Try
angular
.module('test', [])
.config(config);
config.$inject = ['$routeProvider'];
function config($routeProvider) {
$routeProvider
.when('/login', {
title: 'Calculators',
templateUrl: 'modules/views/login.html',
controller: ''
});
}
remove state provider ,check for simple routing it will work.
I'm having problem with ngRoute injection...
I have the file angular-route.min.js inclueded in the right path but still getting this error
Here is javascript code:
(function() {
var app = angular.module('ParkPlanner', ['mobile-angular-ui', 'ngRoute']);
app.config (['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'pages/home.html'
})
.state('results', {
url: '/results',
templateUrl: 'pages/results.html'
});
$urlRouterProvider.otherwise('/home');
}]);
})();
Here is the HTML head:
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/mobile-angular-ui.min.js"></script>
<script src="js/app.js"></script>
Any idea what I'm missing?
Thanks!
My Friend yo should put also route.min.js.map and ,
try importing "$routeProvider" instead of "$urlRouterProvider" , lets give a try .
It looks like you are trying to configure states with ng-router. That is not supported. You should configure routes like this in ng-router:
.when('/home', {
templateUrl: 'pages/home.html'
})
Alternatively, you should add dependency to angular-ui-router like this:
var app = angular.module('ParkPlanner', ['mobile-angular-ui', 'ui.router']);
app.config (['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'pages/home.html'
//And so on....
})
})();
**This js file for the ui router is proper or not.The error displaying is
"Error: Unknown provider: $stateProvider from routerApp"
this js files have been loaded in the Html file.
**
var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/template1');
$stateProvider
// HOME STATES AND NESTED VIEWS ========================================
.state('template1', {
url: '/temp1',
templateUrl: 'templates/template1.html'
})
// ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================
.state('template2', {
// we'll get to this in a bit
});
});
<!-- MAIN CONTENT -->
<div class="container">
<!-- THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== -->
<div ui-view></div>
</div>
</body>
</html>
Please help.Thanks in advance
please see here : http://plnkr.co/edit/FYxpaHpKgvpEu6f1TZ7l?p=preview
var routerApp = angular.module("routerApp", ["ui.router"]);
routerApp.config(
["$stateProvider", "$urlRouterProvider",
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/template1");
$stateProvider
.state("template1", {
url: "/template1",
templateUrl: "template1.html",
controller: "tmp1Controller"
})
.state("template2", {
url: "/template2",
templateUrl: "template2.html",
controller: "tmp2Controller"
})
;
}
]);
routerApp.controller("mainCtrl", ["$scope",
function($scope) {
}
]);
routerApp.controller("tmp1Controller", ["$scope",
function($scope) {
}
]);
routerApp.controller("tmp2Controller", ["$scope",
function($scope) {
}
]);
I had the same problem, was solved replacing
<div ui-view></div>
by
<ui-view>
<i>Loading ....</i>
</ui-view>