I try remove # in url . It's working fine before i remove it . But when i remove , I get err in console cant get file patch . Here is my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<base href="/">
</head>
<body>
<a ui-sref="main">Main</a>
<a ui-sref="login">Login</a>
<div ui-view>
<script src="test.js"></script>
<script src="testroute.js"></script>
<script src="testservices.js"></script>
</body>
</html>
Here is js config
function configRoute($stateProvider,$locationProvider){
$locationProvider.html5Mode(true);
$stateProvider
.state('main',{
url:'/main',
templateUrl:'test2.html',
controller: 'myController',
controllerAs:'vm'
})
.state('login',{
url:'/login',
templateUrl:'test1.html',
controller:'testController',
controllerAs:'vm'
})
Here is err i get
GET http://localhost:8080/test.js 404 (Not Found)
GET http://localhost:8080/testroute.js
GET http://localhost:8080/testservices.js
Try to give solution folder name in base tag as example below,
<base href="/SolutionFolder/">
Related
I am trying to display the response in my view.....I am getting data in my controller but the data is not showing in view
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ngGeolocation/ngGeolocation.min.js"/>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controller.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view ></ion-nav-view>
</body>
</html>
app.js
angular.module('starter', ['ionic','starter.controllers','ui.router'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('Login', {
cache: false,
url: '/Login',
views: {
'': {
templateUrl: 'Templates/Login.html',
controller: 'loginCtrl',
}
}
})
$urlRouterProvider.otherwise('/Login');
});
my controller
var app=angular.module('starter.controllers',['ngGeolocation']);
app.controller('loginCtrl',function($geolocation, $scope){
$scope.test="test string";
$geolocation.getCurrentPosition({
}).then(function(position) {
$scope.myPosition = position;
console.log($scope.myPosition);
});
})
in the console i am able to see the data
Login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="main">
<pre>{{test}}</pre>{{best}}
{{myPosition.latitude}}
</div>
</body>
</html>
I can only see first pre tag data, the second is always '{}'
I tried to create a plunker but its giving a warning for $geolocation and that function is escaping from execution.. Any help will be appreciated...tq
Your $scope.myPosition is a Geoposition object. That object contains a coords object that contains the values for latitude and longitude (among others). Change your view like so:
{{myPosition.coords.latitude}}
Hope this helps.
I just tried on the jfiddle. Write this to see the latitude:
`<pre>{{myPosition.coords.latitude}}</pre>`
and make sure location settings is ENABLED in your computer and it will show the correct value.
I spent a bit of time generating a https://jsfiddle.net/jktkq8tL/6/. Most notably adding an error function,
$geolocation.getCurrentPosition({
}).then(function(position) {
$scope.myPosition = position;
console.log($scope.myPosition);
},function(data) {
console.log(data.error.message);
});
which highlighted an error:
Network location provider at 'https://www.googleapis.com/' : No
response received.
Once I had received this error, I performed a search and found this SO answer. Which states:
I simulated this problem and found that the success callback functions
were only called when the html page was hosted on a web server and not
when opened from a filesystem.
So this is worth investigating.
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?
y try to create a simple web with angular
Project asp.net mvc 5
i have this js
var app = angular.module("app", ["ngRoute"])
.config(function ($routeProvider, $locationProvider) {
$routeProvider.when('/', {
templateUrl: '/AngularJS/Templates/inicio.html',
controller: 'bienvenidoController'
});
$locationProvider.html5Mode(true);
});
and this:
app.controller("bienvenidoController", function ($scope) {
});
view:
Layout:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
</head>
<body ng-app="app">
#RenderBody()
<!--Librerias Angular-->
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/angular-route.min.js"></script>
<!---Librerias App-->
<script src="~/AngularJS/RegistrationModule.js"></script>
<script src="~/AngularJS/bienvenidoController.js"></script>
</body>
</html>
index:
<div ng-view>
</div>
and:
<h1>Hola Mundo!</h1>
error:
Error: [$location:nobase]
error see in firebug mozilla
As stated on the AngularJs documentation
If you configure $location to use html5Mode (history.pushState), you need to specify the base URL for the application with a tag or configure $locationProvider to not require a base tag by passing a definition object with requireBase:false to $locationProvider.html5Mode()
https://docs.angularjs.org/error/$location/nobase
You are missing the <base href="/"> in your document or you can disable the check by setting
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
Just add <base href="/"> in the <head> section of HTML document and that's it.
<head>
<base href="/">
...
</head>
https://docs.angularjs.org/error/$location/nobase
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>
I am using angularjs and I want to create a simple registration page.
I have used a link, so that when clicking on a link, the user should redirect to registration page.
I have got my index.html page like:
<!DOCTYPE html>
<html>
<head lang="en" np-app="login">
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
<title>Test</title>
</head>
<body>
link
</body>
</html>
and app.js like:
angular.module('login', [])
.config(function ($routeProvider,$locationProvider) {
$routeProvider.when('/register',
{
templateUrl: 'partials/register',
controller: RegisterCtrl
});
$routeProvider.when('/private',
{
templateUrl: 'partials/private',
controller: PrivateCtrl
});
$routeProvider.when('/admin',
{
templateUrl: 'partials/admin',
controller: AdminCtrl
});
});
when I click on 'link' hyperlink, it is not redirecting to register page.
My register page is something like:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Register</title>
</head>
<body>
<input type="text"/>
</body>
</html>
If should work if you add target="_self" to the link. This bypasses angular routing mechanism.
See this thread.
try to
templateUrl: 'partials/register.html',
controller: RegisterCtrl
Add .html to your templateUrl