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?
Related
I am learning and experimenting with multiple views and routing. For this reason, I have written three files test.html, controllers.js, and app.js. When I run the application, ideally the view1 should display the message and view2 should display date time. But it is just displaying two tabs as view 1 and view 2 and the message and dates are not being displayed. I am trying to figure out what I am doing wrong.
My test.html
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>AngularJS Routing</title>
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<ul class="menu">
<li>view1</li>
<li>view2</li>
</ul>
<div ng-view></div>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</body>
</html>
my app.js
'use strict';
angular.module('myApp',['myApp.controllers','ngRoute']);
angular.module('myApp').config(function($routeProvider){
$routeProvider.when('/view1',{
controller: 'Controller1',
templateUrl: 'partials/view1.html'
}).when('/view2',{
controller: 'Controller2',
templateUrl: 'partials/view2.html'
});
});
my controllers.js
'use strict';
angular.module('myApp.controllers',[]).
controller('Controller1',function($scope){
$scope.message="Hello, world";
}).controller('Controller2',function($scope){
$scope.now=new Date();
});
Kindly let me know where I am doing wrong.
Load your controller.js ahead of app.js since the module myApp is dependent on the myApp.controllers
<script src="js/controllers.js"></script>
<script src="js/app.js"></script>
DEMO
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 cannot see my index page till I uncomment my code in controller.What am i doing wrong.here is my sample code.I have tried all possible options, not getting where am i going wrong
`
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js"></script>
<script type="text/javascript">
var abc = angular.module('myApp', ["ui.router"])
.config(function($stateProvider,$urlRouterProvider){
$stateProvider.state('home',{
template: '<h1>This template is displayed with Ui route </h1>'
});
$urlRouterProvider.otherwise('/');
}).
controller('myNewCtrl',function($scope,$state){
// $state.go('home');
});
</script>
<title>My Angular App</title>
</head>
<body ng-app='myApp'>
<div ng-controller="myNewCtrl">
<ui-view></ui-view>
</div>
</body>
</html>`
DEMO
var myApp = angular.module('myApp', ['ui.router']);
myApp.config(function ($stateProvider, $urlRouterProvider){
$stateProvider.state("home", {
url: "#",
template: "<h1>This template is displayed with Ui route </h1>",
controller: "myNewCtrl"
});
});
myApp.controller('myNewCtrl', ['$scope', function($scope) {
}])
<!DOCTYPE html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
<script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<nav>
<a ui-sref="home">Home</a>
</nav>
<div ui-view></div>
</body>
Working demo :
var myApp = angular.module('myApp',['ui.router']);
myApp.config(function ($stateProvider, $urlRouterProvider){
$stateProvider.state("home", {
template: "<h1>This template is displayed with Ui route </h1>",
controller: "myNewCtrl"
});
});
myApp.controller('myNewCtrl',['$scope','$state', function($scope,$state) {
$state.go('home');
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<div ng-app="myApp" ng-controller="myNewCtrl">
<div ui-view></div>
</div>
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>
So on load to the base page, I'm expecting the page to redirect to: http://myurl.com/index.php#/search
Currently nothing happens...any ideas?
<!doctype html>
<html ng-app="appDep">
<head>
<meta charset="utf-8">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular-route.js"></script>
<script>
var app = angular.module('appDep', ['ngRoute']);
app.config([ '$routeProvider', function($routeProvider) {
$routeProvider.when('/search/:sig?', {
templateUrl: 'blablabla',
controller : 'notYetCreated'
}).otherwise({
redirectTo : '/search'
});
} ]);
app.controller('notYetCreated', function($scope,$log,$http,$q,$routeParams, $location) {
console.log('test')
});
</script>
</head>
<body>
HI
<script type="text/ng-template" id="blablabla">
TEST
</script>
</body>
</html>
Add <div ng-view></div>