I have a few static html pages of content. I want to make an index page that has two div's One for a sidebar menu and one to hold content. When one of the menu links in the sidebar is clicked I want to load one of the other static html pages into the content div.
I just cant find any documentation that shows how to do this, so i'm not even sure if it's possible. Can anyone help?
You can also use ng-view to setup routes that will load your templates into your div. It's pretty straight forward, and there's a good example # https://docs.angularjs.org/api/ngRoute/directive/ngView
Use ng-include:
<ng-include
src="{string}"
[onload="{string}"]
[autoscroll="{string}"]>
</ng-include>
http://docs.angularjs.org/api/ng.directive:ngInclude
Related
How can I go to a different section of a page in react. Right now, I have separated different sections in folders but not sure how to make a button that clicks to a different section in react. Any suggestions or ideas?
You should be able to use anchor tags in react as you would in HTML.
using JSX, tag the place on the page you want to go to with an ID:
<h3 id="education">Education</h3>
Then where you want the link to be located, place an a tag using the # syntax:
Education
Clicking on the a tag should scroll the page to the education H3 tag.
In my index.html file I have the following code:
<body>
<div ui-view></div>
<div ng-include="footer.html"></div>
</body>
The problem is that the footer is displayed before the dynamic content related to the active state is loaded and rendered.
I tried to use the event $viewContentLoaded but this event is fired when the view content has been loaded not when it has been compiled.
I used ng-include in index.html because my footer is generic and should be used in all the app pages.
How to solve this problem?
put your angular script includes in head not at the bottom of the page.
ui-view means nothing until angular is loaded.
you might also want to use a sticky footer to prevent any issue with the footer jumping about.
stick footy for bootstrap is here ...
https://getbootstrap.com/examples/sticky-footer/
Instead of assigning url to ng-include you can bind scope variable and that scope variable value can be changed with actual URL from the directive which was reused in all your views using two way binding '='
I need to figure out how I can have different views(html+css) for a component. A lot of people say that it's better to have multiple components for each for each of those views and then use a service to interact but my case is as follow:
I have a controller with a view that is basically a layout. Say my layout has 3 panes on top and one pane in the bottom. Now I have button in my view to change the layout to two panes on top and two panes on the bottom. So basically my data does not change. Its just a change in the html and css.
also if the first layout is filled with some data I dont want to change it or reinitialize it when changing the layout since the change is only a change on layout not the data.
I have difficulty figuring out how I can achieve this in angular2. Any ideas?
so you want to add html and css or just change the actual template?
If you just want to change the actual html , i personally suggest that you use states instead of different views. And based on the states move the html around. I had the same issue myself and i solved it by rethinking the layout and ended in finding a simpler layout structure.
Hope this helps.
Enjoy coding.
You can have two views in one template and switch between them by setting a flat:
<div *ngIf="firstLayout">
<!-- first layout -->
</div>
<div *ngIf="!firstLayout">
<!-- first layout -->
</div>
I have an index that serves a static header menu, and below that an ng-view that based on route, selects the right template. Like this for example:
<navbar>
...
</navbar>
<div ng-view>
</div>
Everything is good so far, when a specific route is hit, a template is loaded in that container with the associated controller.
Now, I have another page that is loaded inside ng-view, and it's fired when url "/dashboard" is hit. The problem is that the dashboard page, has a sidebar menu that also needs to contain some routing logic (more or less). When a link has been clicked from the sidebar menu, I have to load only the left hand side of the page (not the whole ng-view container).
I have identified two solutions:
1) Create a directive that stores that sidebar menu, and inject it in all of the pages that are handled by the sidebar menu ==> routing is still handled by ng-view.
2) Use ng-include and have some routing logic in the dashboard page like this:
<a ng-click="templateType = 1">Template 1</a>
<a ng-click="templateType = 2">Template 1</a>
<div ng-if="templateType === 1" ng-include="template1"
ng-controller="Template1Controller"></div>
<div ng-if="templateType === 2" ng-include="template2"
ng-controller="Template2Controller"></div>
Is there another approach? Or what is the best practice in handling both a sidebar that handles some routes, and a static menu that handles another routes, with the mention that the sidebar menu is only available on some of the routes.
I have provided a paint drawing, in the hope that I can explain my problem better.
You can use UI-Router and give a shot at nested views. Here is a really good tutorial. I think what you're trying to achieve is mentioned at the end of the tutorial.
As all others have suggested you need to go for UI-router and nested views. It is great way to set up your page layout.
You can find the answer in
Angular UI-Router How to create a "layout" state?
When creating, for example, dropdown menus I use the # sign on the link that toggles the dropdown. It works just fine with just for that and many other things where I need a link just to do something and stay on the same page.
Now I'm using angular and the problem I face is that when I use this sign on a link it thinks I'm referencing the route for / so that the app goes to the first screen.
How can I deal with this?
As far as I know another "ugly" workaround is to put href="javascript:;" to avoid the unintended navigation.
Or remove the href altogether but then when you mouseover you have no pointer. you need to add this to your CSS as described on UI Bootstrap page.
From: http://angular-ui.github.io/bootstrap/
Original Bootstrap's CSS depends on empty href attributes to style
cursors for several components (pagination, tabs etc.). But in
AngularJS adding empty href attributes to link tags will cause
unwanted route changes. This is why we need to remove empty href
attributes from directive templates and as a result styling is not
applied correctly. The remedy is simple, just add the following
styling to your application:
.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }