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?.
Related
I'm populating my index.html via angular, as per usual. I have an index that looks something like:
<body>
<nav ng-include="'app/partials/navbar.html'" ng-controller="NavBarController"></nav>
<main>
<section ui-view="donate"></section>
<section ng-include="'app/partials/about.html'"></section>
<section ui-view="stories"></section>
<section ng-include="'app/partials/contact.html'"></section>
</main>
<footer ng-include="'app/partials/footer.html'"/>
</body>
My nav, about, contact and <footer> all have static content, so I used ng-include. The donate and stories <section>s are dynamic, so I used ui-view.
The Question
Is there any advantage to using ui-view over ng-include where static content is concerned? The nav might be better with a ui-view I can reference the NavBarController in $stateProvider.state(), but what about the static partials?
ui-view is useful only when you want to leverage the feature of browser history. For e.g. If you have a HTML as below
<div class="searchbar">
<input type="text" ng-model="student.id">
<button type="button" ng-click="getStudent()">Get Student</button>
</div>
<div class="student-info">
<div class="student" ui-view="studentview"></div>
</div>
Having a ui-view here will make sense since we can pass different data (like student id etc) as parameter to the same template and display different content. Also the browser history will help us navigate between different students here.
For content like about or footer though which are mostly static I would recommend you to use ng-include as you are hardly getting anything extra out of router here.
For Contact it can depend on what it contains. If it is something which requires navigation (like one route for contact of each country's office) then go with ui-route otherwise stick with ng-include
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.
I am working through the CA angular course. I had a question about this code:
<div class="main">
<div class="container">
<h2>Recent Photos</h2>
<div class="row">
<div class="item col-md-4" ng-repeat="photo in photos">
<a href="#/photos/{{$index}}">
<img class="img-responsive" ng-src="{{ photo.url }}">
<p class="author">by {{ photo.author }}</p>
</a>
</div>
</div>
</div>
</div>
In the
So when I click the photo, angular knows what it's index is and the index gets relayed to the PhotoController as a routeParams right and you can access it via $routeParams.id. But what is the #?
The char # (also called hash) is used for navigation inside your app / your website and prevent the browser to refresh the current page.
If you look your url you will see a hash # followed by /photos/{{$index}}
How to deal with Hash in AngularJS ?
In AngularJS, you can use the $location service to manage url
The $location service parses the URL in the browser address bar (based on window.location) and makes the URL available to your application. Changes to the URL in the address bar are reflected into the $location service and changes to $location are reflected into the browser address bar.
https://docs.angularjs.org/guide/$location
# are used in something called hash navigation which are a separate section of a URL's elements. hash navigation is used by angular for interior hash routing rather than full page routing.
Not only in angualrjs but in every web project if we use some url followed by # that won't reload the page.
I hope you have noticed using <a href="#"> for dummy urls too.
I have a page where there are few tabs and I use angular+bootstrap.
I use angular.bootstrap initially.
Then I have another controller for showing different set of data in one of the tabs. when I try to use angular.bootstrap again, I get the error it cannot be bootstrapped twice. To make it simple, consider the following code.
<div id="mainpage" ng-controller="mainPageController">
<ul>
<li id="test1"> <a href="gototest1"> GoToTest1 </li>
<li id="test2"> <a href="gototest2"> GoToTest2 </li>
</ul>
</div>
<div id="gototest1">
this is some sample. I have another html page here which will be loaded as a tab
</div
The page for gototest1 looks like this
<div ng-controller="gototestcontroller>
Here comes the another widget from another controller and
I try to use angular.boostrap here again. And I get the error because it is already bootstrapped in mainPage
</div>
What is the best way to use angular.bootstrap here?
Angular bootstrap is used to manually initialize an Angular the document or an element.
https://docs.angularjs.org/guide/bootstrap
Angular cannot be initialized more than once on an element. Is there a reason you don't use automatic initialization, using ng-app?
It sounds like you could benefit from using the module ngRoute and applying the attirbute ng-view instead of trying to bootstrap twice.
https://docs.angularjs.org/api/ngRoute
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