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
Related
I am new to angularJS. I tried to and practice some examples and met a very tricky error. I spent a couple of hours to figure out RangeError,but I failed to overcome it. Can anyone help me get out from this trap?
In app.js
var sampleApp = angular.module('phonecatApp', ['ngRoute']);
sampleApp .config(['$routeProvider','$locationProvider',
function($routeProvider,$locationProvider)
{
$routeProvider.
when('/', {
templateUrl: 'index.html',
}).
when('/addOrder', {
templateUrl: 'add-order.html',
controller: 'AddOrderController'
}).
when('/showOrders', {
templateUrl: 'show-orders.html',
controller: 'ShowOrdersController'
}).
otherwise({
redirectTo: '/addOrder'
});
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}]);
sampleApp.controller('AddOrderController', function($scope) {
$scope.message = 'This is Add new order screen';
});
sampleApp.controller('ShowOrdersController', function($scope) {
$scope.message = 'This is Show orders screen';
});
In index.html
<!DOCTYPE html>
<head>
</head>
<h1>weclome to test!</h1>
<body ng-app="phonecatApp" >
<div ng-view></div>
<script src="//code.angularjs.org/1.2.20/angular.js"></script>
<script src="//code.angularjs.org/1.2.20/angular-route.js"></script>
<script src="static/app.js"></script>
</body>
</html>
In add_order.html
<h2>Add New Order</h2>
{{ message }}
In show_order.html
<h2>Show Orders</h2>
{{ message }}
In addition, the wrong source directory of folder that store js and html files cause the RangeError?
This is error that shows in chrome console
I think you are browsing to /, which is probably index.html, which includes app.js, which will need index.html due to the route, which will require app.js, etc... You may need to put your / template in another html file (let's call it home.html), and change the template for / to home.html
I also had the same issue. Then I tried with putting 'script' tags to 'head' tag. It works fine now.
<!DOCTYPE html>
<html>
<head>
<script src="//code.angularjs.org/1.2.20/angular.js"></script>
<script src="//code.angularjs.org/1.2.20/angular-route.js"></script>
<script src="static/app.js"></script>
</head>
<body ng-app="phonecatApp" >
<h1>weclome to test!</h1>
<div ng-view></div>
</body>
</html>
Split the routing scripts in to a different file.
angular.module('phonecatApp').config(['$routeProvider','$locationProvider',
function($routeProvider,$locationProvider)
{
$routeProvider.
when('/', {
templateUrl: 'index.html',
}).
when('/addOrder', {
templateUrl: 'add-order.html',
controller: 'AddOrderController'
}).
when('/showOrders', {
templateUrl: 'show-orders.html',
controller: 'ShowOrdersController'
}).
otherwise({
redirectTo: '/addOrder'
});
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}]);
then refer it in your index file may be like :
<script src="static/router.js"></script>
that should fix it.
I was facing similar problem/ error. What worked for me was I used the routes with # . i.e I removes this part from app.js
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
I am using angular ui-router for an application, but for some reason the nested views are loaded only for desktop browsers and Chrome for android but not for other mobile browsers such as chrome for iPhone, Samsung Browser for android, Safari for iPhone.I have been searching but I could not find any reasons why it behaves like that, I don't know if maybe the configuration of my "states" and templates are not correct.
and this is my code:
$urlRouterProvider.otherwise(function ($injector) {
var $state = $injector.get('$state');
var $rootScope = $injector.get('$rootScope');
var $stateParams = $injector.get('$stateParams');
if (typeof $stateParams.token == 'undefined') {
$rootScope.errorList = [];
$rootScope.errorList.push("Token is invalid");
$state.go('error');
}
});
$stateProvider
.state('index',
{
url: '/:token/',
views: {
'': {
templateUrl: 'AngularJS/Templates/indexView.html',
controller: 'candidateController as candCtrl'
},
'sectioncandidate#index': {
templateUrl: 'AngularJS/Templates/candidatesView.html'
}
}
})
.state('error',
{
url: '/error',
templateUrl: 'AngularJS/Templates/errorView.html',
controller: 'errorController as errorCtrl'
})
.state('index.details', {
url: 'details',
views: {
'sectioncandidate#index': {
templateUrl: 'AngularJS/Templates/candidateView.html'
}
}
});
The templates have the following hierarchy:
index.cshtml
<div class="main-container" ui-view></div>
indexView.html
<h3 class="header-title">This is the header from the parent view</h3>
<div class="body-content">
<div ui-view="sectioncandidate"></div>
</div>
candidatesView.html
<h1>This is the nested view!!!!</h1>
And i am loading the following libraries
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-aria.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-animate.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-messages.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.js"></script>
<script src="~/AngularJS/Modules/app.js"></script>
<script src="~/AngularJS/Services/applicationService.js"></script>
<script src="~/AngularJS/Controllers/candidateContoller.js"></script>
<script src="~/AngularJS/Controllers/errorController.js"></script>
I would really appreciate any help.
You Can Try On When Method
var app = angular.module('Appname',['ngRoute']);
app.config(function($routeProvider){
$routeProvider.when('/',{
templateUrl :"1st Path Of File",
controller :"FirstController"
})
.when('/AnchortagIdHere',{
templateUrl :"2nd Path Of File",
controller :"2ndController"
})
.otherwise('/',{
templateUrl :"1st Path Of File",
controller :"FirstController"
});
});
Well, after the application was dissected line by line I could realize that the issue with the nested views were not exactly because of the ui-router component, the problem was that the controller used by the nested views was using an angular material dialog. The way these angular material dialog link a controller and a template, was creating a conflict for some mobile browsers, therefore the nested, named views were not displayed.
This fixed the problem:
Before I was using a code like this to pen a dialog: (it is supposed to work with es6)
this.$mdDialog.show({
targetEvent: event,
templateUrl: 'path/mytemplate.html',
controller: () => this,
controllerAs: 'ctrl'
});
I changed for something like this: (the way to link a controller Without es6)
var self = this;
this.showTabDialog = function(ev) {
$mdDialog.show({
controller: function () {
return self;
},
controllerAs: 'ctrl',
templateUrl: 'tabDialog.tmpl.html',
});
};
hope it could be useful for someone.
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'
});
Does anyone know how I can route using a search query in Angular? I have tried working with $routeProvider but it doesn't work with search queries.
This is the code I wrote for routing with $routeProvider:
app.config(['$routeProvider', function ($routeProvider){
$routeProvider.when('/?table=table1', {
controller:'PostsCtrl',
templateUrl: 'table1.html'
})
$routeProvider.when('/?table=table2', {
controller: 'PostsCtrl',
templateUrl: 'table2.html'
})
$routeProvider.otherwise({redirectTo: '/?table=table1'});
}]);
app.config(['$locationProvider', function($locationProvider){
$locationProvider.html5Mode(true).hashPrefix('!');
}]);
and the templates they are referring to:
<script type="text/ng-template" id="table1.html">
some code
</script>
and
<script type="text/ng-template" id="table2.html">
some code
</script>
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