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.
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>
I have a single page angular application and this is my index.html file:
<html ng-app="myApp">
...
<div id="bash">...</div>
...
<div id="menu">...</div>
...
<div ng-view></div>
...
</html>
Then I have a home controller with its template and an about us controller with its own template as well. And I want their templates to come up in the ng-view which is happening already but I want the #bash to only come up when the url ends with /home and hide when the url ends with anything else.
I can't do that through the home controller because it's outside the ng-view
and I can't do this through a normal JS file as well because the application loads once.
I can go through each controller and have a js function that changes #bash's css and turns display into false but I'd rather just have a condition in one place and I'm sure it's doable. Any ideas?
Why couldn't you do that from the home controller?
<div id="bash" ng-show="bashShown()">...</div>
...
$scope.bashShown = function() {
return $location.path().endsWith('/home');
};
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).
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
After answer on my question I have searched a lot of time and now don't know how to fix this problem:
How to return partials from Spring controllers (not whole page) for further integration with ngRoute. Main question was linked above.
PS: Template engine: Thymeleaf
If you are using Angular and thymeleaf, for avoid the render of the page what you can do is using directives like this:
app.directive("show", function() {
return {
restrict: 'E',
scope: {
resolved: '=resolved'
},
templateUrl: '/detail.html'
};
});
the html of the directive should start with something like:
<div ng-if="resolved">
<div class="col-md-10" ng-if="deviceDetail">
</div>
</div>
and in your template you can you the tag: <show resolved="resolved" ng-cloak=""></show>
Answer to the question:
In Thymeleaf+angular you dont work with different pages. You have one page and render part inside of it. So as you said pages 1, 2, 3.html and menu.
What I would do is have menu as a template of your page and then pages 1 to 3 are including depend of what are you doing on it.
Condition 1: If the information is coming from server or spring you do it on thymeleaf.
Condition 2: if you need to process information or interaction with the user used angular.
The code that I put you up there was for include pages as condition 2. If you need for condition 1 it is even easyer:
In your page:
<div layout:include="blah :: blah">Section that show</div>
New page (call blah.html) in the same folder as your page:
<!DOCTYPE html>
<html>
<body>
<div layout:blah="blah">
here code...
</div>
</body>
</html>