When click on the Register link. It will not go to the register.html page. What is the wrong in this.
app.js
.when('/login/:register/', {
templateUrl: 'views/register.html',
controller: 'RegisterController'
});
login.html
<button href="#/login/:register/" class="button button-block button-positive activated">Register</button>
I think you should use anchor tag instead of button. I mean
Register
:register is a parameter in the route.
As you want to use as simple URL remove : from the route.
app.js
.when('/login/register/', {
templateUrl: 'views/register.html',
controller: 'RegisterController'
});
login.html, You need to use anchor if you want to use href
<a ng-href="#/login/register/">Register</a>
OR,
<button ng-click="redirect()">Register</button>
In controller use
$scope.redirect= function(){
$loaction.path('/login/register/')
}
i suggest to use ui router, it uses state instead of url using ui-sref,
if you have time and you need better handling over rouuting, tru ui router.
Related
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'm trying to route to a reset page from the login page of the webapp i'm working on but nothing happens when I click on "forgot Password". when I replace #/login with #/reset in the address bar the view changes to the reset page so I know the route is setup correctly. Any idea what i'm doing wrong?
My code:
in my login template:
<a href="#" class="forgotPassword" ng-click="forgotPassword()">Forgot Password?
In my login controller:
$scope.forgotPassword = function(){
$location.path('/reset');
}
whenever using anchor tag and want to redirect by using ng-click, do not use href
for you remove the href
now your template look like this..
<a class="forgotPassword" ng-click="forgotPassword()">Forgot Password?
Have you tried to redirect your view with the "href" tag instead of the "ng-click" function?
Forgot Password?
I recently began using $location.path() within ng-click functions rather than simply referencing a path within the href of an a tag.
My reasons for doing so:
Preference to have ALL logic, including paths navigated to moved out of my views (this may be a bit extreme).
For rare instances where multiple html templates reference the same controller I can change $location.path() once rather than having to remember to update corresponding href's within each template.
So instead of:
<a class="button button-balanced" href="/signup">Sign up</a>
I have:
<button class="button button-balanced" ng-click="goToSignup()">Sign up</button>
and in my controller:
$scope.goToSignup = function() {
$location.path('/signup');
}
My question is, are there drawbacks to setting my Angular app up this way? (note: I'm mainly building Ionic hybrid mobile apps)
Preference to have ALL logic, including paths navigated to moved out of my views (this may be a bit extreme).
You can do with your all logic and paths navigated by using same link button
<a href="/signup" class="button button-balanced" ng-click="SignUpFunc()>Sign Up</a>
the a tag is first execute the click function, then execute the href call. So you can do it by link button.
For rare instances where multiple html templates reference the same controller I can change $location.path() once rather than having to remember to update corresponding href's within each template.
If you using menu option, you can use link button
but if you navigate one controller to another controller, then you should use the
$location.path('/signup');
I also used similar logic in my project.It works fine for me.
<button class="button" ng-click="go('view')">Next Page</button>
$scope.go = function ( path ) {
$location.path( path );
};
I'm using Angular JS to dynamically load content like so:
HTML
...
<div ng-controller="MainController">
<div ng-view></div>
</div>
</html>
Angular
(function(){
var app = angular.module('app', ['ngRoute', 'ngAnimate']);
app.config(function($routeProvider) {
$routeProvider.when('/test', {
templateUrl : 'views/test.html',
controller : 'MainController'
});
});
app.controller('MainController', function($scope){ });
})();
This works as expected. However, inside the file test.html I have some links with the href="#" that need to be handled with javascript to do various things. At the moment, Angular is interpreting them with it's routing method and treats them as links to the homepage. How do I stop this and treat the links the way I want?
Example test.html content:
Left
Right
<p>Test content</p>
In a JS file separate from Angular I tried:
$('.slideLeft').on('click',function(){
return false;
});
But it doesn't do the return false, it uses the Angular routing.
You should be using Angular for all your bindings including event bindings. Don't use .on('click'), use ng-click (or .bind if you really need it, but you probably don't).
You can also see from the docs that the <a> directive does nothing if href is empty. Use href="" rather than href="#"
Use href="javascript:void(0)" in anchor attribute and also you should use ngClick instead of binding element using jQuery.
AngularJS Part:
myApp.config(['$routeProvider','$locationProvider',function($routeProvider,$locationProvider) {
$routeProvider.
when('/main', {templateUrl: 'sub/main.tpl', controller: MainCtrl}).
when('/users', {templateUrl: 'sub/users.tpl', controller: UserCtrl}).
otherwise({redirectTo: '/main'});
}]);
and my index.html
Main | Display Users
<div ng-view></div>
It works great but I am having problem with hashes.
When I try to use an anchor i.e:
test
when I click on this anchor it is calling the main page.
Is it possible to get rid of the hashes when we use ng-view?
Ah, because AngularJS reroutes your urls.
Try using ng-href,
<a ng-href="#test">test</a>
Edit: You can try changing the id of the anchor to the angular url..