I'm creating a website and I'm using JavaScript + AngularJS, presently I create the routes for the application, but it always returns 404 not found on the server, I've tried several examples of the internet but none of them worked, here's an example of my code, remembering that The html pages are inside the WebContent:
<html ng-app="angularRoutingApp">
<head>
<title>Home</title>
<meta charset="utf-8">
</head>
<body>
<div>
index <br> home
</div>
<div ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.3/angular-route.js"></script>
<script>
var angularRoutingApp = angular.module('angularRoutingApp', ['ngRoute']);
angularRoutingApp.config(function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when("/index", {
template: "/index.html"
})
.otherwise({
redirectTo: '/home.html'
});
});
</script>
</body>
</html>
you forgot the ng-view directive.
also,
the href need to be with a hash prefix - or using the Link directive.
the redirectTo key need to provide a view [name/address] & not a
template
if you want to use template files & not inline code use the templateUrl key
you can see an example of your code here: http://codepen.io/AceDesigns/pen/ZLXLKa
<html ng-app="angularRoutingApp">
<head>
<title>Home</title>
<meta charset="utf-8">
</head>
<body>
<div>
index<br>
home
</div>
<div class="">
<ng-view></ng-view>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.3/angular-route.js"></script>
<script>
var angularRoutingApp = angular.module('angularRoutingApp', ['ngRoute']);
angularRoutingApp.config(function($routeProvider){
$routeProvider
.when("/index", {template:"<div>INDEX VIEW</div>"})
.when("/home", {template:"<div>HOME VIEW</div>"})
.when("/tempFile", {templateUrl: "views/temp_file.html"})
.otherwise({redirectTo: '/home'});
});
</script>
</body>
</html>
Related
This question already has answers here:
AngularJS All slashes in URL changed to %2F
(6 answers)
angularjs 1.6.0 (latest now) routes not working
(5 answers)
Closed 3 years ago.
I am writing some simple code to practice routing in angular. I have an index.html file which has links to access the respective templates and a div element to display the templates. The templates however do not show when the links are clicked and the url does not appear as expected.
url appears as:
http://localhost/angproj/#!#%2Fhome
instead of the expected http://localhost/angproj#/home
Here is the code:
Index.html
<!DOCTYPE html>
<html ng-app = "myModule">
<head>
<title>Home</title>
<link rel="stylesheet" href ="styles.css">
<script src="angular/angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="script.js"></script>
<meta name="vieport" content="width=device-width initial scale=1">
</head>
<body>
<header><h2>Website Header</h2></header>
<div class="column">
<div class="links">
Home<br>
Our services<br>
Technologies<br>
</div>
</div>
<div class="content" ng-view></div>
<footer><h3>Website footer</h3></footer>
</body>
</html>
script file
var myApp = angular
.module("myModule",["ngRoute"])
.config(function($routeProvider){
$routeProvider
.when("/home",{
template:"About Us"
})
.when("/services",{
template:"Our Services"
})
.when("/technologies",{
template:"Our Technologies"
})});
The problem is the default hash-prefix used for $location hash-bang URLs is ('!') that's why there are additional unwanted characters in your URL.
If you actually want to have no hash-prefix and make your example work then you can remove default hash-prefix (the '!' character) by adding a configuration block to your application.
So your script file will be:
var myApp = angular
.module("myModule", ["ngRoute"])
.config(function ($routeProvider, $locationProvider) { //inject $locationProvider service
$locationProvider.hashPrefix(''); // add configuration
$routeProvider
.when("/home", {
template: "About Us"
})
.when("/services", {
template: "Our Services"
})
.when("/technologies", {
template: "Our Technologies"
})
});
Full working example:
var myApp = angular
.module("myModule", ["ngRoute"])
.config(function ($routeProvider, $locationProvider) { //inject $locationProvider service
$locationProvider.hashPrefix(''); // add configuration
$routeProvider
.when("/home", {
template: "About Us"
})
.when("/services", {
template: "Our Services"
})
.when("/technologies", {
template: "Our Technologies"
})
});
<!DOCTYPE html>
<html ng-app = "myModule">
<head>
<title>Home</title>
<link rel="stylesheet" href ="styles.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular-route.min.js"></script>
<meta name="vieport" content="width=device-width initial scale=1">
</head>
<body>
<header><h2>Website Header</h2></header>
<div class="column">
<div class="links">
Home<br>
Our services<br>
Technologies<br>
</div>
</div>
<div class="content" ng-view></div>
<footer><h3>Website footer</h3></footer>
</body>
</html>
I have a gulp server with AngularJS 1.6 application.
I have an ng-router. I am trying to remove #! symbol from the url, so I have used ng-router. I have used $locationProvider.html5Mode(true); and in index.html I have used <base href="/"> at the top.
but when i refresh the page it is showing Cannot GET /ui/index.html/
I am using gulp server.
app.js
var app = angular.module("apollo", ['ngRoute']);
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/ui/index.html/', {
templateUrl: 'root.html',
controller: 'HeaderCtrl'
})
.when('/ui/:appName/', {
templateUrl: 'apps/' + localStorage.getItem('locationApp') + "/controllers/home/templates/home.template.html"
})
.otherwise({
redirectTo: '/ui/index.html/'
});
$locationProvider.html5Mode(true);
});
index.html
<!DOCTYPE html>
<html>
<head>
<title>Apollo</title>
<base href="/">
<script src="library/angular.min.js"></script>
<script src="library/angular-route.js"></script>
<script src="app.js"></script>
<script src="services/apollo-headerCtrl.js"></script>
<script src="services/AppCtrl.js"></script>
</head>
<body ng-app="apollo">
<div ng-view></div>
</body>
</html>
I am using "prettyprint" along with "AngularJs" which is working very well, but only issue is if I use routing, then the prettyprint function is not working (as it might have been configured to run on pageLoad). Now, what if I am going to various ng-view pages and coming back? How to run the prettyprint function even on route change?
HTML:
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/google/code-prettify/master/styles/sons-of-obsidian.css">
<script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.1/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
One
Two
Three
<div ng-view=""></div>
<script>
//App Declaration
var app = angular.module('myApp', ['ngRoute'] );
//Controllers
app.controller('myCtrl', function($scope) {
});
//Routers
app.config(function($routeProvider){
$routeProvider
.when('/one', {
templateUrl: 'one.html'
})
.when('/two', {
templateUrl: 'two.html'
})
.when('/three', {
templateUrl: 'three.html'
})
.otherwise({
redirectTo: '/one'
});
});
</script>
</body>
</html>
one.html
This is one
<pre class="prettyprint">
<div>
<p>
<a href="http://www.google.com">Google</a>
</p>
</div>
</pre>
two.html
This is two
Image on first time clicking 'one' link:
Going to 2nd view or 3rd view and then coming back:
Can someone help me out please?
I want to dynamically add menu JavaScript file and html to content.html, but it can't do.
I created simple example
demo
I try move "<script src="menu.js"></script>" to menu.html
Your code moves away from the whole idea of writing single page app with angular. I have updated it to give you basic idea of how you would do the routes and share templates and use controller.
Check out the plunkr
html
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="menu.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
<script data-require="ui-router#*" data-semver="0.2.15" src="https://cdn.rawgit.com/angular-ui/ui-router/805e69bae319e922e4d3265b7ef565058aaff850/release/angular-ui-router.js"></script>
<script src="menu.js"></script>
<script src="index.js"></script>
</head>
<body>
<div id="menu" ng-include="'menu.html'"></div>
<div ui-view></div>
</body>
</html>
js
angular.element(document).ready(function() {
angular.bootstrap(document, ["app"]);
});
angular.module('app',['moduleContent', 'moduleMenu', 'ui.router']);
var app = angular.module('app');
app.config(function($stateProvider) {
$stateProvider
.state('index', {
url: "",
templateUrl: "first.html",
controller: 'firstCtrl'
})
.state('second', {
url: "/second",
templateUrl: "second.html"
})
});
app.controller('firstCtrl', ['$scope', function($scope) {
$scope.page = "first";
}]);
//Conttent module
angular.module('moduleContent',[])
.controller('contentCtrl', contentCtrl);
function contentCtrl(shareData)
{
shareData.currentPage = 0;
}
I'm building a cordova app and want to use angular to build out pages a the user selects content. I'm building out in the web right now before I move to cordvoa.
<!doctype html>
<html ng-app="nanoApp">
<head>
<link rel="stylesheet" href="css/main.css">
<script src="js/angular.min.js"></script>
<script src="js/ngroute.min.js"></script>
<script src="js/angular-script.js"></script>
</head>
<body>
<div id="content" class="scroller" ng-view></div>
</body>
</html>
angular-script.js:
var nanoApp = angular.module('nanoApp',['ngRoute']);
nanoApp
.config(function($routeProvider) {
$routeProvider
.when('/', {
controller:'HomeController as homeSlides',
templateUrl:'../content/home.html'
});
});
home.html:
<div id="home" class="container paralax">
...
</div>
That's because you didn't define HomeController.
Try to create controller first
Like this
var nanoApp = angular.module('nanoApp',['ngRoute']);
nanoApp.controller("HomeController",["$scope",function($scope){
//put your code here
}]);