I don't understand this. In my local I am trying to develop a website. In that website links are working in app but when I try to F5 or copy that link and paste it to browser I am getting 404 Page Not Found error. I google it and found that this related to parsing URLs but cant figure out how to do this. Here is my code:
Javascript
.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('baba', {
url: "/",
templateUrl: "baba.html"
})
.state('icerik', {
url: "/icerik/:ad",
templateUrl: "icerik.html",
controller: "mmgCtrl",
})
.state('oku', {
url: "/oku/:serix/:klasor",
templateUrl: "oku.html",
controller: "nbgCtrl"
})
$locationProvider.html5Mode(true);
$urlRouterProvider.otherwise('/');
.controller('indexCtrl', function($scope, $location) {
$scope.yonlen = $location.path();
})
I have two routes. /icerik and /oku. So I think I should do if statement to which url going to which scopes.
index.html
<div ng-repeat="manga in mangas">
<a ng-href="{{yonlen}}></a>
</div>
Under the hood, this uses pushState.
When you change the state of the page with JavaScript, you should change the URL to one which would cause the server to generate the page in that state.
That would mean that if the JavaScript failed for any reason, the content would still load correctly and that if someone followed a deep link, they would directly (and thus quickly) load the content they were actually concerned with.
For example:
The visitor arrives on the homepage
The server delivers the homepage (plus all the angular code)
They click the "blog" link
You load blog content and put it on the page (with JS)
You change the URL to /blog/ (still with JS) without loading a fresh page from the server
But then:
The visitor arrives on the blog
The server delivers the blog page (plus all the angular code)
You're doing the change the URL but but haven't done the put the right content at that URL bit. That requires server side work.
Related
Basically, when I navigate to http://localhost:9000 in my browser, I receive the content on the index.html page, but ng-view remains completely empty, despite '/' being pointed to my controller/view.
Upon first navigation, Angular does not add the /#/ to my url, and $location.path() reads an empty string. After clicking any link, the about page for example, Angular adds /#/about to my url and the page loads normally. If for any reason, however, the page gets reloaded (I hit reload or live-reload updates), the /#/about remains in the url, but ng-view is an empty element.
The config:
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl'
})
.otherwise({
redirectTo: '/'
});
})
I included ngRoute in the app and the script has been added to the index.
This app was working just fine before. I experimented with $locationProvider.html5Mode() a little and didn't like the results, so I did a hard reset to the git HEAD. After that, it has failed to work as intended on any machine, any browser.
I don't know what could be causing it or what else may be need to solve this. Open to try anything that works at this point.
EDIT: StackOverflow managed to remove a portion of my title. .-.
I think you should be able to call $location.path('/') in your app.run so that it navigates once angular loads up.
Figured it out after a ton of digging, other people, and trial/error.
If $scope.apply() is called to early, it can cancel the digestion that triggers on page load. Using $timeout over the method solved it.
I am using UI-Router for routes/states in my app and URLs were having "#" so to remove this , I used $locationProvider like -
function configState($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true);
Added ngRoute in module dependency and added <base href="/" > in my index.html.
Problem -
If I am using it as a normal app like in same tab and navigates to other state, it works BUT whenever I pasted the URL in another tab and hit enter its throwing Cannot GET /app_views/contacts URL is like - http://localhost:9000/app_views/contacts
Though with hash in URL it works in both way manner.
You are likely getting this error because your server is not configured correctly. In other words when you manually enter /app_views/contacts it will make a request to the server for that page. For this to work properly you need configure your server to route all traffic to your index.html page in order for Angular to properly take over and display the correct view.
Here is a related post Reloading the page gives wrong GET request with AngularJS HTML5 mode
I have AngularJS setup to use HTML5 routes and it works great on urls like website.com/foo but when I create routes for sub pages, eg: website.com/foo/bar it only shows the correct page when clicking a link to it on my site. If I type the url into my browser and attempt to directly access it I get a blank page section where the ng-view content should be loading.
app.when('/promotion/events', {
templateUrl: '/assets/tpl/promotion/events/home.html',
controller: PromotionEventsCtrl
});
It appears to be a bug in Angular 1.1.5 that is effecting URL parsing in HTML5 routes. Rolling back to 1.1.4 fixes the problem.
More information here: https://github.com/angular/angular.js/issues/2833
How does angular know to make a request for the template view that contains 'ng-view' element?
If I navigate in my application say directly to
http://localhost/Categories/List/accessories
. A request is still made to '/ or the index template' as this contains the 'ng-view' element needed to render all the views.
When I navigate from the index to /Categories/List/accessories no request is made for the index again.
Below is my basic routing which has been copied in part from the Angular MVC "CookBook" example on GitHub
angular.module('myApp', ['myApp.ctrl.list'])
.config(['$routeProvider', '$locationProvider', function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: '/Home/Splash',
});
$routeProvider.when('/Categories/List/:slug', {
templateUrl: '/Categories/List',
controller: 'listCtrl',
});
$routeProvider.otherwise({
redirectTo: '/'
});
}]);
With your routing configuration, I believe your example url is missing a pound sign (#), so it should look like:
http://localhost/#/Categories/List/accessories
The part after the # sign is the path intended to be resolved by AngularJS (ie. the routing configuration you have defined)
When you enter the above URL into the address bar of the browser, the browser automatically looks for index.html on localhost. Most browsers, if not all, are set to look for index.html when only the domain name is present in the URL.
What about the part after the # sign? You might ask. The path after the # sign does not get sent to the server, by definition, and thus the browser could care less of what that part is consisted of.
In the second scenario you mentioned, AngularJS does not request for index.html because it's been cached the first time it was loaded and that cached copy is used.
Is your locationProvider configured for HTML5?
$locationProvider.html5Mode(true);
See Using HTML5 pushstate on angular.js
I'm currently working with angularJS and I try to build a homepage. My routeconfig looks like this:
var app = angular.module('mml-annie', ['mmlServices']);
app.config(['$locationProvider', function($location) {
$location.html5Mode(true); //now there won't be a hashbang within URLs for browers that support HTML5 history
}]);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/team', {
templateUrl: 'partials/team',
controller: TeamCtrl
}).
otherwise({
redirectTo: '/home'
});
}]);
For testing purposes my controler looks like this:
function TeamCtrl($scope, Team) {
console.log("TEST");
}
Everything I working fine except when my path get additions / fields. When I change "/team" to "/team/team/test" my app calls the controller until the app crashes. Not using html5 mode fixes the problem. But I would rather use the nice HTML5 mode without the hashbang.
The app runs on node.js with express which serves the angular app for all requests except API calls.
Do you have any idea what is happening? I have no clue...
Of course I can provide further information if needed.
the solution is as follows:
My partials didn't have the relative path prefix "/". So whenever i tried to advance in a path the server looked for a partials that wasn't there, for example: /team/partials/team
Node then sent the basic layout which had itself the ng-view div again and started all over.
Why do I always fiddle around for like 2 hours - then decide to write a question and 2 minutes later I find the answer....