I am using AngularJS routing, which is changing the template when I select a link. However, for the last page, I have a link that I want to go to another internal HTML page and not load a template view again. How can I do this?
So far I have tried a few options but here is what I have now.
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
.when("/page-eight", {
templateUrl : "views/page-eight.html",
controller: 'primaryController'
})
.otherwise({
templateUrl : "views/start.html"
});
}]);
The above routing work, but as I have a link in my page-eight.html template as shown below, how can I force it to go to an internal page instead?
<a ng-href="internal-page.html" class="btn-solid">Go to Internal Page</a>
It seems that by clicking on the link above, this is connected to the 'otherwise' part of my route set up. Therefore, this doesn't go to my internal-page.html but loads in my start.html, not what I want.
I believe if you add target="_self" it will bypass the router.
Also, your server side route handler needs to serve up the correct "non-SPA" content for that specific page, depending how you have it set up.
Related
when I reload page I'm getting a warning saying that "Tried to load angular more than once".But I didn't import angular script more than once.
If any one please give any answer for this question
Its a generic errors it could have many reasons to get this warning. I will try to give suggestions for two cases
first it's a problem of routeProvider not finding a file and recursively loading the default.
$routeProvider
.when('/', {
templateUrl: 'views/listing.html',
controller: 'ListingCtrl'
})
.otherwise({
redirectTo: '/'
});
if you are using ui-view then it should be like below
<ui-view></ui-view>
3. You have to add jquery script tag before angularjs so that angularjs can replace jqLite by jQuery.
script loading order should be like below
jquery.js
jqueryui.js
angular.js
I'm using AngularJs V1.6. Ui- Router V 1.0.3
I've been trying to learn how to work with ui-router for the past few eeks and I came upon this code today which has me totally confused :-
Html side -
<ul ng-if="!isAuthenticated()" class="nav navbar-nav pull-right">
<li>Login</li>
<li>Sign up</li>
</ul>
JS -
$stateProvider
.state('home', {
url: '/',
controller: 'HomeCtrl',
templateUrl: 'partials/home.html'
})
.state('login', {
url: '/login',
templateUrl: 'partials/login.html',
controller: 'LoginCtrl',
resolve: {
skipIfLoggedIn: skipIfLoggedIn
}
})
This is code from Satellizer.
I tried replicating it but all it did was end up showing me the folder structure of my working directory in the browser.
However, I was using ui-router visualizer and upon clicking the route in that, it worked properly. I can't find any samples where ui-router is used this way, how exactly is this above snippet working?
I also read here that typing
<a ui-sref="party">Go To Party</a>
will turn it into
Go To Party
in our browser. However, in the example I posted intially, there is no ui-sref with the href. Once again, how exactly or what exactly is happening? Is it only working because it's retrieving a separate html file?
I tried replicating it but all it did was end up showing me the folder
structure of my working directory in the browser.
This happened because the first example in your question uses hash-prefix for generated links and the second example uses html5Mode for links.
When you click on a link with hash prefix mode eg. #/home, the request of that resource is handled at client-side by ui-router and is not sent to the server. But when you click on a link that is without prefix eg. /home, the request goes to the server. Your server needs to understand about this type of request (look at the referenced link below).
The default mode generates # as prefix. If you don't want to have hash prefix # in generated links then you need to enable HTML5Mode like this:
app.config(["$locationProvider", function($locationProvider) {
$locationProvider.html5Mode(true);
}]);
If you enable this mode, then don't forget to inform Angular about the root URL of your app by adding following to the head section of your HTML file:
<base href="/">
Reference:
Read more about how to configure your server to work with html5Mode here.
About ui-sref directive:
The preferred way of route/state resolution using ui-router in HTML templates is to use ui-sref which is a directive that binds a link i.e. anchor tag ( tag) to a state. If a state has an associated URL, the directive will automatically generate, update the href attribute for you.
This way your HTML template just needs to refer a state name and the link resolution will be done for you which is good as if in future you change the underlying link for states, your templates will still work. This directive uses $state.href() method for link value.
You can directly use the associated link in anchor tag without using this directive. But doing this, you will always need to revise your link if you change url in route config. Let ui-router module help you to manage this without writing any extra line of code and to ease state management.
The usage of this directive is:
ui-sref='stateName' - Navigate to state, no params. 'stateName' can be any valid absolute or relative state, following the same syntax rules as $state.go()
ui-sref='stateName({param: value, param: value})' - Navigate to state, with params.
Example: If you html has following link:
<a ui-sref="home">Home</a>
The generated HTML (Html5Mode Off results in prepended '#') will be following provided your route config has a valid state named as home:
Home
Reference:
- UI Router ui-sref directive
When use you are write this routing sample
Home
You must be write this code in the routing
$locationProvider.html5Mode(true)
This link can help you
I am quite new to Angular and now trying to make a simple routing with it. I have my landing page, currently called index2.html, containing some .js and .css includes and a div containing <ng-view></ng-view> where my content should go into.
My app.js looks like this:
var module1 = angular.module('module1', ['ngRoute']);
module1.config(function($routeProvider, $locationProvider){
$routeProvider.when("/",
{
templateUrl: "page1.html",
controller: "uiCtrl"
}
).when("/:param",
{
templateUrl: "page1.html",
controller: "uiCtrl"
}
).when("/transactions",
{
templateUrl: "page2.html",
controller: "uiCtrl"
});
});
But actually this does quite confusing things. Calling http://myurl.com/index2.html, the content of page1.html is properly loaded into the ng-view. So far, so good, but calling index2.html/123 gives my a Not Found instead of interpreting 123 as a parameter. I don't know why, but to make 123 a paremeter i have to call index2.html#123, which works, but then instantly updates the url to index2.html#/123.
Calling index2.html/transactions doesn't work at all. How can i call my /transactions route?
EDIT: If this is useful, i am using JQueryMobile as well in these pages.
I finally got what I want by getting the HTML5 mode work, which makes things so much easier.
After setting $locationProvider.html5Mode(true); I had to re-configure my webserver, what I wasn't able to manage until I found this nice guide: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode
Now I can access each of my routes at the conventional way using a slash. Parameters can be passed with ? and &, as usual and I don't need to grapple with confusing hashtags and self-changing url's anymore.
I have two parallel views in my AngularJS template. One is the main page view and the second is the navigation bar view. If user is logged in, I display private data in the main view as well as a link to user account in the navigation view. If user is not logged in, I display a welcome screen as well as a login link. So, that's why I'm using two parallel views.
When using ui-router with one ui-view directive in the template, things work as expected. When using two named ui-view directives in my template, $state.go('nameOfState') doesn't work anymore.
Here's a Plunk that's failing in triggering state with $state.go() because it has two views. Here's a Plunk that shows how the same code works when there's only one view.
Why is $state.go() not working?
The problem is the controller for your home state is not being instantiated, meaning the $state.go call is never happening. The controllers are instantiated only on demand. Specifically, the documentation states:
Warning: The controller will not be instantiated if template is not defined.
In order to get mainCtrl to be instantiated, you can add a template to the home state and add an unnamed ui-view to index.html, or you can add a template for one or more of the existing named views (e.g. "main") for the home state and move the mainCtrl to be the controller for those views. E.g. if you replace your existing home state with the following, it should work as expected:
.state('home', {
url: '/',
views: {
'main': {
template: 'main template',
controller: mainCtrl
}
}
})
I'm new to angularjs and want to integrate it in a cakephp app. For some pages I don't have a controller since no javascript is exectuted there or because I still have to create them. I however don't want to list them all in the routes. For this reason i set it like the following:
angular.module('desktop', []).
config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/', {templateUrl: 'pages/index', controller: IndexController})
.when('/clubs', {templateUrl: 'partials/clubs.html',controller: ClubListController})
.otherwise({templateUrl: location.pathname});
}]);
This is however not working. When I go to /help, nothing happens. What am i doing wrong?
From my comments:
As far as I know it there is currently no way to do this with just routes. Routes are made to be static, they are defined as the app loads and do not update dynamically as time goes by. So using location.pathname() (or directly checking window.location) won't work since the route be set to whatever the value is when the app starts, and then never change again. It won't update when you load a new path unless you do a full browser reload (this is btw possible, but a hacky sollution).
But people have been working around it using includes, which might work for you depending on what you are after. See this question and the accepted answer for an example of how this works.
AngularJS - How to use $routeParams in generating the templateUrl?