I'm trying Angular for the first time, and my first issue that I want to implement is single page application feature.
But here the first problem:
I have configured a very simple work, it is divided into two files: index.html and project.js.
I'm working on a Windows 10 machine and I'm using xampp 3.2.2, this project is putted inside the folder /htdocs/webapp.
When access to "localhost/webapp/" it properly load the "otherwise" condition, but when I try to load for example "localhost/webapp/#/tomato" or "localhost/webapp/#tomato" the url becomes "http://localhost/webapp/#!#tomato" and the page still shows the content of the otherwise condition...
I really don't know what is the cause, and also the console doesn't show any errors, it seems that in $routeProvider always get the otherwise condition.
Please guys, give some solutions I'm very nervous ;-)
Thank you
Below the snippets of the files
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-route.min.js"></script>
<script src="project.js"></script>
</head>
<body ng-app="myApp">
<h2>JavaScript Projects</h2>
<div ng-view></div>
</body>
</html>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/banana", {
template : "<h1>Banana</h1><p>Bananas contain around 75% water.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>Tomatoes contain around 95% water.</p>"
})
.otherwise({
template : '<h1>None</h1><p>Nothing has been selected</p>prova'
});
});
DEMO
var app = angular.module("contactMgr", ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when("/banana", {
template : "<h1>Banana</h1><p>Bananas contain around 75% water.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>Tomatoes contain around 95% water.</p>"
})
.otherwise({
template : '<h1>None</h1><p>Nothing has been selected</p>prova'
});
}])
<!DOCTYPE html>
<html ng-app="contactMgr">
<head>
<meta charset="UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link data-require="bootstrap-css#*" data-semver="4.0.0-alpha.4" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="style.css" />
<title>Title of the document -1</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1>Welcome to Route</h1>
<div class="nav">
Tomato
Banana
</div>
</div>
</div>
</div>
<div class="container">
<div ng-view=""></div>
</div>
</body>
</html>
Related
I have a basic single page application in Angular Js. I have applied routing and set 'Html5Mode' to true.
My URL's have been cleaned up, but they now result in a 404 when trying to access the URL.
Now this is a front end web application so I do not have any config on IIS I can set up rewrite rules with.
Can anyone point me in the right direction to set up the URL's to prevent 404 error.
Below is my routing:
(function () {
"use strict";
angular.
module("app", [
"ngRoute",
"app.home",
"app.products",
"app.contact"
])
.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when("/",
{
controller: "HomeController",
templateUrl: "app/components/home/home.html"
})
.when("/products",
{
controller: "ProductsController",
templateUrl: "app/components/products/products.html"
})
.when("/contact",
{
controller: "ContactController",
templateUrl: "app/components/contact/contact.html"
})
.otherwise("",
{
controller: "HomeController",
templateUrl: "app/components/home/home.html"
});
$locationProvider.html5Mode(true);
});
})();
Index.html:
<!DOCTYPE html>
<html ng-app="app" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Newtown Gates & Welding</title>
<link href="assets/css/site.css" rel="stylesheet" />
<link href="app/components/home/home.css" rel="stylesheet" />
<link href="app/components/contact/css.css" rel="stylesheet" />
<link href="app/components/products/products.css" rel="stylesheet" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/bootstrap-theme.css" rel="stylesheet" />
<script src="assets/libs/angularjs/1.6.1/angular.js"></script>
<script src="assets/libs/angularjs/1.6.1/angular-route.js"></script>
<script src="app/app.js"></script>
<script src="app/components/home/homeController.js"></script>
<script src="app/components/products/productsController.js"></script>
<script src="app/components/contact/contactController.js"></script>
<script src="Scripts/jquery-1.9.1.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<base href="/"/> <!--Required when using location provider-->
<div>
Navbar here
<li>
home
contact
products
</li>
</div>
<div class="container-fluid">
<div class="row" style="border: 1px solid black;">
HELLO
</div>
<div ng-view></div>
</div>
</body>
</html>
Please add <base href="/" /> to your <head>
Please look here:
link
EDIT
you need to set the current folder in my case is
I am trying to make a single page web site with angular, bootstrap. I was trying to include a carousel in the first page and with ngRouting does not work. I have read somewhere here that i need to use ui.bootstrap to make carousel work with routing.
I am a beginner in angular. This is my index.html:
<!DOCTYPE html>
<html lang="en" ng-app="mainApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>My web page</title>
<!-- load angular, ui-bootstrap and angular-route -->
<script src="js/angular.min.1.5.8.js"></script>
<script src="js/angular-animate.min.1.5.8.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/ui-bootstrap-tpls-2.3.0.min.js"></script>
<script src="js/app.js"></script>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/modern-business.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation bar-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
CODE
</nav>
<!-- ngRoute -->
<div ng-view></div>
<!-- jQuery and Bootstrap -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
And my app.js:
var app = angular.module('mainApp', ['ngRoute','ui.bootstrap','ngAnimate']);
// angular routing
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "pages/main.html"
})
.when("/prezentare", {
templateUrl : "pages/AnotherPage.html"
})
.when("/green", {
templateUrl : "pages/green.html"
})
.when("/blue", {
templateUrl : "pages/blue.html"
});
});
// angular ui.bootstrap
app.controller('CarouselCtrl', function($scope) {
$scope.myInterval = 5000;
$scope.noWrapSlides = false;
$scope.active = 0;
var slides = $scope.slides = [];
slides.push(
{ image_url: '#/img/header1.png' },
{ image_url: '#/img/header2.png' }
);
});
and of course the main.html
<!-- New Carousel - UI-Bootstrap -->
<div ng-controller="CarouselCtrl">
<div style="height: 350px">
<div uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
<div uib-slide ng-repeat="slide in slides">
<img ng-src="{{slide.image_url}}" style="margin:auto;">
<</div>
</div>
</div>
</div>
<!-- Page Content -->
<div class="container"> other code </div>
Please tell my what i have doing wrong??? The carousel is not showing (only the 2 side arrows). Using ui.bootstrap, the carousel will be responsive too right?
I wrote a angular site, and in it I use rerouting to get a partial view into the main index. My site works fine when it's on my local PC.
The main view, Index.html, has a ng-view div, which should display The partial view in Chapter.html when the site first loads. The code for this is in myScript, app.Config.
I uploaded the site to Somee hosting server, and the Chapter.html view is not shown inside index.html.
I researched a bit and it seems that servers shouldn't have problems with angularjs. Besides, it doesn't seem to be a problem with all of angular, because my banner directive works.
I'm using my own copies of angular script, but I don't think that's the issue.
This is the basics of my code:
Index.html:
<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
<link href="../css/bootstrap-theme.css" rel="stylesheet" />
<link href="../css/bootstrap.css" rel="stylesheet" />
<link href="../css/MyStyle.css" rel="stylesheet" />
<script src="../Scripts/bootstrap.js"></script>
<script src="../Scripts/angular.min.js"></script>
<script src="../Scripts/angular-route.js"></script>
<script src="../modules/myModule.js"></script>
<script src="../Controllers/myController.js"></script>
<script src="../Scripts/MyScript.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl" class="container-fluid">
<banner></banner>
<div id="chapter" class="ng-view">
</div>
</body>
</html>
Chapter.html:
<div>
<img src="../Images/Chapter1.1.jpg" />
</div>
myScript.js:
app.directive("banner", function () {
return {
template: "<h1>My Title</h1>"
};
});
app.config(function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "Chapter.html"
});
});
I have the following scenario:
Mobile application written in Angular.
Login page that has not special layout - simple page.
home page that have a special layout including header and footer.
internal pages that also include header and footer.
So i want to be able to use two layouts 1- blank 2- with header and footer.
on my index.html page i added:
<div ui-view class="app-content"></div>
This is how my state provider looks like:
.state('layout', {
templateUrl: 'partials/mobile/layout.html',
reloadOnSearch: false
})
.state('homepage', {
url: "/",
templateUrl: 'partials/mobile/home.html',
parent: 'layout',
})
.state('internal-page', {
url: "/internal/:id",
templateUrl: 'partials/mobile/internal.html',
parent: 'layout',
controller:'InternalController',
})
.state('login', {
url: "/login",
templateUrl: 'partials/mobile/login.html',
controller: 'MobileLoginController',
})
in layout.html i have used the same ui-view again:
<!-- App Body -->
<div class="app-body" ng-class="{loading: loading}">
<div class="app-content">
<div ui-view></div>
</div>
</div>
The result is duplicate views, i get the same view twice when i'm using layouts.
The question:
Can someone explain what am i doing wrong, and how can i nested the ui-view one inside another without duplicate the page?
My index.html complete page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<base href="" />
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
<meta name="apple-mobile-web-app-status-bar-style" content="yes" />
<link rel="stylesheet" href="bower_components/mobile-angular-ui/dist/css/mobile-angular-ui-hover.css" />
<link rel="stylesheet" href="bower_components/mobile-angular-ui/dist/css/mobile-angular-ui-base.css" />
<link rel="stylesheet" href="bower_components/mobile-angular-ui/dist/css/mobile-angular-ui-desktop.css" />
<link rel="stylesheet" href="css/mobile/layout.css"/>
<script src="bower_components/angular1.3/angular.js"></script>
<script src="bower_components/angular1.3/angular-route.js"></script>
<script src="bower_components/angular-touch/angular-touch.min.js"></script>
<script src="bower_components/mobile-angular-ui/dist/js/mobile-angular-ui.js"></script>
<script src="bower_components/mobile-angular-ui/dist/js/mobile-angular-ui.gestures.js"></script>
<script src="bower_components/mobile-angular-ui/dist/js/mobile-angular-ui.migrate.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/angular-websocket/angular-websocket.js"></script>
<script src="js/common/app.js"></script>
<script src="js/mobile/app.js"></script>
<script src="js/common/services.js"></script>
<script src="js/common/controllers.js"></script>
<script src="js/common/filters.js"></script>
<script src="js/mobile/controllers.js"></script>
<script src="js/mobile/directives.js"></script>
<script src="js/mobile/services.js"></script>
</head>
<body ng-app="myApp" ng-controller="ApplicationController" ng-swipe-right="swipe('right')" ng-swipe-left="swipe('left')">
<div data-ng-show="loading" class="app-content-loading">
<div class="spinner-background">
<div class="loader-image"></div>
</div>
</div>
<div ui-view class="app-content"></div>
<div ui-yield-to="modals"></div>
</body>
</html>
My app.js page:
angular.module('myApp', [
'myApp.common',
'ngRoute',
'ngTouch',
'ui.router',
'ui.bootstrap',
'mobile-angular-ui',
'ngCookies',
'myApp.filters',
'myApp.services',
'myApp.services.mobile',
'myApp.directives',
'myApp.controllers',
'myApp.controllers.mobile',
'mobile-angular-ui.gestures',
'mobile-angular-ui.migrate',
'angular-websocket'
])
I created working plunker - BUT 1 : 1 with your question snippet. Based on that code you've shown, I must say:
All your (shown) code is correct and working. The issue is elsewhere...
It could be some lost ui-view elsewhere
<div class="app-body" ng-class="{loading: loading}">
<div class="app-content">
<div ui-view></div>
</div>
// suspected to me is lost child ... with the ui-view attribute
<div ui-view></div> // doubled target declaration
</div>
Check that your code is working here
I am trying to load a login.hml to my index.html using angular-route and ng-view, but for some reason it doesnt work.
<!doctype html>
<html ng-app="Test">
<head>
<script src="public/lib/angular/angular.min.js"></script>
<script src="public/lib/angular/angular-route.min.js"></script>
<script src="public/lib/angular/angular-animate.min.js"></script>
<script src="public/modules/core/core.client.module.js"></script>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<nav class="cf" ng-include="'public/modules/navigation/views/nav.html'"></nav>
</header>
<div class="page">
<main class="cf" ng-view></main>
</div>
</body>
</html>
A very simple JS file which loads the Angular modlule and call the $routeProvider for /login url:
var myApp = angular.module('Test',['ngRoute']);
myApp.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/login', {
templateUrl: 'views/login.html'
}).otherwise({redirectTo: '/about'});
}]);
login.html:
<h1>
<p>Login</p>
</h1>