The problem is simple and the answer is probably pretty obvious but I really can't find out what's going wrong here.
JSFIDDLE
As you can see, no links are generated and no views are loaded.
I have looked into related problems aswell (e.g this one) but it wasn't much of a use.
index.html
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="#">AngularUI Router</a>
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="about">About</a></li>
</ul>
</nav>
<div class="container">
<div ui-view></div>
</div>
<script type="text/ng-template" id="home.html">
<div class="jumbotron text-center">
<h1>Welcome</h1>
<p>This is the Home Page</p>
</div>
</script>
app.js
var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.html'
});
}]);
EDIT
I should have mentioned that I included ui-router in the External Resources tab in my fiddle.
This is what gets generated by JSFiddle:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body ng-app="routerApp">
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="#">AngularUI Router</a>
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="about">About</a></li>
</ul>
</nav>
<div class="container">
<div ui-view=""></div>
</div>
<script type="text/ng-template" id="home.html">
<div class="jumbotron text-center">
<h1>Welcome</h1>
<p>This is the Home Page</p>
</div>
</script>
<script type="text/javascript">
//<![CDATA[
var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.html'
});
}]);
//]]>
</script>
</body>
</html>
EDIT #2
It seems like this was a problem with JSFiddle's External Resources rather than ui-router.
Working example
You have to include angular-ui-router in your index.html
You can for example add:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script>
Here is the working JSFIDDLE
ui.router is a separate module. You need to download it and include a script, e.g. download from here
There is a default angular router, but that one probably should be added as a separate script as well.
Angular UI-Router is a client-side Single Page Application routing framework for AngularJS.Routing frameworks for SPAs(Single Page Applications) update the browser's URL as the user navigates through the app.
Check this fiddle
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.html'
}).state('about', {
url: '/about',
templateUrl: 'about.html'
});
Related
I am trying an application with AngularJS 1.0 but I am facing issues with routing. The route is not working at all. I can't see my templates being displayed inside ng-view. My code is as shown below.
package.json
"main": "server.js",
"dependencies": {
"angular": "^1.4.3",
"angular-route": "1.6.10",
"body-parser": "latest",
"ejs": "latest",
"express": "latest",
"fabric-ca-client": "^1.0.2",
"fabric-client": "^1.0.2",
"grpc": "1.11.0"
}
app.js
'use strict';
var app = angular.module('application', ["ngRoute"]);
app.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'client/index.html'
})
.when('/vault', {
templateUrl: 'client/vault.html'
})
.when('/store', {
templateUrl: 'client/store.html'
})
.when('/til', {
templateUrl: 'client/til.html'
})
.when('/order', {
templateUrl: 'client/order.html'
})
});
index.html
<!DOCTYPE html>
<html>
<head>
<title>Demo Application</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<!-- require jquery and bootstrap scripts -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
</head>
<body ng-app="application" ng-controller="appController">
<header>
<div id="left_header">Demo Application</div>
</header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Store</li>
<li>About</li>
</ul>
</div>
</nav>
<div ng-view></div>
</html>
There are two more pages for store and about with only one tag in them.
I should be able to see the changes in the view part i.e. 'This is About page' but it is not being displayed.
I am referring to this URL
Any help would be appriciated.
Update-1
Added angular-route package but still not working.
Getting following error:
" Error: [$injector:modulerr] http://errors.angularjs.org/1.4.3/$injector/modulerr?p0=application&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.4.3%2F%24injector%2Fmodulerr%3Fp0%3DngRoute%26p1"
Update-2
Entire console output, which shows some error but don't understand a bit of it. It has several warnings as well.
https://pastebin.com/j06ku3yG
Update-3
I didn't added the minified js files for angular-route in to my html and that was the reason I was getting issues. Further more the existing angular script in html page also had version mismatch.
I also corrected some issues with routes after this I faced recursion related issues (could see multiple pages within the same page) Had to make changes to routs.
Thank you all for helping :)
I have modified your code a bit to give you a basic working demo of your app. The routing required an angular-route.js script for 1.2+ AngularJS versions. For both scripts their versions must match. I decided to use 1.6.5. I also replaced bootstrap and jquery with ui.bootstrap - angularjs version.
Here is a working demo:
/* Use `ui.bootstrap` module instead of jQuery + Bootstrap */
var app = angular.module('application', ["ngRoute", "ui.bootstrap"]);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'client/index.html'
})
.when('/about', {
templateUrl: 'client/about.html'
})
.when('/store', {
templateUrl: 'client/store.html'
})
});
app.controller('appController', function($scope, $location) {
$scope.isActive = function(path) {
return path === $location.path();
}
});
<!DOCTYPE html>
<html>
<!-- Matching angular.js and angular-route.js versions -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>
<div ng-app="application" ng-controller="appController">
<header ng-init="isNavCollapsed=true">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" ng-click="isNavCollapsed = !isNavCollapsed">
<span class="glyphicon glyphicon-menu-hamburger"></span>
</button>
</div>
<div class="collapse navbar-collapse" uib-collapse="isNavCollapsed">
<ul class="nav navbar-nav navbar-left">
<li ng-class="{ active: isActive('/')}">Home</li>
<li ng-class="{ active: isActive('/store')}">Store</li>
<li ng-class="{ active: isActive('/about')}">About</li>
</ul>
</div>
</div>
</nav>
</header>
<div ng-view></div>
<!-- Separate files -->
<script type="text/ng-template" id="client/index.html">
index
</script>
<script type="text/ng-template" id="client/about.html">
about
</script>
<script type="text/ng-template" id="client/store.html">
store
</script>
</div>
</body>
</html>
First, you still needs to link the NgRoute from the angular-route.js.
Secondly, to link templates use href="#!store" instead of href="#store"
Here's a working example using angularjs 1.6.9
'use strict';
var app = angular.module('application', ["ngRoute"]);
app.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'home.html'
})
.when('/store', {
templateUrl: 'store.html'
})
.when('/about', {
templateUrl: 'about.html'
})
});
<!-- require jquery and bootstrap scripts -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.min.js"></script>
<div ng-app="application" >
<script type="text/ng-template" id="home.html">
<div class="view">
<h2>home</h2>
</div>
</script>
<script type="text/ng-template" id="store.html">
<div class="view">
<h2>store</h2>
</div>
</script>
<script type="text/ng-template" id="about.html">
<div class="view">
<h2>about</h2>
</div>
</script>
<header>
<div id="left_header">Demo Application</div>
</header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Store</li>
<li>About</li>
</ul>
</div>
</nav>
<div ng-view></div>
</div>
I am learning how to implement routing in AngularJS. Everything else is working fine but the views are not getting updated when I click on the navigation.
How can I achieve the desired functionality in the application? I want the navigation to take us to the desired pages without refreshing the page and that's quite obvious.
Here is the code.
Index.html
<!DOCTYPE html>
<html ng-app="routingApp">
<head>
<title>AngularJS routing</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.7/angular-route.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="routingAppController">
<!-- Header and Navigation -->
<header>
<nav class= "navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Angular Routing App</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
<!-- Main Body where content will be injected -->
<div id="main">
<div ng-view></div>
</div>
</body>
</html>
Script.js
(function(){
'use strict';
var app = angular.module('routingApp', ['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl : 'pages/home.html',
controller : 'routingAppController'
})
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'aboutController'
})
.when('/contact', {
templateUrl : 'pages/contact.html',
controller : 'contactController'
});
});
app.controller('routingAppController', function($scope){
$scope.message = "This will get updated for sure!";
});
app.controller('aboutController', function($scope){
$scope.message = "This is the about page and it looks awesome!";
});
app.controller('contactController', function($scope){
$scope.message = "This is the contact page!";
});
})();
One of the pages
<div class="jumbotron text-center">
<h1>Home Page</h1>
<p>{{ message }}</p>
</div>
As a part of learning process, I am roaming around angular js routing concepts. For this, I created one inner folder inside app with two sample test html pages ..
When i run the app it should load first page from that folder but it does not not happening .. I am not sure where i have done wrong in this code...
I am getting error like this 'angular.js:4640Uncaught Error: [$injector:modulerr]'
Below is my controller code
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'Pages/main.html',
controller: 'mainController'
})
.when('/second', {
templateUrl: 'Pages/second.html',
controller: 'secondController'
})
});
myApp.controller('mainController', ['$scope','$log', function($scope,$log) {
}]);
myApp.controller('secondController', ['$scope','$log', function($scope,$log) {
}]);
and html code goes here
<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">
<head>
<title>Learn and Understand AngularJS</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="UTF-8">
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
html, body, input, select, textarea
{
font-size: 1.05em;
}
</style>
<!-- load angular via CDN -->
<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">AngularJS</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i>Home</li>
<li><i></i>second</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
and for main.html
<h1>this is main page</h1>
and for second.html
<h1>this is second page</h1>
Would any one please help on this query,
many thanks in advance..
Things seem to be working fine for me. See the working example below:
(Just change the href of Home link to #/)
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'Pages/main.html',
controller: 'mainController'
})
.when('/second', {
templateUrl: 'Pages/second.html',
controller: 'secondController'
})
});
myApp.controller('mainController', ['$scope', '$log',
function($scope, $log) {}
]);
myApp.controller('secondController', ['$scope', '$log',
function($scope, $log) {}
]);
html,
body,
input,
select,
textarea {
font-size: 1.05em;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- load angular via CDN -->
<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular-route.min.js"></script>
<div ng-app="myApp">
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">AngularJS</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i>Home
</li>
<li><i></i>second
</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div ng-view></div>
</div>
<script id="Pages/main.html" type="text/ng-template">
<h1>this is main page</h1>
</script>
<script id="Pages/second.html" type="text/ng-template">
<h1>this is second page</h1>
</script>
</div>
Edit
Don't directly serve your Angular code using file:/// protocol. It will not be able to make request to load resources. Use any simple lightweight servers, for example:
Python Simple server for Linux based platforms (python -m SimpleHTTPServer)
Mongoose for Windows
replace:
<li><i class="fa fa-home"></i>Home</li>
with
<li><i class="fa fa-home"></i>Home</li>
and it should work fine. i checked.
That error means angular could not find the module you're referring to. is your script able to connect to internet and can you make sure the angular cdn is not blocked by your firewall?
you could try to download the angular-route file and reference in your html and see if it works.
I'm just starting learning the angularjs and I want to use it for creating a ui template. I want to make a static HEADER and FOOTER and the only thing that will be dynamic is the CONTENT. My issue is that my It returns me a blank web page.
Thanks in advance guys.
index.html
<!DOCTYPE html>
<html data-ng-app="app">
<head>
<meta charset="utf-8">
<title>UI-Router</title>
<link rel="stylesheet" href="">
<!-- START LOAD VENDORS -->
<script src="js/jquery/jquery.min.js"></script>
<script src="js/angular/angular.min.js"></script>
<script src="js/angular/angular-ui-router.min.js"></script>
<!-- END LOAD VENDORS -->
<!-- START LOAD SOURCE CODE -->
<script src="js/app.js"></script>
<!-- END LOAD SOURCE CODE -->
</head>
<body ui-view>
</body>
</html>
app.js
var app = angular.module('app', ['ui.router'])
app.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('index',{
abstract: true,
url: '/index',
templateUrl: 'view/app.html'
})
}])
view/header.html
<ul>
<li>US</li>
<li>626.205.3838</li>
<li>cert#abkrescue.com</li>
<li>Search</li>
</ul>
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Instagram</li>
<li>LinkedIn</li>
</ul>
view/footer.html
<div>
<span>name here</span>
<span>partner</span>
<span>subscribe</span>
<ul>
<h3>get to know us</h3>
<li>blog</li>
<li>stories</li>
<li>staff</li>
</ul>
<ul>
<h3>connect</h3>
<li>contact</li>
<li>help</li>
<li>request</li>
</ul>
<ul>
<h3>resource</h3>
<li>download</li>
<li>financial</li>
<li>donors</li>
</ul>
<ul>
<h3>get involved</h3>
<li>volunteer</li>
<li>partnership</li>
<li>donate</li>
</ul>
</div>
view/app.html
<div data-ng-include=" 'view/header.html' "></div>
<div data-ng-include=" 'view/footer.html' "></div>
You cannot transition to an abstract state
i've created a working plnkr here: https://plnkr.co/edit/yRazozMjTM99tCKFFmIl?p=preview
$stateProvider
.state('index',{
url: '/',
templateUrl: 'view/app.html'
})
Try using the ui-view element directive. And make sure you are referring the template correctly
<body>
<ui-view></ui-view>
</body>
The correct way to do this is to have separate ui-view directives for your header, content and the footer.
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>UI-Router</title>
<link rel="stylesheet" href="">
<!-- START LOAD VENDORS -->
<script src="js/jquery/jquery.min.js"></script>
<script src="js/angular/angular.min.js"></script>
<script src="js/angular/angular-ui-router.min.js"></script>
<!-- END LOAD VENDORS -->
<!-- START LOAD SOURCE CODE -->
<script src="js/app.js"></script>
<!-- END LOAD SOURCE CODE -->
</head>
<body>
<div ui-view="header">
<div ui-view="content">
<div ui-view="footer">
</body>
</html>
Define the template for each ui-view in the state config function and remove the abstract: true option. More on it here: what is the purpose of use abstract state?
app.js
var app = angular.module('app', ['ui.router'])
app.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('index',{
url: '/index',
views: {
'header': {
templateUrl: 'view/header.html'
},
'content': {
templateUrl: 'view/app.html'
},
'footer': {
templateUrl: 'view/footer.html'
}
}
})
}])
Also wrap your header.html code in a div tag.
header.html
<div>
<ul>
<li>US</li>
<li>626.205.3838</li>
<li>cert#abkrescue.com</li>
<li>Search</li>
</ul>
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Instagram</li>
<li>LinkedIn</li>
</ul>
</div>
Now the header and footer will remain fixed and you can change your content based on states by adding other state like this:
.state('index.two',{
url: '/index/two',
views: {
'content#': {
templateUrl: 'view/two.html'
}
}
})
I am working in angular.js. Using ng-view navigate in body section. If i need to navigate to a new html page. How we can achieve in angular.js. Is there any angular.js directives in angular.js.
Thanks in Advance,
You should go through following things for routing:
Angular ui-route
Angular ngRoute
Angular-UI-Router is more powerful directive than ngRoute. Following code is what i had tried sometimes before. hope it will also help you.
app.js
var app = angular.module('app', ['ui.router']); //Inject `ui.router` directive inside your `app` module
app.config(['$urlRouterProvider', '$stateProvider', function ($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'templates/home.html',
})
.state('about', {
url: '/about',
templateUrl: 'templates/about.html'
})
}]);
index.html
<html>
<head>
<title>Angular Routing</title>
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="Scripts/app.js"></script>
<script src="Scripts/controllers/homeCtrl.js"></script>
</head>
<body ng-app="app">
<div class="container">
<div ng-include="'templates/header.html'"></div>
<div ui-view></div>
<div ng-include="'templates/footer.html'"></div>
</div>
</body>
</html>
templates/header.html
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="home">Angular</a>
</div>
<ul class="nav navbar-nav">
<li>Home</li>
<li><a ui-sref="about">About</a></li>
</ul>
</div>
</nav>
templates/footer.html
<p>© SJ</p>
templates/home.html
<h1>Home</h1>
templates/about.html
<h1>About<h1>