**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>
Related
I am new to angular and using routing in my code. In index file i have a menu bar in which i am using concept of routing.
<div class="menuBar">
Home <a href="#!about"
class="menuBarItems">About</a> <a href="#!services"
class="menuBarItems">Services</a> <a href="#!contact"
class="menuBarItems">Contact Us</a>
</div>
<div ng-view></div>
<script>
var app = angular.module("myApp", [ "ngRoute" ]);
app.config(function($routeProvider) {
$routeProvider.when("/home", {
templateUrl : "home.html"
}).when("/about", {
templateUrl : "about.html"
}).when("/services", {
templateUrl : "services.html"
}).when("/contact", {
templateUrl : "contactus.html"
});
});
</script>
From this i am routing to four different html pages, but with in the home page i want nested routing. Code for home.html is as follows:
<div>
<section class="section1">
<div class="section1Element"
style="border-bottom: 2px solid rgba(0, 0, 0, 0.16);">
London<br>
</div>
<div class="section1Element">
Paris
</div>
</section>
<section class="section2" ng-view></section>
</div>
</div>
<script>
var app = angular.module("myHome", [ "ngRoute" ]);
app.config(function($routeProvider) {
$routeProvider.when("/london", {
templateUrl : "london.html"
}).when("/paris", {
templateUrl : "paris.html"
});
});
</script>
Here when I am using ng-view in section element it is showing an error of maximum call stack exceeded. I don't know how to fix it. Can anyone help me out in this please?
Hey you are doing it somewhat wrong way, you should not have 2 routes defined, you need to work on nested routes, as far i can infer from your above example. so your code must be modified in a way like this
<script>
var app = angular.module("myApp", [ "ngRoute" ]);
app.config(function($routeProvider) {
$routeProvider.when("/home", {
templateUrl : "home.html"
}).when("/home/london", {
templateUrl : "london.html"
}).when("/home/paris", {
templateUrl : "paris.html"
}).when("/about", {
templateUrl : "about.html"
}).when("/services", {
templateUrl : "services.html"
}).when("/contact", {
templateUrl : "contactus.html"
});
});
</script>
and then things will work as expected.
var myApp = angular.module("myApp", ['ui.router']);
myApp.config(['$stateProvider', '$urlRouterProvider',function
($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when("", "/Home/London");
$stateProvider
.state("Home", {
url: "/Home",
templateUrl: "Home.html"
})
.state("Home.Paris", {
url: "/Paris",
templateUrl: "Paris.html"
})
.state("Home.London", {
url: "/London",
templateUrl: "London.html"
})
.state("About", {
url: "/About",
templateUrl: "About.html"
})
.state("services", {
url: "/services",
templateUrl: "services.html"
})
.state("contactus", {
url: "/contactus",
templateUrl: "contactus.html"
});
}]);
This is the required js file that is need to be done.
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>
Angular UI-Router is not working? Please see my code on plunker.
I am trying to run a very basic routing example in angular js. But welcomeView.html is not appearing on the page.
(function() {
"use strict"
var app = angular.module("plunker", ["ui.router"]);
app.config(["$stateProvider", "$urlRouterProvider",
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state("home", {
url: "/",
templateUrl: "welcomeView.html"
})
}
]);
}());
There is updated and working version
Firstly we need to add reference to app.js with our module
<head>
...
<script src="app.js"></script> // was missing
<script src="script.js"></script>
</head>
Also, we should not use ng-controller, we do not need is with UI-Router
//<body ng-controller="MainCtrl">
<body>
The app.js on the other hand, should contain controller : "..."
$stateProvider
.state("home", {
url: "/",
templateUrl: "welcomeView.html",
// declare it here
controller: "MainCtrl",
})
Then, in script.js, we cannot redefine the module plunker (using setter) - we have to just take it (using getter)
// this would redefine the app.js stuff
//var app = angular.module('plunker', []);
// just a getter to get that module
var app = angular.module('plunker');
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
check that all in action here
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.