In asp web api i have an index.html with angularjs framework.
In angularjs i have the following route:
gestionale.config(function ($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
templateUrl: 'View/people.html',
controller: 'mainController'
}).
when('/ruoli', {
templateUrl: 'View/ruoli.html',
controller: 'ruoliController'
});
});
When i start the project with visual studio, it opens the index.html at the following url:
http://localhost:49375/index.html#/
and the view "View/people.html" is correctly showed.
1)How can i put, in the index.html, a static link to the ruoli.html page? I have tried
<a href="/ruoli">
but doesn't work because it load the page
http://localhost:49375/ruoli
instead of
http://localhost:49375/index.html#/ruoli
You need to put the hashbang before the slash.
So you setup your href attribute like this :
<a href="#/ruoli">
that will properly navigate to:
http://localhost:49375/index.html#/ruoli
Check this hashbang routing article/cookbook:
http://fdietz.github.io/recipes-with-angular-js/urls-routing-and-partials/client-side-routing-with-hashbang-urls.html
Related
I have a simple angularjs app, with ngRoute module for routing in html5Mode.
How can I have a link to some static file on my page, and not to have it intercepted by angular routing module?
Here's the example:
HTML:
<head>
<base href='/'></base>
</head>
<body ng-app="crudApp">
Home
User
users.html
<div ng-view></div>
JS routing:
$routeProvider
.when('/', {
templateUrl: 'app/components/home/homeView.html',
controller: 'HomeController'
})
.when('/user', {
templateUrl: 'app/components/user/userView.html',
controller: 'UserController'
})
.otherwise({
redirectTo: '/'
});
When I click on User link I get routed to localhost:8080/user, and my controller and template work fine. When I click on users.html link I get routed to home, but I want to invoke a static home.html page.
From the AngularJS docs, you have 3 options:
Html link rewriting
(...)
In cases like the following, links are not rewritten; instead, the browser will perform a full page reload to the original link.
Links that contain target element
Example: link
Absolute links that go to a different domain
Example: link
Links starting with '/' that lead to a different base path
Example: link
What you might be looking for is the first example:
users.html
I'm writing a web app using phonegap and Ionic. I want to write each HTML page in a different file but I cannot manage to do this. In Ionic API they show only the following example:
<script id="templates/home.html" type="text/ng-template">
<ion-view view-title="Home">
<ion-content class="padding">
<p>
<a class="button icon icon-right ion-chevron-right" href="#/tab/facts">Scientific Facts</a>
</p>
</ion-content>
</ion-view>
</script>
Which is a HTML code written inside a <script> tags, in the index.html page.
I tried to create a different file with the name home.html for instance, and received the following error:
XMLHttpRequest cannot load file: path-to-the-file. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource.
My js is looks like this:
angular.module('myApp', ['ionic'])
.config(function ($stateProvider, $urlRouterProvider) {
// Set and define states
$stateProvider
.state('/', {
url: '/',
templateUrl: 'index.html'
})
.state('home', {
url: '/home',
templateUrl: 'templates/home.html'
});
$urlRouterProvider.otherwise("/");
})
and html page:
<ion-view title="home">
<ion-content>
The content of the page
Register
</ion-content>
I see the index.html page with the register link, but clicking it doesn't execute anything.
It seems like only when it is wrapped in a <script> tags it works.
Any suggestions?
Get rid of the script tags. Ionic does this for you:
<script id="templates/home.html" type="text/ng-template">
And you can't use ui-router by loading index.html as the base state, as index should have the first ui-router html tag. You need to include in index.html, and create some sort of menu file if you want to have a base/abstract state, such as the following:
angular.module('myApp', ['ionic'])
.config(function ($stateProvider, $urlRouterProvider) {
// Set and define states
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html'
})
.state('app.home', {
url: '/home',
templateUrl: 'templates/home.html'
});
$urlRouterProvider.otherwise("/app");
I am trying to rid my site of Hashbangs but I can't seem to get it quite right. For example, if I land on my home page and then click on the "CSS" menu and select the "Origami Element" menu option, I briefly see the page load before I am directed to a GitHub 404 page.
If I put the url (http://eat-sleep-code.com/css/origami) in directly, I get sent directly to the GitHub 404.
What am I missing, or is this not possible on a GitHub Pages-hosted AngularJS site?
Below is a partial chunck of my app.js
var app = angular.module('eatsleepcode', ['ngRoute', 'ngSanitize']);
/* Routing */
app.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.
when('/', {templateUrl: 'views/blog.html', controller: 'BlogController'}).
when('/blog', {templateUrl: 'views/blog.html', controller: 'BlogController'}).
when('/blog/:postID', {templateUrl: 'views/blog.html', controller: 'BlogController'}).
when('/contact', {templateUrl: 'views/contact.html', controller: 'DefaultController'}).
when('/privacy', {templateUrl: 'views/privacy.html', controller: 'DefaultController'}).
when('/resources', {templateUrl: 'views/resources.html', controller: 'DefaultController'}).
when('/terms', {templateUrl: 'views/terms.html', controller: 'DefaultController'}).
when('/css/origami', {templateUrl: 'views/css/origami.html', controller: 'DefaultController'}).
otherwise({
redirectTo: '/404'
});
$locationProvider.html5Mode(true);
}]);
/* Controllers */
app.controller('DefaultController', function($scope) {});
#zeroflagL suggestion got me over my first hurdle. I had some code that was specifically firing on hashbang URLs. I had failed to update that IF condition.
Now, clicking on all the links worked fine but entering a URL directly resulted in a 404 error. Had I been running this site on IIS or Apache I could have rectified the solution by implementing a URL rewrite (and this would be the ideal way to deal with this).
But alas, I am running this on GitHub pages. They currently (as of 11/25/2014) do not support setting up your own URL rewrite configuration.
They do however, let you setup a custom 404 page. I setup a simple 404.html page in the root of my GitHub pages site. This 404 page, inserts the hash AngularJS needs behind the scenes into the URL and then calls a redirect to it. As we are using a window.location.replace, the 404.html page doesn't show up in the browser history.
<html lang="en" data-ng-app="eatsleepcode">
<head>
<title><eat-sleep-code /></title>
<meta charset="utf-8" />
</head>
<body>
<script type="text/javascript">
var url = window.location.protocol + '//' + window.location.host + '/#' + window.location.pathname;
window.location.replace(url);
</script>
</body>
</html>
In the event the page doesn't really exist... ie: http://eat-sleep-code.com/somecrazyurl Angular routing takes over and loads my 404 view. Perhaps not the most elegant solution but it appears to have worked in a situation where URL rewriting is not an option.
The problem is in your render.min.js script. When you click on a link then the URL of the current window is changed:
window.top.location.href=e
Without that it works fine.
I want to display two pages, but use a base layout. I have it somewhat working with the following:
index.html
<html data-ng-app="myApp">
<head>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<div data-ng-view class="container"></div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="public/app.js"></script>
</body>
</html>
main.html
<div>
<h2> Hello! This is Main page </h2>
</div>
list.html
<div>
<h2> This is List page </h2>
</div>
app.js
var myApp = angular.module('myApp', []);
// Routing Setup
function myAppRouteConfig($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'index.html'
}).
when('/list', {
controller: ListController,
templateUrl: 'list.html'
}).
otherwise({
redirectTo: '/'
});
}
myApp.config(myAppRouteConfig);
This somewhat works when I visit index.html and list.html, but two problems:
When I load index.html, bootstrap loads fine. But when I visit list.html, bootstrap doesn't load. In fact, looking at the html source in firebug, all the code from index.html isn't loaded. The container is missing, the script and css links are missing.
How do I load an actual index page? I have my main.html that I want to load when a user visits the root page, but index.html is the base layout that contains code that persists through all other views (ie, like header and footer etc). If I modify my app.js and set the templateUrl: 'main.html', it seems to still load index.html. Is AngularJS implicitly looking for index.html as the base template?
EDIT:
File structure:
-- server.js
-- public/
|-- index.html
|-- list.html
|-- main.html
|-- js
|-- app.js
Change your route to:
$routeProvider.
when('/', {
templateUrl: 'main.html'
}).
when('/list', {
controller: ListController,
templateUrl: 'list.html'
}).
//if you need to use login page, add 1 more route
when('/login', {
templateUrl: 'login.html'
})
otherwise({
redirectTo: '/'
});
and put your index.html at the root directory (or any sub directory) of your web app, configure it as the default document.
Is AngularJS implicitly looking for index.html as the base template?
There is nothing related to angular here, this is the normal behavior of loading an html page from a web server.
Here is how it works:
When users access your application at the root url (e.x: http://example.com) or any sub directory (http://example.com/public), the index.html is loaded into browser like with normal web applications, then your app.js is run as normal. When the routes are registered and the application is bootstrapped, angular checks the route and loads main.html to be inserted into the container where ng-view is declared.
After digging around, it turns out my AngularJS route requires ngRoute, which is its own module now. After including it, it started to display the correct pages.
I wanted to animate my application so I injected ngAnimate but now none of my views are displaying:
var spApp = angular.module('spApp', ['ngRoute','ui.bootstrap', 'ngAnimate'])
.config(function($routeProvider, $locationProvider){
var rootUrl = '/Style%20Library/projects/spDash/app/partials/';
$routeProvider
.when('/home',
{
templateUrl: rootUrl+'home.html'
})
.when('/userView',
{
templateUrl: rootUrl+'userView.html',
controller: 'userCtrl'
})
.when('/groupView',
{
templateUrl: rootUrl+'groupsView.html',
controller: 'groupCtrl'
})
.when('/sitesView',
{
templateUrl: rootUrl+'sitesview.html',
controller: 'sitesCtrl'
})
.otherwise({redirectTo:'/home'});
//$locationProvider.html5Mode(true);
});
Is this incorrect?
Your application demo in the plunker is missing the app declaration like this for example:
<body ng-app="spApp">
There is controller or main controller defined.
<div ng-controller="mainCtrl">
<ng-view></ng-view>
</div>
More over I am not sure about your script declaration.
Here is a plunker configured:
http://plnkr.co/edit/tjDnzBu2PVSADKtbEFrL?p=preview
Here's a plunker with a few HTML files. In the original, you had "home.js" instead of "home.html", but when the partials are saved as HTML they seem to work fine.
http://plnkr.co/edit/aa6fKoBljxRHe4zVPYBl?p=preview
The version between angular and animate weren't the same. Angular was 1.2.4 while animate was 1.2.10.
Upgrading angular solved the issue.
Thanks for trying.