In my web app, when I go to one of my url, angularjs returns me haml template as a plain text.
But if I go to my root url it works fine. I use Rails 3.2.13, AngularJS 1.1.4, Haml for views.
This is my app/views/layouts/application.html.haml
!!! 5
%html{'ng-app' => 'myproject'}
%head
%title MyProject
= favicon_link_tag
= stylesheet_link_tag 'application'
= javascript_include_tag 'application'
= csrf_meta_tag
%body
.main-background
.app{'ng-view' => ''}
= yield
This is my app/assets/javascripts/main.js.coffee
#app = angular.module('myproject', [])
This is my app/assets/javascripts/routes.js.coffee
app.config ['$routeProvider', '$locationProvider', ($routeProvider, $locationProvider) ->
$routeProvider
.when '/',
templateUrl: '/assets/signin/index.haml',
controller: 'SignInController'
.when '/signup/:code',
templateUrl: '/assets/signup/index.haml',
controller: 'SignUpController',
]
I have 2 controllers in app/asssets/javascripts/controllers/ respectively. They both are emty.
I also use html5 push state, lik this(push_state.js.coffee)
app.config ($locationProvider) ->
$locationProvider.html5Mode true
And, I have views, in app/assets/templates, whith path, that I wrote in templateUrl.
My problem is, when I go to '/', angularjs render my view fine, but, when I go to the second url, it returns me a plain text in span tag, with haml template inside it. I tried to use only one when statement with the second template and it was the same result.
And, the question is what should I do to render my second view properly ?
I found a solution. It strange, but when I do some edit in my templates, and revert then back, after that all templates render properly. In both cases, before edit and after, templates have the same markup.
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.
Learning some Angular - and I'm stuck on routing
Here is my angular config
var meanApp = angular.module('carz', ['ngRoute']);
meanApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'home.html',
controller: 'mainCtrl'
})
.when('/red', {
templateUrl: 'red.html',
controller: 'redCtrl'
});
});
Here is are my links
Home
Red
When I load up my node app I am directed to
http://localhost:8080/#!/
And I get my angular controller working as expected within the ng-view tags
But I cannot switch from one controller to the other using the links above.
If I select the red tag my URL adds an extra # becoming
http://localhost:8080/#!/#red
Note if I manually change to
http://localhost:8080/#!/red
My controller changes and it works so why am I getting the extra #
Thanks for any help
Since AngularJS 1.6 there is a breaking change in routing:
The hash-prefix for $location hash-bang URLs has changed from the empty string "" to the bang "!".
(See https://github.com/angular/angular.js/blob/master/CHANGELOG.md)
Solution:
either start using #! Instead of #
OR set up $locationProvider to accept just using #, like this:
appModule.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);
So I am having an issue in setting up my angular routes.
Moving straight to the point, my angular routes defined don't hit my mvc controller and thus action methods.
The action method return partial views, which represent my templates.
Here is an image of my route configuration.
Here is an image of my controller actions.
I am sure I am missing something, but can't seem to figure out what.
This example helps you to understand better about $routeProvider and $locationProvider.
The only issue I see are relative links and templates not being properly loaded because of this.
from the docs regarding HTML5 mode
Be sure to check all relative links, images, scripts etc. You must either specify the url base in the head of your main html file () or you must use absolute urls (starting with /) everywhere because relative urls will be resolved to absolute urls using the initial absolute url of the document, which is often different from the root of the application.
In your case you can add a forward slash / in href attributes ($location.path does this automatically) and also to templateUrl when configuring routes. This avoids routes like example.com/tags/another and makes sure templates load properly.
Here's an example that works:
<div>
Home |
another |
tags/1
</div>
<div ng-view></div>
And
app.config(function($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/', {
templateUrl: '/partials/template1.html',
controller: 'ctrl1'
})
.when('/tags/:tagId', {
templateUrl: '/partials/template2.html',
controller: 'ctrl2'
})
.when('/another', {
templateUrl: '/partials/template1.html',
controller: 'ctrl1'
})
.otherwise({ redirectTo: '/' });
});
If using Chrome you will need to run this from a server.
Well what worked for me was to remove the setting for the $locationProvider.html5Mode. As someone mentioned in another stack overflow post, here MVC5 and Angular.js routing - URLs not matching using the locationProvider in MVC seems to screw up the routing. I am still to investigate why exactly this happens, as all I thought it did was remove the '#' in the url, but seems like there's more to it
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
I have the following routeProvider configured:
angular.module('myModule').config ['$routeProvider', (provider) ->
provider
.when '',
templateUrl: '/templates/dashboard.html'
.when '/some_path/:some_param',
templateUrl: '/templates/dashboard.html'
And the following in a wrapping statically served template:
I also have a templates/dashboard.html appropriately defined.
When I navigate to the url, the initial page loads, however a # is not postpended on the URL, which then results in errors when I try to rewrite the URL in a controller with $location.path('fooPath').
Specifically $location.path('fooPath'), changes the URL to current_dashboard_path/#/ and reloads, while what I was expecting is for the URL to be set to:
current_dashboard_path/#/, an then location('fooPath'), to change that to current_dashboard_path/#/fooPath
Some additional context: I want to use this so that I can then use the $location service to change the url without reloading the page thus
Question is, how can I force Angular to postpend a # when an ng-view is populated.
I was missing the following line in my routeProvider:
.when '/',
templateUrl: '/templates/dashboard.html'
Additionally, the blank route
.when '',
templateUrl: '/templates/dashboard.html'
Needed to be removed
Then the way to rewrite the URL without reloading the page is the following in the controller:
lastRoute = route.current
scope.$on('$locationChangeSuccess', (event)->
route.current = lastRoute
)