When using html5mode(true) views are not loading on page refresh in angular.js
<base href="/">
<div ng-app="directives" >
Home
about
contact
<div ng-view></div>
</div>
in config
directives.config(["$routeProvider","$locationProvider",function($routeProvider,$locationProvider){
$routeProvider.when("/",{
templateUrl:"directives/home.html"
}).when("/home",{
templateUrl:"directives/about.html"
}).when("/about",{
templateUrl:"directives/contact.html"
}).when("/contact",{
templateUrl:"directives/about.html"
}).otherwise({
redirectTo : "/"
})
$locationProvider.html5Mode(true).hashPrefix("!")
}])
http://127.0.0.1:58552/about
not rendering the proper view.
That's one of the drawbacks of using html5Mode(true).
Basically you server can't find the resource as there is none under that URL. The address is controlled by Angular and at the point, Angular hasn't kicked in to control the pages and URLs and stuff.
The solution I found for this problem was to set up an URL rewrite (http://httpd.apache.org/docs/2.0/misc/rewriteguide.html) on my Apache server to clean up the URLs and remove the html5Mode(true).
Related
I'm new to AngularJS. In our project, we're forced to create our web app(multi-pages) in angularJS, though we know AngularJS is only for SPA.
At the moment I've a homepage, which is created in AngularJS and all other connected pages are in jQuery.
I've created a navBar in the Homepage, which needs to show up on all other pages as well.
But at the moment the navBAr data is not showing up in the other pages.
How could I do that?
How do I reuse my navCtrl in all the pages?
Please note that footer is still in jQuery, and will have to do the same with that as well.
This is how my homepage looks as of now:
<body ng-app="App">
<nav ng-controller="navCtrl"></nav>
<main ng-controller="mainCtrl"></main>
<footer></footer>
</body>
See image
=>Layout1 master page which include ng-view in that i used angular routing.
=>Layout2 login.cshml page when I tried to call login page
http://localhost:1395/admin/home/Login
this login page included in ng-view which i donot want
its total different page Login.cshtml
I called this page like
Log out
when I tried url directly in address bar like http://localhost:1395/admin/home/Login
it works fine see image
but i tried from master panel to login page it shows wrong see first image
example code
master.cshtml
<html>
<body>
<div>Layout 1</div>
<div ng-view></div>
</body>
</html>
contact.html
<div ng-controller="contactcontroller">
Contact Page
</div>
help.html
<div ng-controller="helpcontroller">
Help Page
</div>
routing code
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/admin/home/contact", {
templateUrl : "contact.html",
controller: "contactcontroller"
})
.when("/admin/home/help", {
templateUrl : "help.html",
controller: "helpcontroller"
})
});
Login.cshtml
<html>
<body>
<div>Layout 2</div>
///Login code
</body>
</html>
when I call this url admin/home/help and admin/home/contact pages included in ng-view but when I call admin/home/login i donot want this include in ng-view it is separate header and footer . I want call as separate page
Thanks in advance
It is hard to understand this, but I'll take a shot at answering the question.
Your problem is probably unrelated to angularjs, what it seems to me is, that you're probably using ASP.NET MVC and your Login action is rendered inside the master layout. Basically you need to render the page without the template. See this question and answers there: Razor View Without Layout
I will also point out that angular is used for single page applications and it is hard to mix angular and ASP.NET MVC routing. You should probably decide which routing you will use. Sure, you can use .NET and initialize angular in every page, but I don't recommend this. If you can, build all your pages in angular and then then use ASP.NET Web API as a back-end.
Also you don't need to use ng-controller attribute when you use routing and specify controller.
I have been following the AngularJS tutorials on CodeSchool.
So I have views/index.html which contains all of my boilerplate code that is identical for each page. Then my templates for each page are in views/templates/ which I want included in the index.html page. So when the home page loads, it loads the views/index.html and includes the views/templates/index.html.
views/
index.html
templates/
index.html
contact.html
about.html
Currently I have
<div id="menu">
<a id="menu_home" href="/#/index" ng-click="menu.set(0)" ng-class="{current:menu.isSet(0)}">Home</a>
<a id="menu_hire" href="/#/hire" ng-click="menu.set(1)" ng-class="{current:menu.isSet(1)}">For Hire</a>
<a id="menu_info" href="/#/info" ng-click="menu.set(2)" ng-class="{current:menu.isSet(2)}">Info</a>
</div>
<div id="main">
<ng-view></ng-view>
</div>
which works great. So only the required html is requested and inserted into the page.
But my problem is that the URL doesn't change in the browser. So if a user went directly to mysite.com/contact it wouldn't work. How can I load the page correctly if the mysite.com/contact or mysite.com/about pages are accessed directly?
I have also got it working using the ngRoute module, but the same issue remains when a user goes directly to a page.
Thanks.
You should use ngRoute and $routeProvider similar to the following.
var navigationRoutes = angular.module('navigationRoutes', ['ngRoute']);
/**
* Load routes for navigation using ngRoute
*/
navigationRoutes.config(function ($routeProvider) {
$routeProvider
.when('/index', {
templateUrl: 'app/components/index/index.view.html',
controller: 'IndexCtrl'
})
.when('/contact', {
templateUrl: 'app/components/contact/contact.view.html',
controller: 'ContactCtrl'
})
.otherwise({
redirectTo: '/dashboard'
});
});
This way you can also specify a different controller based on the URL.
UPDATE
In your index page if you add -
<div class="view">
<div ng-view></div>
</div>
To your main index.html page the the contents of the $routeProvider selected file will be shown within this div. You just need to make sure that you add the tag for the controller.js files in the index.html page.
You will need to make these settings in the web server to redirect all urls to your index page where you load your angular app which in turn will handles the routes
I am trying to port a web app to mobile using Cordova PhoneGap. It works more or less as expected, except for the ngView directive.
[OLD PROBLEM]
When I change page, the new page overlays on the old one, mixing their elements. I solved this with an asynchronous bootstrap of Angular, after the deviceReady event.
[UNSOLVED PROBLEM]
I can see on Xcode also a huge use of memory during run-time. At the home page I see about 90MB of use. If I go to the user page (much more heavy), memory consumption is about 200MB. If I come back to the home page, memory increases instead of coming back to 90MB.
I noticed that when I open a new page, its controller is initialized multiple times generating the $digest loop error. In fact when I go to the home page, the log writes 'PAGE OPENED!!' 10 times
I don't have pending setTimeout or setInterval.
I guess that when a scope is destroyed, also its controller does.
This is how I use ngview:
index.html
<body ng-cloak class="ng-cloak" style="overflow-y: auto;">
<div ng-view></div>
...
</body>
app.modules.js
angular.module('myApp', [...])
.config(function($routeProvider){
$routeProvider
.when('/home',{
templateUrl: 'app/home.html',
})
.when('/user',{
templateUrl: 'app/user/profile.html',
});
})
home.html
<div id='home_page' ng-controller="homePageController as ctrl"
ng-style="{'background-image':'url('+{{ctrl.image}}+')'}">
<div>
this is the home page
</div>
</div>
homePageController.js
.controller('homePageController', [function($scope)
{
self.image="/img/img.png";
console.log('PAGE OPENED!!');
this.pageClosed = function()
{ $scope.$destroy(); }
}]);
It works well on the browser, I can't understand why I can't smoothly change pages in the app.
Thank you
I'm using AngularJS with ui-router and I have a problem with nested views while using Html5Mode. This problem only happens with html5, if I'm not using it, everything works fine. I tried to work with base <base href="/"> but didn't work as well.
Also, the problem only happens within nested views, on the main ui-view it's ok.
This is the code I'm using:
index.html
<div>
<ul>
<li ui-sref="menu">Menu</li>
<li ui-sref="user">User</li>
<li ui-sref="contact">Contact</li>
</ul>
<div ui-view autoscroll="false"></div>
</div>
child template.html
<div class="container">
<div>
<ul>
<li ui-sref="user.data">My Info</li>
<li ui-sref="user.order">My Order</li>
<li ui-sref="user.budget">My Budget</li>
</ul>
</div>
<div ui-view></div>
</div>
app.js
.state("user", {
url: "/User",
templateUrl: "content/user.html",
controller: "UserCtrl"
})
.state('user.data', {
url:"/MyData",
templateUrl: "content/user/user_data.html",
controller: 'UserCtrl'
})
If I use the html5 WITH `, i can navigate, but when i refresh the page, I get errors like this:
Resource interpreted as Stylesheet but transferred with MIME type text/html
And if I use WITHOUT <base href="/" /> then it doesn't work at all. But again, only for the child ui-view, the parent view is still working.
I haven't got such problem until now, so my knowledge is limiting, but i've heard a few things that can help you. As this ui.router tutorial says:
HTML5 Mode
The UI Router framework gives you ultimate control over the URLs
generated for your site by allowing you to enable HTML5 mode. When
enabled, this mode does not generate hash (#) locations, but uses the
HTML5 history API to generate clean URLs. The only caveat to this
approach is that you must build your application to work under each
generated path, rather than just at the root, which is customary in
most single-page applications.
I hope this helps! Cheers.