I'm new to angularJS and have been working on a tutorial in visual studio on angularjs routing, but even though I change the url link, the ng-view doesn't change.
This is my index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="controller.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<meta charset="utf-8" />
</head>
<body ng-app="mainApp">
home
another page
<div ng-view></div>
</body>
</html>
This is my controller.js
var app = angular.module('mainApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/home', {
template: 'Home'
})
.when('/anotherpage', {
template: 'another page'
})
.otherwise({
template: 'index'
});
});
Even though I change the url to /index.html#/home, the content in the div is always 'index'. can anyone suggest any solutions for this.
change the html as below it should work.
home
another page
<div ng-view></div>
Related
I am new to AnguarJS and to be honest a bit confused right now.
I just started getting into routing and create this very small app just for testing, but it's not working.
Let me share the entire app, which is... just 2 files:
1/ app.js
angular
.module('app', ['ui.router'])
app.config(['$stateProvider', function($stateProvider) {
$stateProvider.state('firstMessage', {
url: 'first',
template: `<h1>First message</h1>`
});
}]);
2/ index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ui routing testing</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.min.js"></script>
</head>
<body>
<h1>Hello World</h1>
First Message
<div ui-view></div>
</body>
</html>
That's it! But when I run the app with npx http-server -o the templatedoesn't show when I click and land on the #/first url.
Does anyone have an idea where the problem comes from?
I think you are missing a / in your url property
angular
.module('app', ['ui.router'])
app.config(['$stateProvider', function($stateProvider) {
$stateProvider.state('firstMessage', {
url: '/first', // HERE
template: `<h1>First message</h1>`
});
}]);
this is my test.js file
angular.module("testApp",['ngRoute'])
.config(['$routeProvider','$locationProvider',function($routeProvider,$locationProvider){
$routeProvider
.when("/test",{
templateUrl: 'test.html',
controller: 'testCtrl'
})
.otherwise({
redirectTo : "/test"
});
$locationProvider.html5Mode(true);
}]).controller("testCtrl",function(){
this.message = "hello";
console.log("in controller");
})
this is index.html
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<script src="angular.js"></script>
<script src="angular-route.js"></script>
<script src="test.js"></script>
<base href="/">
</head>
<body>
<div ng-view></div>
</body>
</html>
this is test.html file
<div ng-controller="testCtrl as tCtrl">
<h1>{{tCtrl.message}}</h1>
</div>
when I hit http://127.0.0.1:8080/ it is redirected http://127.0.0.1:8080/test and it is working fine with load all resources i.e controller and angualar.js.
but when i hit http://127.0.0.1:8080/test it doesn't load anything giving {{tCtrl.message}}
How to resolve this issue.
I'm new on AngularJS and I'm trying to figure out how to get clean URLs on my localhost server (it's a basic LAMP).
The problem is that if I wanna reach localhost/login it works just if I create a link in the index.html (using angular-ui-router). If I try to reach the same URL typing it in the browser's address bar, I get the "404 Not Found" error.
Here the code...
index.html
<!DOCTYPE html>
<html ng-app="test">
<head>
<title>test</title>
<base href="/">
</head>
<body ng-controller="MainController">
<h1>{{message}}</h1>
<a ui-sref="login" ui-sref-active="active">click me</a>
<div ui-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.7/angular-route.min.js"></script>
<script src="js/angular-ui-router.js"></script>
<script src="js/app.js"></script>
<script src="js/MainController.js"></script>
</body>
</html>
app.js
(function() {
angular.module("test", ['ui.router'])
.config(function($stateProvider,$urlRouterProvider,$locationProvider){
$urlRouterProvider.otherwise('/');
$locationProvider.html5Mode(true);
$stateProvider
.state('login', {
url:'/login',
templateUrl:'login.html'
});
});
})();
MainController.js
(function() {
angular.module("test")
.controller("MainController", function($scope){
$scope.message = "Homepage";
});
})();
login.html
<h2>/login page</h2>
Any help?
I am trying to set up a SPA with angular, and with the current code it is not working, while run on a server. My index.html does not have a # after it, which I think it should for the SPA. I am curious why I am not getting a # in the url's. for example, navigating to the index i get something like localhost:4000/index.html/ instead of localhost:4000/index.html#/. When i try to navigate to localhost:4000/index.html/home i get a 404 error. Can anyone tell me why this is so, or if there are any other issues you can spot.
This is my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ski</title>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
</head>
<body ng-app="Ski">
<ng-view></ng-view>
<script src="js/app.js"></script>
<script src="js/routes.js"></script>
</body>
</html>
angular routes :
angular.module('Ski').config(function($routeProvider) {
'use strict';
.when('/home', {
templateUrl: 'templates/home.html'
})
.when('/map', {
templateUrl: 'templates/map.html'
})
.otherwise({
redirectTo: '/'
});
});
app.js
angular.module('Ski', ['ngRoute']);
Templates:
this on is templates/maps
<div>
<h1> Hello World </h1>
</div>
this one is templates/home
<h1> Home </h1>
Ive just started to learn AngularJS and im trying to use angular-route but can't get it to work.
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="fantasySportsApp">
<head>
<title></title>
</head>
<body>
<link type="text/css" rel="stylesheet" href="Content/Style/bootstrap.min.css"/>
<!--Placeholder for views-->
<div data-ng-view="">
Hejsan
ge
</div>
<script src="Content/Scripts/jQuery-1.11.0.js"></script>
<script src="Content/Scripts/jquery-ui.js"></script>
<script src="Content/Scripts/angular.min.js"></script>
<script src="Content/Scripts/angular-route.js"></script>
<script src="App/app.js"></script>
<script src="Content/Scripts/bootstrap.min.js"></script>
</body>
</html>
my app.js looks like this:
var fantasySportsApp = angular.module('fantasySportsApp', ['ngRoute']);
fantasySportsApp.config(function($routeProvider) {
$routeProvider.when('/login', {
controller: 'userController',
templateUrl: 'App/partials/login.html'
})
.when('/startPage', {
controller: 'startPageController',
templateUrl: '/App/partials/startPage.html'
})
.otherwise({ redirectTo: "/index" });
});
when i start my page ill get to this url: localhost:26283/index.html#/index but it wont show me anything. the page is empty. If i inspect the html i find this in the code: "<-- ngView: -->" think indicates that the partial view that i try to route to is supposed to start but there is nothing under the tag.
What could be the problem?