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>
Related
Hi All,
I am using React.js for some UI components in Asp.net MVC CMS (Orchard) where I want to render a react component on a cshtml page multiple times (depends on user) with dynamic ids. E.g. I am generating a GUID on cshtml page and creating a div by appending GUID in div's id on this page. As this page/view will act like a partial view and can be added number of times from Admin panel to a single page by the Admin.
index.cshtml:
var id = Guid.NewGuid().ToString().HtmlClassify();
<div class="container clearfix htmlcontent" id="modelCodeLookupContainer_#id">
index.tsx:
//and render it with something like below:
ReactDOM.render(
<ModelCodeLookUpReact />,
document.getElementById('modelCodeLookupContainer_' + id)
);
Please advise.
My app component (an Angular 2 component, downgraded for index.html) contains this:
<router-outlet></router-outlet>
<div ng-view></div>
This is just like it says to do in "Dividing routes between Angular and AngularJS"
https://angular.io/docs/ts/latest/guide/upgrade.html#!#adding-the-angular-router-and-bootstrap
But the ng-view isn't picking up any AngularJS routes.
How would ng-view work in an Angular 2 template anyway? How am I supposed to be able to use both types of routers at the same time?
<router-outlet></router-outlet> isn't working either -- this html just shows up on the page statically as-is.
I have <base href="/"> and the javascript console has no errors in it.
Google, message me :) who/ajxtaylor
This has gotten me closer in the right direction but it's still not working.
<router-outlet> wasn't working because I was missing the top level app component in the bootstrap array:
#NgModule({
bootstrap: [
AppComponent,
],
})
export class AppModule {
ngDoBootstrap() {}
}
https://angular.io/docs/ts/latest/guide/upgrade.html#!#dividing-routes-between-angular-and-angularjs
Submitted GitHub issue regarding lack of error message: https://github.com/angular/angular/issues/14572
I don't know if the Angular AppComponent is supposed to have downgradeComponent called on it and if so, whether the index.html should use the AngularJS selector or the Angular selector.
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');
};
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.
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).