iam working on angulatjs uirouter.The code contains 2 states say home and new and when i click on any of these links the state & url changess.But the problem is the template corresponding to those state is not loading.
here is my code
var app=angular.module("myApp",['restangular','ui.router']);
app.config(['RestangularProvider',function(RestangularProvider){
RestangularProvider.setBaseUrl('http://localhost:9999')
}])
app.config(['$stateProvider',function($stateProvider){
$stateProvider.
state('home',{
url:'/home',
templateUrl:'/view/home.html'
})
.state('next',{
url:'new',
templateUrl:'/view/new.html'
})
}])
html
<a ui-sref='home'>
home
</a>
<a ui-sref='next'>
new
</a>
i don't know what the problem is? can anyone help me?..
It seems that you missed the ui-view in order to let the template get plugged in
<a ui-sref='home'>
home
</a>
<a ui-sref='next'>
new
</a>
<div ui-view></div>
Related
I want to reload my current page with onclick function, for this how to get my current route name in blade file.
This is my code:
<li class="dropdown user user-menu" onclick="window.location='{{ Route::current() }}'" style="cursor: pointer;">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="livicon" data-name="refresh" data-loop="true" data-color="#42aaca"
data-hovercolor="#42aaca" data-size="28"></i>
</a>
</li>
What is the best way to get the current route?
I want to use it on function onclick.
With Below code you can know more about your current route.
$route = Route::current();
$name = Route::currentRouteName();
$action = Route::currentRouteAction();
Reference : Link
Hope it will help!
Best way to get current url in Laravel blade:
onclick="window.location='{{ Request::url() }}'"
You can reload current page like this:
onclick="window.location.reload()"
There is no need to set current route in blade it's possible with javascript abilities.
I am working on ionic framework. So I am confused with using ui-sref and href. For example for tabs we use ui-sref as we can have various states all linked to some main (base) url.
eg
.state('dashboard', {
url: "/dashboard",
templateUrl: 'templates/dashboard.html',
controller: 'dashboardCtrl'
})
.state('dashboard.active', {
url: '/active',
views: {
'active': {
templateUrl: 'templates/active.html',
controller: 'ActiveCtrl'
}
}
})
My dashboard page has tabs whish have various various states now if I want to move to a diffrent template from one of these states or templates (eg to active.html)
eg.
//active.html
<li class="item">
<a class="button button-positive" ui-sref="dashboard.editClaim"> Edit Claim
</a>
</li>
or
<li class="item">
<a class="button button-positive" href="#/dashboard/editClaim"> Edit Claim
</a>
</li>
here should i use ui-sref or href.
Also editclaim template has tabs should i use ui-sref there and will it work fine because currently that is the problem.
So I am wondering if I have to maintain some state till there. Thank you.
here should i use ui-sref or href.
From docs: https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref
A directive that binds a link ( tag) to a state. If the state has
an associated URL, the directive will automatically generate & update
the href attribute via the $state.href() method. Clicking the link
will trigger a state transition with optional parameters. Also
middle-clicking, right-clicking, and ctrl-clicking on the link will be
handled natively by the browser.
<a ui-sref="home">Home</a> is converted to:
Home
Use ui-sref if you decided to use ui-router. This is a best practice. You can change in your code associated URL for the same state and you don't need to maintain your links.
Developers rarely use href for example in big lists for better performance to avoid additional watchers, but hope its not your case
<a class="button button-positive" ui-sref="dashboard.editClaim"> Edit Claim
</a>
is going to get convert in:
<a class="button button-positive" href="#/dashboard/editClaim"> Edit Claim
</a>
in your browser since ui-sref is just a simple directive provided by angular. For more info:
https://scotch.io/tutorials/3-simple-tips-for-using-ui-router
What's next? You should use ui-sref when using ui-router
I am trying to yield a piece of html into the navbar of a particular route in Angular 2. So this is not a part of the body component but is a part of the layout in the header of the page. How di i do this in angular 2?
This is what I did in AngularJS.
//header.html .. which is a partial within the layout
<div class="nav-wrapper">
<ul class="nav navbar-nav" ui-view="navbar_options">
<li>
<a href="" trigger-resize="" ng-click="app.layout.isCollapsed = !app.layout.isCollapsed" class="hidden-xs"> <em class="fa fa-navicon"></em>
</a>
<a href="" ng-click="app.asideToggled = !app.asideToggled" class="visible-xs sidebar-toggle"> <em class="fa fa-navicon"></em>
</a>
</li>
</ul>
</div>
//routes.config.js
.state('app.xyz', {
url: '/jobs/:jobID',
views:{
'': {title: 'abc',
templateUrl: helper.basepath('path/xyz.html'),
controller: 'myController',
},
'navbar_options': {title: 'my_page',
templateUrl: helper.basepath('path/xyz_navbar.html'),
controller: 'myController'}
}
})
I want to achieve the same in Angular 2
If I understand you correctly, you are trying to display a component in the navbar based on a certain route, but the main body of the page is also going to be updated on the route change. If I were you, I would use a "Secondary Route". I believe they are also referred to as "Named Routes"
Normally, your web page would be something like this:
<div class="app-content">
<router-outlet></router-outlet>
</div>
This works great if you are updating only one portion of your web page. If you want to update more than one portion, you need to provide several routes and they are named. They look like this:
<router-outlet name="myroute"></router-outlet>
I am guessing you will want one of these named routers in your navbar and then you have to create a link which places data in the named route... That link would look something like this:
<button md-button [routerLink]="['/mainroute', {outlets: {'myroute': ['routnamehere']}}]">
Open Two Routes
</button>
I have an ng-repeat in my user.html code and when I click a button in this view, I want to render other html by an href that redirect to a new route.
The thing is, I want to keep the ng-repeat that were at user.html in this new view and in this new view (modalOfDonations.html), I want to do an ng-repeat by the array of donations.
I want to keep the same controller of user.html too
does anybody can help? I am really a beginner in angular
route
.when("/modalOfDonations", {
templateUrl: "modalOfDonations.html",
});
user.html
<div ng-repeat="ev in event">
<article>{{ev.description}}</article>
<a href="#!/modalOfDonations">
<button>How can i help?</button>
</a>
<div ng-include src="'modalOfDonations.html'"></div>
</div>
modalOfDonations.html
<h4>Como posso contribuir?</h4>
<div ng-repeat="donations in ev.donateTypes">
<div>{{donations.name}}</div>
<div>{{donations.min}}</div>
<div>{{donations.total}}</div>
</div>
I have been struggling with this problem for the past few days, and now i believe its time to reach out to the community for some help.
I am creating a website using the MEAN stack, this is my first time using Angular JS so i am a noobie.
The problem I am having is, I am not able to render ANY $scope data in my view. this has been driving me crazy because the AngularJS chrome debugger shows that the $scope data is there!!! But it wont render in my template.
App Structure
/public
/js
/controllers
-user.js
-app.js
/views
-index.html
Contents of my html - i will not copy entire file, only angular parts.
<!doctype html>
<html ng-app="PCT">
<div ng-controller="userController" class="column">
<a class="dropdown-toggle" data-toggle="dropdown" href="#userinfo" >
<img ng-src="{{user.img}}" style="width:40px; height:50px;" />
</a>
<ul class="dropdown-menu" role="menu">
<li><strong>{{user.name}}</strong></li>
<li><a ng-click="logOut()">Sign Out</a></li>
<li>Admin Site</li>
</ul>
</div>
<script src ="js/app.js"></script>
<script src="js/controllers/user.js"></script>
Contents of my app.js
angular.module('PCT.userController',[]);
//Importing all modules into main module
angular.module('PCT',['PCT.userController']);
Contents of my user.js (Controller)
angular.module('PCT').controller('userController', ['$scope', function($scope){
$scope.user = {
img : 'http://path/to/usr/img/user.jpg',
name : 'mcutalo'
};
$scope.logOut = function(){
console.log('logging out');
}
}]);
I am able to click on the Logout button in my menu, and this will trigger the console log, so it is making it to the controller. But it wont display my $scope data at all.
I am not sure what your question was, but if "PCT" is your module (it should match the name ng-app and the app.module("PCT") and no need to inject controller if u are defining controller using
angular.module('PCT').controller('userController', ['$scope', function($scope){
}]);
Here is the plnkr of the working one.
Updated with the Logout and it is called console.log...
http://plnkr.co/edit/uSLVqEayCh2XeeGI7LZe?p=preview
Let me know if any further help is needed.