I have a root index.html file which has a ui-view tag, to which a main template file home.html is injected.
home.html has a ui-view tag which needs to change depending on the current route. I followed the official ui-router documentation and wrote the app.js, but the nested ui-view in home.html tag is not being injected with a view.
The structure is as follows:
index.html
| home.html
- dashboard.html
- tables.html
index.html has a ui-view tag which shows home.html. home.html is a template with a ui-view tag which needs to either show dashboard.html or tables.html depending on the route.
Source:
index.html -
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="lib/css/main.min.css"/>
<script src="lib/js/main.min.js"></script>
<script type="text/javascript" src="js/dashboard.min.js"></script>
</head>
<body ng-controller="MasterCtrl">
<div ui-view></div>
</body>
</html>
templates/home.html -
<div id="page-wrapper" ng-class="{'open': toggle}" ng-cloak>
<!-- Sidebar -->
<div ng-include="sidebar.html" scope="" onload=""></div>
<!-- End Sidebar -->
<div id="content-wrapper">
<div class="page-content">
<!-- Header Bar -->
<div ng-include="header.html" scope="" onload=""></div>
<!-- End Header Bar -->
<!-- Main Content -->
<div ui-view></div>
</div><!-- End Page Content -->
</div><!-- End Content Wrapper -->
module.js
angular.module('app', ['ui.bootstrap', 'ui.router', 'ngCookies']);
routes.js
'use strict';
angular.module('app').config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
// For unmatched routes
$urlRouterProvider.otherwise('/');
// Application routes
$stateProvider
.state('home', {
abstract: true,
url: '/',
templateUrl: 'templates/home.html'
})
.state('home.dashboard', {
url: '/dashboard',
templateUrl: 'templates/dashboard.html'
})
.state('home.tables', {
url: '/tables',
templateUrl: 'templates/tables.html'
});
}
]);
On add them as routes without inheriting from home, they're being injected normally into index.html, which means it's not an issue with the route themselves.
How can I inherit the template and inject the views, depending on the route?
You need to add ui-router as a dependency to the module
angular.module('app',['ui.router'])
also make sure you have added references
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
<!-- UI-Router -->
<script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
DEMO
Solved my issue. I removed the url tag from abstract state home, and just set home.dashboard to /.
This works:
'use strict';
angular.module('app').config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
// For unmatched routes
$urlRouterProvider.otherwise('/');
// Application routes
$stateProvider
.state('home', {
abstract: true,
templateUrl: 'templates/home.html'
})
.state('home.dashboard', {
url: '/',
templateUrl: 'templates/dashboard.html'
})
.state('home.tables', {
url: '/tables',
templateUrl: 'templates/tables.html'
});
}
]);
Related
I have had a look through SO and nothing has helped.
This is my app.js
var app = angular.module("qMainModule", ["ngRoute"])
.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when("/", {
templateUrl: 'templates/anonHome/anonHome.html',
controller: 'templates/anonHome/anonHomeController'
})
.when("/about", {
templateUrl: 'templates/anonHome/anonAbout.html',
controller: 'templates/anonHome/anonAboutController'
})
.when("/services", {
templateUrl: 'templates/anonHome/anonServices.html',
controller: '/templates/anonHome/anonServicesController'
})
.when("/contact", {
templateUrl: 'templates/anonHome/anonContact.html',
controller: '/templates/anonHome/anonContactController'
})
.when("/register", {
templateUrl: 'templates/anonHome/anonRegister.html',
controller: '/templates/anonHome/anonRegisterController'
})
.when("/login", {
templateUrl: 'templates/anonHome/anonLogin.html',
controller: '/templates/anonHome/anonLoginController'
})
$locationProvider.html5Mode(true);
})
app.controller("qMainController", function ($scope) {
$scope.Title = " Welcome to Qiao";
$scope.qNavigationTemplatePath = "/templates/topMenu/anonTopNavigation.html";
$scope.copyrightMessage = "Qiao ";
$scope.copyrightYear = new Date();
});
The routing works as expected and the partial templates are being shown but the partial templates controllers are not being recognised as a function.
The Layout Template looks like this
<!DOCTYPE html>
<html ng-app="qMainModule">
<head ng-controller="qMainController">
<base href="/" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Qiao :: {{Title}}</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="../css/modern-business.css" rel="stylesheet" />
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="/scripts/angular.js"></script>
<script src="../scripts/angular-route.js"></script>
<script src="/app/app.js"></script>
<script src="templates/anonHome/anonHomeController.js"></script>
<!-- <link href="../styles/qiao.css" rel="stylesheet" /> -->
</head>
<body ng-controller="qMainController">
<div ng-include="qNavigationTemplatePath">
</div>
<!-- Page Content -->
<div class="container">
<ng-view></ng-view>
</div>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12" ng-controller="qMainController">
Copyright © {{copyrightMessage}} {{copyrightYear | date:'yyyy'}}
</div>
</div>
</footer>
<div >
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Script to Activate the Carousel -->
<script>
$('.carousel').carousel({
interval: 5000 //changes the speed
})
</script>
</div>
</body>
</html>
The partial template looks like this:
<script src="anonHomeController.js"></script>
<div ng-controller="anonHomeController">
<h1>{{Title}}</h1>
</div>
and its controller is this
function anonHomeController($scope) {
$scope.Title = " Welcome to Qiao";
$scope.qNavigationTemplatePath = "/templates/topMenu/anonTopNavigation.html";
$scope.copyrightMessage = "Qiao ";
$scope.copyrightYear = new Date();
};
The Question: How do I get Angular to recognise and use the partial template's controller?
While defining a controller, don't use any directory paths.
From the docs - https://docs.angularjs.org/api/ngRoute/provider/$routeProvider
controller – {(string|Function)=} – Controller fn that should be associated with newly created scope or the name of a registered controller if passed as a string.
Note that the registered controller never has the entire path, it is the function definition itself or the function's name (a string). You may need module names, if you have exported like that, but that's different from a directory path.
All you need is just use <script> tags in index.html, which will include all your functions. Now if your functions are just plain javascript, and you don't intend using angular.module('app').controller there, use it in the app.js, Just angular.module('app').controller('anonHomeController', anonHomeController); Note that your definition can still remain in the Javascript file /some/path/totemplate/anonHomeController.js. I suggest you try that and see if it works.
app.js
app.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when("/", {
templateUrl: 'templates/main/main.html',
controller: 'MainCtrl'
})
index.html
<script src="controllers.js"></script>
controllers.js
function MainCtrl ($scope) {
$scope.name = 'World';
}
A working plnkr here
You have created your controller for each view as a regular JS function, which is incorrect. It should be like
app.controller("anonHomeController", function ($scope) {
$scope.Title = " Welcome to Qiao";
// rest of the controller code
});
and the file should be anonHomeController.js at the path you have defined in the config. you also do not need to include the scipt tag in the header of the view. Check for some example here
You don't need to add complete path in your app.js for defining controllers.
If you're controllers are defined in the same file, then this should do the job:
$routeProvider
.when("/", {
templateUrl: 'templates/anonHome/anonHome.html',
controller: 'xyzController'
});
app.controller("xyzController", function ($scope) {
// controller function here
});
If you want your controllers to be in an external file, you'll have to do the following:
1. Define the controllers module:
angular.module('app.controllers', [])
.controller("homeController", function(){....})
Name this file as controllers.js
2. Now your main app.js should include this:
angular.module('app', [
'app.controllers',
])
Include controllers.js in your main html file
I have a folder structure like this
dashboard (folder)
-- index.html
route.js
index.html
And I my index.html I wrap my ui-view
<head>
<style type="text/css">
h1{color:red}
</style>
</head>
<body>
<ui-view></ui-view>
</body>
Then in route.js I have
var app = angular.module('cartApp', ['ui.router']);
app.config(['$stateProvider','$urlRouterProvider','$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$stateProvider
.state('dashboard', {
url: '/dashboard',
templateUrl: 'dashboard/index.html'
})
}]);
But when I go to localhost:3000/dashboard I'm seeing a h1 without color. It's unable to load its parent's 'stuff'. Any idea why?
I'm New to Angular, and learning through the tutorials on Thinkster. I'm at the Angular Routing -> Adding a New State step.
I am trying to use ui-router to render an inline template, but the template is not appearing. Here is my index.html (abridged) :
<html>
<head>
<!-- My js files are loaded here -->
</head>
<body ng-app='flapperNews'>
<div class ='row'>
<div class="col-md-6 col-md-offset-3">
<div ui-view></div>
</div>
</div>
<script type="text/ng-template" id="home.html">
<!-- My template written as plain html>
</script>
</body>
</html>
And this is how my routing is currently handled in app.js :
angular.module('flapperNews',['ui.router'])
.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider){
return;
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl'
});
$urlRouterProvider.otherwise('home');
}]);
It is my understanding that ui-router should parse the url and render the appropriate template within the div ui-view tags. (Thinkster says the tag should be 'ui-view' but the ui-router docs seemed to indicate otherwise; I have tried both ).
My page renders blank, and there are no errors logged to the console. For what its worth, I am doing the tutorial with just local files, and since I've added the routing code my url has a # appended to it i.e file://blah/blah/FlapperNews/index.html# and I'm unsure why.
Just tries the following code and seem to work. It is based on the link you provided.
What I fixed from your code:
id="home.html" to id="/home.html"
comment is not closed: <!-- My template written as plain html>
delete return; from config function
removed controller since there wasn't any code for it
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body ng-app='flapperNews'>
<div class ='row'>
<div class="col-md-6 col-md-offset-3">
<div ui-view></div>
</div>
</div>
<script type="text/ng-template" id="/home.html">
test content
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
angular.module('flapperNews', ['ui.router'])
.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html'
// controller: 'MainCtrl'
});
$urlRouterProvider.otherwise('home');
}])
</script>
</body>
</html>
Delete the return in your configuration function.
angular.module('flapperNews',['ui.router'])
.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider){
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl'
});
$urlRouterProvider.otherwise('home');
}]);
I try to run angular-ui-router to handle my views but i have a problem.
The two links of the following view are not clickable.
Angular change variable with link label but i can't click on.
I have this view :
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<meta charset="utf-8">
</head>
<body>
<h1>App</h1>
<nav>
<a ui-shref="app">{{link.home}}</a>
<a ui-shref="app.front.signin">{{link.signin}}</a>
</nav>
<div ui-view="content">
</div>
</body>
</html>
I use this code. It do not returns errors
. All modules (localStorage ... are included) but links are not clickable.
/**
* Declaration of MyAppControllers module
*/
MyAppControllers = angular.module('MyAppControllers',[]);
/**
* Declaration of MyApp Application
*/
MyApp = angular.module('MyApp', ['MyAppControllers','LocalStorageModule','ui.router']);
MyApp.config(['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
//
// Now set up the states
$stateProvider
.state('app', {
url: "/",
views: {
"content": {templateUrl: "views/front/home-1.0.html"}
}
})
.state('app.front.signin', {
url: "/signin",
views: {
"content": {templateUrl: "views/front/home-1.0.html", controller: "signinCtrl"}
}
});
}
]);
Can someone help me ?
You messed up in type it should be ui-sref instead of ui-shref
<body>
<h1>App</h1>
<nav>
<a ui-sref="app">{{link.home}}</a>
<a ui-sref="app.front.signin">{{link.signin}}</a>
</nav>
<div ui-view="content">
</div>
</body>
Your second link should be app.signin instead of app.front.signin because you don't have parent route front
.state('app.signin', {
url: "/signin",
views: {
"content": {
templateUrl: "views/front/home-1.0.html",
controller: "signinCtrl"
}
}
});
I am learning Angularjs from Tuts+ Easier JavaScript Apps with AngularJS tutorial. Now I am at the part where they discussed Routing Primer using ng-view. I am trying to show the list page contents in ng-view of index page. For some reason nothing is shown when I load index.html. I found from searching that From angular 1.2.0, ngRoute has been moved to its own module. I have to load it separately and declare the dependency. But still I can't show anything from my list page.
index.html
<!doctype html>
<html ng-app="myApp">
<head>
<title>Angular App</title>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="Ctrl">
<div ng-view></div>
</div>
</body>
</html>
list.html
<h3>List</h3>
<ul>
<li ng-repeat="contact in contacts">
{{contact.name}}: {{contact.number}}
</li>
</ul>
app.js
var app = angular.module('myApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'list.html',
controller: 'Ctrl'
});
});
app.controller('Ctrl', function($scope){
$scope.contacts = [
{ name: 'Shuvro', number: '1234' },
{ name: 'Ashif', number: '4321' },
{ name: 'Anik', number: '2314' }
];
});
Remove the ng-controller from the div like this:
<body>
<div >
<div ng-view></div>
</div>
</body>
To void "miss-routings" add the otherwise to the main configuration like: otherwise({ redirectTo: '/'});
app.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'list.html',
controller: 'Ctrl'
}).otherwise({ redirectTo: '/'});
});
Online Demo