I am not able routing to other page what the problem I dont know please solve my problem.
I am using Eclipse Java EE IDE for Web Developers.
Version: Mars.1 Release (4.5.1)
Build id: 20150924-1200
// also include ngRoute for all our routing needs
var myApp = angular.module('myApp', ['ngRoute']);
// configure our routes
myApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('#/', {
templateUrl: 'home.html',
controller: 'mainController'
})
// route for the about page
.when('#/about', {
templateUrl: 'about.html',
controller: 'aboutController'
})
// route for the contact page
.when('#/contact', {
templateUrl: 'contact.html',
controller: 'contactController'
});
});
// create the controller and inject Angular's $scope
myApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.username = 'ranjeet';
$scope.password = 'singh';
$scope.message = 'Everyone come and see how good I look!';
});
myApp.controller('aboutController', function($scope) {
$scope.message = 'Look! I am an about page.';
});
myApp.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-route.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Angular Routing Example</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>home
</li>
<li> About
</li>
<li>Contact
</li>
</ul>
</div>
</nav>
</header>
<div id="main">
<div ng-view></div>
</div>
</body>
</html>
file structure of my project :
[1
Your url values in $routeProvider.when() should not include # which will be set internally if applicable (as by default html5mode is disabled by angular router, so angular does use hash location strategy).
Try changing:
$routeProvider
// route for the home page
.when('#/', {
templateUrl: 'home.html',
controller: 'mainController'
})
To
$routeProvider
// route for the home page
.when('/', { //do remove # from all registered routes
// ^^ no "#"
templateUrl: 'home.html',
controller: 'mainController'
})
Related
I am having trouble with a SPA I'm trying to build using Angular. My problem is (I believe) with the ng-view. I can't seem to get it to populate my page with content from the other pages when clicking the links on my page.
Here is my code from my script.js file:
var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider, $locationProvider){
$routeProvider
.when('/', {
templateUrl : 'challenges/Challenge3/home.html',
controller : 'mainController'
})
.when('/about', {
templateUrl : 'challenges/Challenge3/about.html',
controller : 'aboutController'
})
.when('/contact', {
templateUrl : 'challenges/Challenge3/contact.html',
controller : 'contactController'
})
.otherwise({
redirectTo: 'challenges/Challenge3/'
});
$locationProvider.hashPrefix('');
$locationProvider.html5Mode({
enabled : true,
requireBase : false
});
});
app.controller('mainController', function($scope){
$scope.message = 'Home page';
$scope.title = 'Home';
});
app.controller('aboutController', function($scope){
$scope.message = 'About page';
$scope.title = 'About';
});
app.controller('contactController', function($scope){
$scope.message = 'Contact page';
$scope.title = 'Contact';
});
And here is where I'm trying to inject in my index.html file:
<body ng-controller="mainController">
<div class="container">
<div class="header clearfix">
<nav role="navigation">
<ul class="nav nav-pills pull-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div id="main">
<div ng-view></div>
{{ message }}
</div>
</div>
</body>
About.html
<h3>About Us</h3>
<p>This is a test page.</p>
<p>Thanks for reading about us!</p>
I'm creating a web portfolio and the main page has a menu. When the user clicks 'video' I want the site to go to mywebsite.com/video and go to video.html. I'm using AngularJS and I can't figure out what I'm doing wrong.
index.html
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body ng-app="myApp">
<nav class="topnav" id="myTopnav">
Portfolio
Upcoming Events
CV
Video Reel
</nav>
<div class="ng-view"></div>
</body>
main.js
var app = angular.module('myApp', ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when(
'/', {
redirectTo: '/home'
})
.when('/portfolio', {
templateUrl: 'templates/portfolio.html'
})
.when('/events', {
templateUrl: 'templates/events.html'
})
.when('/cv', {
templateUrl: 'templates/cv.html'
})
.when('/video', {
templateUrl: 'templates/video.html'
})
.otherwise({ redirectTo: '/' });
});
can you try to add $locationProvider service into config and change href attributes
//html
<body ng-app="myApp">
<nav class="topnav" id="myTopnav">
Portfolio
Upcoming Events
CV
Video Reel
</nav>
<div class="ng-view"></div>
</body>
//js
app.config(['$routeProvider','$locationProvider',
function($routeProvider,$locationProvider) {
$routeProvider
.when(
'/', {
redirectTo: '/'
})
.when('/portfolio', {
templateUrl: 'templates/portfolio.html'
})
.when('/events', {
templateUrl: 'templates/events.html'
})
.when('/cv', {
templateUrl: 'templates/cv.html'
})
.when('/video', {
templateUrl: 'templates/video.html'
})
// removed other routes ... *snip
.otherwise({
redirectTo: '/'
}
);
// enable html5Mode for pushstate ('#'-less URLs)
//$locationProvider.html5Mode(true);
//$locationProvider.hashPrefix('!');
}]);
It should be,
Portfolio
Upcoming Events
CV
Video Reel
DEMO
I think you should inject $locationProvider because you are using it but I do not see the injection.
I am playing with angularjs, and I cannot find the reason why ng-view does not work. What am I doing wrong?
var app = angular.module('Demo', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider.when('#/about', {
templateUrl: 'about.html',
controller: 'homeController'
});
$routeProvider.when('#/contacts', {
template: 'contacts.html',
controller: 'contactsController'
});
});
app.controller('homeController', function ($scope) {
alert('homeController');
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src=""//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js""></script>
<body ng-app>
<div class="menu">
<ul>
<li>About</li>
<li>Contacts</li>
</ul>
</div>
<div class="MainContent">
<div ng-view></div>
</div>
<template id="about.html">
about
</template>
<template id="contacts.html">
contacts
</template>
</body>
There were a few issues here:
Your script source for angular-route was incorrect in the HTML portion.
Your $routeProvider.when lines do not need '#', so I removed them.
One of your templates used templateUrl, which was not correct. It should only be template: as you are not calling a URL.
Here is a working plunker:
https://plnkr.co/edit/GSoJ4sAxM8joH6zmrxjf?p=preview
var app = angular.module('demo', ['ngRoute'])
// URLs should not have # in them
.config(function ($routeProvider) {
$routeProvider.when('/about', {
template: 'about.html',
controller: 'homeController'
});
$routeProvider.when('/contacts', {
template: 'contacts.html',
controller: 'contactsController'
});
});
app.controller('homeController', function ($scope) {
alert('homeController');
});
app.controller('contactsController', function ($scope) {
alert('contactsController');
});
I have been attempting to get angular routing working and everytime I create a new project and It does not work. I have had it working in some projects but I can never see why my newly created project does not work.
Its probably something obvious, thanks for any help in advance.
<!DOCTYPE html>
<html ng-app="app">
<head>
<title></title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/Styles.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
</head>
<body>
<a href="#/">
<button class="btn btn-danger">Homepage</button></a>
<a href="#/about">
<button class="btn btn-success">About</button></a>
<a href="#/date">
<button class="btn btn-warning">Date</button></a>
<div class="row">
<div ng-view>
</div>
</div>
<script src="SinglePageApp/app.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
</body>
</html>
app.js file
var app = angular.module('app', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
//default page
.when('/', {
templateUrl: "pages/homepage.html",
controller: 'HomeCtrl'
})
//about page
.when('/about', {
templateUrl: "pages/about.html",
controller: 'AboutCtrl'
})
//date page
.when('/date', {
templateUrl: "pages/date.html",
controller: 'DateCtrl'
});
});
app.controller('HomeCtrl', ['$scope', function ($scope) {
$scope.homepage = "Homepage";
}]);
app.controller('AboutCtrl', ['$scope', function ($scope) {
$scope.about = "Lorem ipsum............";
}]);
app.controller('DateCtrl', ['$scope', function ($scope) {
$scope.dateNow = new Date();
}]);
Try this plunker:
http://embed.plnkr.co/L6E4GCe3O0Jh1vqKyGFD/
I've used the example at the angularJS documentation to create your usecase.
You should change the template filepaths, with your own. I also haven't included bootstrap.
If you want to use buttons, then you can use this example in plunkr based on this answer by Josh David Miller(upvote him if you use his directive). Directives are a way to customize html, and here we're using one as an html attribute (you can also use them as standalone elements) to create a hyperlink button.
Here's fiddle for you that works as expected
Not sure why your code is not working, angular has pretty bad debugging tool.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-route.js"></script>
<div>
<a href="#/">
<button class="btn btn-danger">Homepage</button>
</a>
<a href="#/about">
<button class="btn btn-success">About</button>
</a>
<a href="#/date">
<button class="btn btn-warning">Date</button>
</a>
<div class="row">
<div ng-view></div>
</div>
</div>
<script type="text/ng-template" id="pages/homepage.html">
{{homepage}}
</script>
<script type="text/ng-template" id="pages/about.html">
{{about}}
</script>
<script type="text/ng-template" id="pages/date.html">
{{dateNow}}
</script>
Script file looks like this
var app = angular.module('app', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
//default page
.when('/', {
templateUrl: "pages/homepage.html",
controller: 'HomeCtrl'
})
//about page
.when('/about', {
templateUrl: "pages/about.html",
controller: 'AboutCtrl'
})
//date page
.when('/date', {
templateUrl: "pages/date.html",
controller: 'DateCtrl'
})
.otherwise({redirectTo:'/'});
});
app.controller('HomeCtrl', ['$scope', function ($scope) {
$scope.homepage = "Homepage";
}]);
app.controller('AboutCtrl', ['$scope', function ($scope) {
$scope.about = "Lorem ipsum............";
}]);
app.controller('DateCtrl', ['$scope', function ($scope) {
$scope.dateNow = new Date();
}]);
angular.bootstrap(document.body, ['app']);
I am new to AngularJS and I am trying to set up angularjs routing together with a flask service but it doesn't seem to work. Here you can see the error I am getting when I run the application:
Error: [$injector:modulerr] http://errors.angularjs.org/1.2.25/$injector modulerr?p0=scotchApp&p1=%5B%24injector%3Aunpr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.2.25%2F%24injector%2Funpr%3Fp0%3D%2524routeProvider%0AD%2F%3C%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A6%3A450%0Agc%2Fl.%24injector%3C%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A36%3A202%0Ac%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A34%3A305%0Ad%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A35%3A1%0Ae%2F%3C%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A33%3A386%0Ar%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A7%3A288%0Ae%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A33%3A207%0Agc%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A36%3A309%0Afc%2Fc%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A18%3A170%0Afc%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A18%3A387%0AXc%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A17%3A415%0A%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A214%3A469%0Aa%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A145%3A67%0Aoe%2Fc%2F%3C%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A31%3A223%0Ar%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A7%3A288%0Aoe%2Fc%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A31%3A207%0A
Here is my project structure:
angular_routing/
flask_service.py
static/
script.js
templates/
index.html
....
This is my script.js file:
var scotchApp = angular.module('scotchApp', [""]);
// configure our routes
scotchApp.config(function($routeProvider, $locationProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'templates/home.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
templateUrl : 'templates/about.html',
controller : 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl : 'templates/contact.html',
controller : 'contactController'
});
$locationProvider.html5Mode(true);
});
// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
scotchApp.controller('aboutController', function($scope) {
$scope.message = 'Look! I am an about page.';
});
scotchApp.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
This is my index.html file:
<html ng-app="scotchApp">
<head>
<title>
Hello world!
</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="static/script.js"></script>
</head>
<body ng-controller="mainController">
<!-- HEADER AND NAVBAR -->
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Angular Routing Example</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-comment"></i> Contact</li>
</ul>
</div>
</nav>
</header>
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
<!-- angular templating -->
<!-- this is where content will be injected -->
<div ng-view></div>
</div>
</body>
</html>
Finally, this is my flask_service.py file:
from flask import Flask, render_template
app = Flask(__name__)
app.debug = True
#app.route('/')
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run()
You should use var scotchApp = angular.module('scotchApp', ['ngRoute']); instead of var scotchApp = angular.module('scotchApp', [""]);, otherwise you will fail to instantiate the module.
Read more about AngularJS modules.