EDIT : Here is a plunker
I'm a bit disappointed about the issue I have with ui-router as it is a very basic use.
I have an "empty" html index file that welcomes ui-views. I created 2 main templates : application.html and public.html . Basically they have 2 different headers/footers.
index.html
<div ui-view="">
<!-- encapsulate app/public -->
<a ui-sref="app">app</a>
</div>
app-routes.js
var myApp = angular.module('taApp', ['ui.router','ui.bootstrap','ui.sortable', 'ngResource']);
myApp.config(function($stateProvider, $urlRouterProvider) {
//
// For any unmatched url, redirect to /auth
$urlRouterProvider.when("", "/auth");
$urlRouterProvider.when("/", "/auth");
$urlRouterProvider.otherwise("/auth");
$stateProvider
.state('public', {
url:'',
abstract: true,
templateUrl: 'public.html',
/*views: {
'topbar': { template: 'public.topbar' },
'login': { template: 'public.login' }
}*/
})
.state('auth', {
url: '/auth',
templateUrl: '/partials/login/loginCard.html'
})
/*** LOGGED STATES ***/
//login
.state('app', {
templateUrl: 'application.html',
controller: 'authCtrl',
url: '/app'
})
});
Notice: the ui-sref state doesn't work too as it should load 'app' state.
Also I tried to force ui-view="app" or "public" without any success
I use angular-ui-router package on gulp.
There is something I missed and can't figure out.
Based on the updated question, related to this plunker, I updated that and make it working.
Fistly, angular must be loaded first
<script src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
we need this
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script src="script.js"></script>
And also, because our application "taApp" is defined:
var myApp = angular.module('taApp',
[
'ui.router' //,'ui.bootstrap','ui.sortable', 'ngResource'
]);
we have add that into index.html
<!DOCTYPE html>
<html ng-app="taApp">
And as we can see, because we are not having references to other module (inside of index.thml) I had to comment them out
'ui.router' //,'ui.bootstrap','ui.sortable', 'ngResource'
But once their code will be added to the page... it will work with them. So, this example is no working here
There is a working plunker
I guess that the public state, marked as abstract should be parent of all states. So we need to adjust state def like this:
$stateProvider
.state('public', {
url: '',
abstract: true,
templateUrl: 'public.html',
/*views: {
'topbar': { template: 'public.topbar' },
'login': { template: 'public.login' }
}*/
})
.state('auth', {
parent: 'public',
url: '/auth',
templateUrl: 'partials/login/loginCard.html'
})
/*** LOGGED STATES ***/
//login
.state('app', {
parent: 'public',
templateUrl: 'application.html',
controller: 'authCtrl',
url: '/app'
})
Any child state is inserting its view into parent - by default. So we must be sure, that the parent template public.html contains
<div ui-view=""></div>
There are other ways, but this is the most simple scenario
Related
I have an app.config with UI-Router. It has a login page with it's controller, recoverLogin and I want to put a template with footer, header and more stuff with new states that could be loaded into the template (in an especificplace).
My module is:
var app = angular.module("app", [
"ui.router",
"pascalprecht.translate"
]);
My routes are;
app.config(function($stateProvider, $urlRouterProvider)
{
$stateProvider
.state("login", {
url: "/login",
templateUrl: "views/accessControl/login.html",
controller: "loginCtrl"
});
$stateProvider
.state("recoverLogin", {
url: "/recoverLogin",
templateUrl: "views/accessControl/recoverLogin.html",
controller: "recoverLoginCtrl"
});
$stateProvider
.state("template", {
url: "/template",
templateUrl: "views/templates/template.html",
controller: "templateCtrl"
})
.state("template.dashboard", {
url: "/dashboard",
templateUrl: "views/dashboard/dashboard.html",
controller: "dashboardCtrl"
})
$urlRouterProvider.otherwise("login");
})
I have in my index <ui-view></ui-view> for the place of the loadings and another <ui-view></ui-view> in template.html int he place where I want to load more stuff like dashboard.html, but this doesn't works. it loads dashboard.html without the template created in template.html. I have founded lot of documentation that doesn´t works for me. Any Idea?
Here there are a plunker example of the idea: https://plnkr.co/edit/ZsGZjDKOBTIXFpPtXasN?p=preview
There is updated plunker and working plunker.
The template of the mainTemplate state is now lookin like this:
place for main:
<div ui-view="main"></div>
place for other:
<div ui-view="other"></div>
so it has two (could be more) places for more stuff. And this is the state redefined:
.state("mainTemplate.dashboard", {
name: "main",
url: "/dashboard",
views: {
'main' : {
templateUrl: "dashboard.html",
controller: "dashboardCtrl"
},
'other' : {
template: "<h2>other view</h2>",
}
}
});
What we can see is views : {} object being used to defined multiple content for more targets. Read about that more details here:
Angular UI Router - Nested States with multiple layouts
Nested states or views for layout with leftbar in ui-router?
play or observe the changes here
i am new Angular and trying to get a working example setup for Angular UI router
I researched some questions on stackoverflow but dont see the issue specifically. My Issue is that even though in browser debugging and network analysis i am seeing thatm my template html is called, still not seeing any content in browser.No errors in console
AngularJS ui-router - template not displaying
Using Angular 1.4.7 and corrosponding
Please find app.js below
(function(){
angular.module('TestPrj',['ui.router']);
angular.module('TestPrj').config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/ReportB');
$stateProvider
.state('a', {
url: '',
abstract:true,
controller:'mainController',
controllerAs:'main',
templateUrl: 'partials/home.html'
})
.state('a.b', {
url: '/ReportB',
controller:'B',
controllerAs:'B',
templateUrl: "partials/B.html"
});
});
angular.module('TestPrj').run(function($rootScope,$state){
$rootScope.$on("$stateChangeError", console.log.bind(console));
});
})();
Controller b.js :
(function(){
angular.module('TestPrj').controller('B',B);
function B($state){
this.pageName = "Report a B";
}
B.$inject = ["$state","$stateParams","$scope"];
})();
Controller main.js
(function(){
angular.module('TestPrj').controller('mainController',mainController);
function mainController($state,$translate){
}
mainController.$inject = ["$state","$translate"];
})();
index.html
<!DOCTYPE html>
<html>
<head ng-app="TestPrj" lang="en">
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript" src="js/lib/angular-ui-router.min.js"></script>
<script type="text/javascript" src="js/lib/angular-translate.min.js"></script>
<script type="text/javascript" src="js/lib/angular-translate-loader-url.js"></script>
<script type="text/javascript" src="js/lib/ui-bootstrap-tpls-0.12.0.min.js"></script>
<script type="text/javascript" src="js/lib/ui-mask.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controllers/claimTypeSelection.js"></script>
<script type="text/javascript" src="js/controllers/main.js"></script>
</head>
<body>
<div ui-view=""></div>
</body>
</html>
partials/home.html
<div class="container">
<div ui-view=""></div>
</div>
partials/B.html
<div>
<div ui-view=""></div>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</div>
Also sharing screenshot of my project setup
Angular Setup
Based off the digging I did I think the issue is that you made the first state abstract. There is an issue posted on the github for ui-router you can read here. Also, consider the two plunkr examples
without abstract
$stateProvider
.state('route1', {
url: "/route1",
templateUrl: "route1.html"
})
.state('route1.list', {
url: "/list",
templateUrl: "route1.list.html",
controller: function($scope){
$scope.items = ["A", "List", "Of", "Items"];
}
})
.state('route2', {
url: "/route2",
templateUrl: "route2.html"
})
.state('route2.list', {
url: "/list",
templateUrl: "route2.list.html",
controller: function($scope){
$scope.things = ["A", "Set", "Of", "Things"];
}
})
})
with abstract
$stateProvider
.state('route1', {
url: "/route1",
abstract: true,
templateUrl: "route1.html"
})
.state('route1.list', {
url: "/list",
templateUrl: "route1.list.html",
controller: function($scope){
$scope.items = ["A", "List", "Of", "Items"];
}
})
.state('route2', {
url: "/route2",
templateUrl: "route2.html"
})
.state('route2.list', {
url: "/list",
templateUrl: "route2.list.html",
controller: function($scope){
$scope.things = ["A", "Set", "Of", "Things"];
}
})
})
The second plunkr is a copy of the first except that abstract: true was added to the state and now it doesn't work.
Also, make sure you either clear your browser cache frequently or disable caching while using ui-router. It's pretty bad about serving cached results.
It isn't clear why you are using an abstract state. The abstract state can provide data and enter/exit processing to child states. But it isn't activated. It does need a template.
https://github.com/angular-ui/ui-router/wiki/Nested-States-and-Nested-Views#abstract-states
In your example the child state does done of these and the abstract state was apparently meant to be used.
It would seem you didn't intend to make it abstract.
Update: The abstract url can't be blank. This is an example of your code with the url set:
.state('a', {
url: '/a',
abstract: true,
controller: 'mainController',
controllerAs: 'main',
templateUrl: 'partials/home.html'
})
http://plnkr.co/edit/11o6qF?p=preview
To see the functionality use this link: http://run.plnkr.co/CUN147Z4YdCKRxRw/#/a/b
I'm trying to separate my routes into separate files but having problems getting it to load, but not getting any error information. This is in an Ionic tabs application which uses Angular UI Router.
My project is split into separate apps
main-routes.js
main-controllers.js
main-routes-end.js
app1
- routes.js
- controllers.js
app2
- routes.js
- controllers.js
Here are my routes JS files for the routes.
// main-routes.js
angular.module('myproj.routes', [])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
});
// app1/routes.js
angular.module('myproj.routes', [])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tab.home', {
url: '/home',
views: {
'tab-home': {
templateUrl: 'templates/tab-home.html',
controller: 'HomeCtrl'
}
}
})
.state('tab.odometer', {
url: '/home/odometer',
views: {
'tab-home': {
templateUrl: 'templates/home/odometer.html',
controller: 'OdometerCtrl'
}
}
})
});
// app2.js
angular.module('myproj.routes', [])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tab.messages', {
url: '/messages',
views: {
'tab-messages': {
templateUrl: 'templates/tab-messages.html',
controller: 'MessagesCtrl'
}
}
});
});
// main-routes-end.js
angular.module('myproj.routes', [])
.config(function($urlRouterProvider) {
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/home');
});
I've included these files in my index.html in the following order:
<script src="js/routes.js"></script>
<script src="js/app1/routes.js"></script>
<script src="js/app2/routes.js"></script>
<script src="js/routes-end.js"></script>
When I have all the routes in the js/routes.js file it works fine, but when I try to separate them out the screens don't render and unfortunately I don't get any errors in the console. I'm using a similar struture for controllers, which works fine, but I'm having problems with the routes. Any ideas?
Your main-routes.js should only have the module definition like angular.module('myproj.routes', [])
In other *.route.js you should js used the module create by the main-routes.js. No need to create a new module again & again.
Basically your problem is, you are reinitializing your myproj.routes module again & again which is flushing out old component(here its states) registered to it.
Make sure you create module once & Then you should use angular.module('myproj.routes') module to append the states to its config block.
Trying to switch between child views, however ui-sref generate a wrong url when the other child is already loaded.
The correct link: 'template/viewname.html'
The actual link: 'home/template/viewname.html'
How to stop ui-sref from adding 'home/' to the link ?
Thanks
app
angular.module('app',[,'ngRoute','ui.router']);
config
angular.module('app').config(['$urlRouterProvider', '$stateProvider', '$locationProvider', function ($urlRouterProvider, $stateProvider, $locationProvider) {
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
$urlRouterProvider.otherwise('/');
$stateProvider.state('home', {
url: '/home',
templateUrl: 'template/index.html',
controller: 'contr'
})
.state('home.about', {
parent:'home',
url: '/about',
templateUrl: 'template/about.html',
controller: 'contr'
})
.state('home.contact', {
parent: 'home',
url: '/contact',
templateUrl: 'template/contact.html',
controller: 'contr'
}) }]);
Home page
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<h3>Home</h3>
<div>
<a ui-sref="home.about">abouttt</a>
<a ui-sref="home.contact">contact</a>
</div>
<div ui-view>
</div>
</body>
</html>
You're shooting yourself in the foot:
you set requireBase to false, instead of using the default. The reason for the base tag is precisely that it allows relative URLs to be treated as relative to the base URL, rather than to the current URL
despite your choice to not use a base tag, you still use relative URLs, instead of absolute ones (i.e. URLs starting with `/, and which thus always point to the same location whatever the current location is).
See https://docs.angularjs.org/guide/$location#relative-links for more information.
just a small plnkr: http://plnkr.co/edit/RbjGt8zhAGSRb00idkEU?p=preview
var app = angular.module('plunker', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider','$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode({
enabled: true,
requireBase: false
})
$stateProvider.state('home', {
url: '/home',
})
.state('home.about', {
parent:'home',
url: '/about',
views:{
'#':{
'templateUrl': '/tpl1.html'
}
}
//controller: 'contr'
})
I would recommend to use absolute URLs in your templateUrl, i.e. with a leading slash. For example:
$stateProvider.state('home', {
url: '/home',
templateUrl: '/template/index.html',
controller: 'contr'
});
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.