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.
Related
Can I have some constant part of the page in AngularJS, like logo, side menu, breadcrumb?
The question is how to have any part constant and navigate only content part?
Is the only way is to include html fragments?
<html>
<head>
</head>
<body ng-app="">
<div>
<p>CONSTANT PART</p>
</div>
<div ui-view>
content use ui router for changing content configure routes in app.js
</div>
</body>
</html
use ui-router the content in ui-view changes according to the state
https://github.com/angular-ui/ui-router
Angular Route Segment
bower install angular-route-segment
The library provides two pieces of code: $routeSegment service and app-view-segment directive. Both are placed in their own modules which you must include as dependencies in your app module:
var app = angular.module('app', ['ngRoute', 'route-segment', 'view-segment']);
$routeSegmentProvider.segment('s1', {
templateUrl: 'templates/section1.html',
controller: MainCtrl});
$routeSegmentProvider.within('s1').segment('home', {
templateUrl: 'templates/section1/home.html'});
$routeSegmentProvider.within('s1').segment('itemInfo', {
templateUrl: 'templates/section1/item.html',
controller: Section1ItemCtrl,
dependencies: ['id']});
$routeSegmentProvider.within('s1').within('itemInfo').segment('overview', {
templateUrl: 'templates/section1/item/overview.html'});
Then, any app-view-segment tags (which are similar to built-in ng-view) in the DOM will be populated with the corresponding route segment item. You must provide a segment index as an argument to this directive to make it aware about which segment level in the tree it should be linked to.
index.html:
<ul>
<li ng-class="{active: $routeSegment.startsWith('s1')}">
Section 1
</li>
<li ng-class="{active: $routeSegment.startsWith('s2')}">
Section 2
</li>
</ul>
<div id="contents" app-view-segment="0"></div>
Where ul code is static and will be displayed on every page
I am brand new to AngularJs and after following some tutorials I decided to try to implement a one page app into one of my projects. I have it working but I had one question about this code. Could I change what is shown on the first page before they navigate to anything? I don't want it shown on every page just when they first land on it before clicking any links.
var app=angular.module('single-page-app',['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/',{
templateUrl: 'home.html'
})
.when('/about',{
templateUrl: 'about.html'
});
});
app.controller('cfgController',function($scope){
/*
Here you can handle controller for specific route as well.
*/
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="single-page-app">
<div ng-controller="cfgController">
<div>
<nav>
<ul>
<li>Home</li>
<li>About us</li>
</ul>
</nav>
</div>
<br/>
<div ng-view>
<!--
This DIV loads templates depending upon route.
-->
</div>
</div>
</body>
The pages load fine and if I try to add something to the index.html under ng-view it doesn't show up on the page.
You want to put the content to show up when a user first hits your site under in your "home.html" page which is linked to your "/" route for "ng-view". When a user clicks a link, they will be taken to a new route, and the code/ will be replaced by the route they selected.
Having this route in Laravel:
Route::get('post/{id}/comments','PostCommentsController#showComments');
I'am trying to access it from an anchor html tag href attribute in a php view which works with angular to render a list of items. This is a piece of code from this view (_post_content.php):
<ul class="media-list" >
<li class="media" ng-repeat="item in items" >
<div class="media-body">
<div class="row">
<div class="col-sm-9"><h5 class="media-heading">
{{ item.title }} </h5></div>
</div>
</div>
</li>
</ul>
The new view made by the controller PostCommentsController in the method showComments, is similar to _post_content.php but it shows comments by a post id (item.id in ng-repeat).
However, for other links all over the application, even in its main layout: navbars and logo anchors, image anchors, etc; its url's are prepended by the path /post/4/comments.
For example if i click in the item 4 of _post_content.php, a link called blog in the left nav bar in the main layout, shows this as url: /post/4/comments/blog
Of course this route does not exists and breaks all the application.
Please, any clue to solve this strange behavior? Is it possible angular is causing it, though i'm not using angular routes?
Thanks for your help.
If you are using relative paths for your other links, you should prepend them with a forward slash, so instead of:
<a href="blog">
your should have:
<a href="/blog">
That way the links will be relative to the root not to the current path (which in your case is /post/id/comments).
As an alternative you could also use the base meta tag, by including this in your pages' <head>:
<base href="http://yourdomain.com/">
But be aware that there are some side effects to using base which might affect your application. Read this for more info: Is it recommended to use the <base> html tag?.
I'm working on a website that allows you to search for different products, for example laptops. This is my index div:
<div class="content" id="main">
<div id="search-wrap">
<div id="logo"><h1>seach</h1></div>
<form id="search">
<input type="text" placeholder="Search " autofocus ng-model="query"/>
</form>
<div style="border: solid 1px blue" ng-show="query">
<ul ng-repeat="x in [] | range:10">
{{ query }}
</ul>
</div>
</div>
I have not yet implemented angular js on this but I'm thinking about how to do it. I'm not sure how to approach this, since its a complex site. Once a user searches for something, they will get results from a product. Will i have to create a different ng-view?
I'm just going by something i read online:
A page gets one ng-view. Assuming you have a single page application, this means you get one view. Use it wisely. Give some thought to what should be in the view. Is this your main content window or is this more of a navigation? Is the actual content (HTML) of this section highly dynamic? These are important decisions to make early in the development of your application if you have more than one distinct content area on your page.
Sorry if my question doesn't make sense, just not sure what to ask. Any tips will help.
thanks
You better try using ng-view and you would get more idea how it works.
There can be one ng-view in a page and it is tightly integrated with the url. When you change urls in browser, effective you are loading a different view into the ng-view area. These are configured using the $routeProvider.
ng-view is like the central content theme\area. Other views including sub-views for the main view and left nav, top nav footer is loaded using ng-include directive which has capability to compile and load any html chunk from server or locally.
For complex routing needs please have a look at ui-router which supports nested views.
For complex view you can try something like this
$stateProvider
.state('login', {
url: '/login',
controller: 'LoginController',
templateUrl: 'login.tpl.html',
access: 0
})
.state('multiple view', {
url: '/main',
access: 1,
views: {
'#': {
templateUrl: 'view1.tpl.html',
controller: 'view1Controller'
},
'page#dashboard': {
templateUrl: 'page.tpl.html',
controller: 'pageController'
}
}
})
More Info
i have angular behaviour outside a ng-view. how can i get open a new page
where that view is then located in?
<div ng-controller="JobCtrl">
<input type="hidden" ng-model="produktion" value="produktion">
<ul>
<li ng-repeat="job in jobs | filter:produktion">
{{job.name}} (Hamburg)
</li>
</ul>
</div>
Onclick i would like to get the details rendered on a complete different page in my webapp.
how can i achieve this?
here is my url mapping for now:
when('/jobs/:jobId', {templateUrl: 'partials/job-detail', controller: JobDetailCtrl}).
if you need more code, pls let me know
Although I don't think I completely understand your requirement, but You need to add another route and in the new route's template use can you the behavior....
I am not sure if this answers you question. If not, put up the code on jslint or plunker etc