I'm using Angular on Django with Apache. And I have an app like the following:
(function(){
'use strict';
angular
// AngularJS modules define applications
.module('app', ['ngRoute'])
.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "/static/app/foo/templates/main.html"
})
.when("/red", {
templateUrl : "/static/app/foo/templates/red.html"
});
});
function foo() { }
})();
I'm serving my site on: http://localhost/ok/
When I make a GET to http://localhost/ok/ or to http://localhost/ok, all it's fine and the URL is transformed respectively to http://localhost/ok/#!/ or to http://localhost/ok#!/.
In main.html I have a link to the red "anchor" Go to Red. It points to http://localhost/ok/#red but when I click it, red.html is not returned, and I read in the address bar http://localhost/ok/#!/#red or http://localhost/ok#!/#red (depending on the URL pattern of the first call).
I do not understand where the problem is. How can I fix?
Try this:
Go to Red
Related
I have
<base href="/!#/">
at the top of my index.html file. When I go to URL http://localhost:5000/ everything works fine, it instantly add #!/ so the URL is http://localhost:5000/#!/ and page display as expected.
At the server side I have following code which should allow me to use my files
app.use(express.static(path.join(__dirname, 'public')));
Structure of my files is something like:
bookApp(folder)
server.js
public(folder)
index.html
app.js(ngRoute)
views(folder)
css(folder)
controllers(folder)
and my AngularJS routing is:
(function () {
'use strict';
angular
.module('app', [
'ngRoute'
])
.config(config);
function config ($routeProvider) {
$routeProvider
.when('/', {
controller: 'PostsCtrl',
templateUrl: 'views/posts.html'
})
.when('/register', {
controller: 'registerCtrl',
templateUrl: 'views/register.html'
})
.when('/login', {
controller: 'loginCtrl',
templateUrl: 'views/login.html'
})
.otherwise('/');
}
})();
The very first page (views/posts.html) load as expected but when I click
<li>Sign in</li>
the URL is http://localhost:5000/login not as like I thought http://localhost:5000/!#/login.
and it display:
Cannot GET /login
when I manually change URL to http://localhost:5000/#!/login it works fine.
How to fix this behavior?
The only solution I see is to get rid of <base> tag and in every link manually in href directive add !# before slash.
It looks like you are forgetting the ng-view directive: <div ng-view></div> which is the container for the content that is provided by your routing. Place this above your script if you have everything contained in one file.
You can also try:
<ng-view></ng-view>
<div class="ng-view"></div>
Is there any particular reason you are still using Angular 1? I know this isn't technically answering your question, but I would highly recommend that you start using the latest Angular. You can still keep legacy code but it will make a lot of what you are doing a lot cleaner and clear.
I build a small app with angular an added the routeProvider to change my ContentView. The Switching betwenn my different htmls works and i can use cars and functions in my html.
var app = angular.module("mainApp", ['ngRoute']);
angular.module("mainApp").config(
[ '$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider.when("/", {
templateUrl : './page1.html',
controller : 'con1'
}).when("/stuff", {
templateUrl : './page2.html',
controller : 'con2'
}).when("/404", {
templateUrl : "./errorPage.html"
})
// else 404
.otherwise({
redirectTo : "/404"
});
} ]);
I added the Functions:
this.$onInit = function() {console.log("test"); };
Do Stuff when my controller is in the Init Mode. (Note: I added this pattern in a other project as well but in this newly project it wont load this.$onInit)
I'm Using Angular 1.6.1 as Webjar and .
Any Ideas why it wont work?
Life-cycle hooks were introduced for directive/component controllers.
They will not fire for the controllers used in $routeProvider mappings.
You can take a look at this jsfiddle and see the output in the console.
Sorry for not writing answer sooner. Yes you guys where right that the lifecyle wont call init if the routingProvider calls the Controller.
I solved it by manuelle triggering the init. I done that by adding the controller to the main body (container) with data-ng-controller="myController"
This calls init on pageload. Kind of hacky but it works great.
I don't understand why I can't get this to work.
I'll share the relevant code, let me know if you need to see more stuff.
Index.html
<div class="col-md-3">Liberals</div>
app.js
var app = angular.module('myApp', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider.
when("/liberals", {
templateUrl: "partials/liberals.html"
, controller: "LiberalsController"
});
});
app.controller('LiberalsController', function ($scope, $http) {
var url = "workingURL"; /// changed function to a simple string message to test
$scope.message = "Hello Liberals";
});
(partial view) liberals.html
<h1>Hello</h1>
{{message}}
PS: I'm not working on a political hate website for or against liberals!
As of AngularJS 1.6, the default value of the hashPrefix has been changed to !.
There's two ways to get your routing to work with AngularJS 1.6+:
Add the hashprefix (!) to your href's:
Liberals
Change (remove) the hashPrefix value using $locationProvider:
$locationProvider.hashPrefix('');
I've created a working plunkr in which I used the second approach:
https://plnkr.co/edit/oTB6OMNNe8kF5Drl75Wn?p=preview
The commit regarding this breaking change can be found here
Well, this is giving this angular newbie some gray hairs:
My regular isotope external javascript initialization begins like normal :
$(document).ready(function() {
// ISOTOPE INITIALISATON AND STUFF HERE
And that all works fine with no angular. Now since my isotope items is in a separate portfolio.html page which loads into my main index.html page which contains an ng-view div, isotope sometimes fails to initialize.
It's around fifty fifty: If I refresh isotope works, then it doesn't. So this is due to that angular is not ready renderinng the DOM. And so even though I am waiting for document ready (and tried document load), that does not work either.
Is there a simple way that I can create my isotope AFTER that my index.html page loaded my portfolio.html page in (where my portfolio contains my isotope divs), with Angular?
Please note I am not using angular-isotope but just the regular metafizzy isotope and angular.
A simple as possible solution would be great:
Somehow I must create my isotope after that the Angular is done. But how do I call a method in my main.js file(which is the file where I initialize my Isotope) from my Script.js file (which is the file with my Angular script)
If it is any help this is my angular script:
// script.js
// create the module and name it scotchApp
// also include ngRoute for all our routing needs
var scotchApp = angular.module('scotchApp', ['ngRoute']);
// configure our routes
scotchApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl : 'pages/contact.html',
controller : 'contactController'
});
});
// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
scotchApp.controller('aboutController', function($scope) {
$scope.message = 'Look! I am an about page.';
});
scotchApp.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
Hmmm.hmmmm. I think it is time for a cup of tea. Hmm. hmm
Look forward to your replies!
I solved it myself.
I simply added this line to my isotope javascript file
$(window).load(function() { window.setTimeout(onRenderReadyStartIsotope, 0) });
And the intialised isotope with that timedout function call. Was no need for me this time to look into directives or change the angular, the DOM now renders, the isotope begins.
I have to build an app for an existing website, but unfortunately the website (outside of my control) detects the user device and redirects to a mobile version.
I am trying to reuse the same js file but different html files.
So I have:
index.html for desktop
mobile.html for mobile
both call init.js where I want to handle my logic, my problem is that for some reason the routing is not working as I expected and I cannot figure out why.
Desktop:
I go to example.com
get redirect to example.com/#/steps/age/0
Refresh the page and it stays in example.com/#/steps/age/0
This works as expected
Mobile:
I go to example.com/mobile.html
get redirect to example.com/mobile.html#/steps/age/0
Refresh the page and instead of staying in the same url, it goes to example.com/steps/age/0#/steps/age/0
This does not work as expected (expected to stay in the same url once refreshing as in the step number 2)
Code below:
angular
.module('profileToolApp', ["ngRoute", "ngResource", "ngSanitize"])
.config(function($routeProvider, $locationProvider){
$routeProvider
.when('/steps/:steps*', {
templateUrl : 'profile-app.html',
controller : 'example'
})
.otherwise({
redirectTo: '/steps/age/0'
});
})
.controller('example', function($scope, $routeParams, $resource, $location){
console.log("example controller");
});
Can anyone please advise?
Thanks.
Angular is examining the entire path to see where it should route to. So when you have example.com/mobile.html#/steps/age/0 There is no matching route, so it substitutes the route for you, in place of mobile.html so you get /steps/age/0#/steps/age/0 from your otherwise. The fundamental problem is that angular has no sense of what mobile.html means, and takes it as a parameter.
One solution is to use routes to separate your pages.
$routeProvider
.when('/', {
templateUrl : 'desktop.html', //was 'index.html pre edit
controller : 'example'
})
.when('/mobile/', {
templateUrl : 'mobile.html',
controller : 'example'
})
.when('/steps/:steps*', {
templateUrl : 'profile-app.html',
controller : 'example'
})
.when('/mobile/steps/:steps*', {
templateUrl : 'mobile-profile-app.html',
controller : 'example'
})
.otherwise({
redirectTo: '/'
});
})
Controllers may vary as needed.
Alternatives to this are to have mobile.html use its own angular App and routing, which may be beneficial since you won't run into desktop directives leaking into mobile. You can inject all of your directives and controllers into it, but still have a nice separation of index and mobile. You can take that a step further and have a redirect to m.example.com, but that's a different topic.
EDIT I made a mistake. Having templateUrl be index.html is a bit wrong. index.html should contain your ng-app and your ng-view directives, possibly a controller. Any common html should reside there. desktop.html and mobile.html should contain the specific HTML for those platforms.
As an afterthought, Within those you could have a directive called profile that does all of your profile work, and with a bit of ng-switch you can have that appear if steps is defined in the scope, and use:
$routeProvider
.when('/steps?/:steps?', {
templateUrl : 'desktop.html', //was 'index.html pre edit
controller : 'example'
})
.when('/mobile/steps?/:steps?', {
templateUrl : 'mobile.html',
controller : 'example'
})
But now I'm rambling, I'm not 100% sure that will work tbh. END EDIT