I'm trying to use angular-route to perform routing on my angularJS app. However, when I try to load /sales in the browser nothing appears (I tried with '#' and I get the same result). Here's my main.js file:
'use strict';
/**
* #name Main module
* #description
*/
var app = angular.module('app', ['ngResource', 'ngRoute']);
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
$routeProvider.when('/sales', {
controller : 'SalesCtrl',
templateUrl : '/views/sales.html'
});
$locationProvider.html5Mode(true);
}]);
Here's my index.html
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>webapp</title>
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<!-- build:css styles/vendor.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
<!-- build:js scripts/vendor/modernizr.js -->
<script src="/bower_components/modernizr/modernizr.js"></script>
<!-- endbuild -->
</head>
<body>
<!--[if IE]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='https://www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X');ga('send','pageview');
</script>
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/modernizr/modernizr.js"></script>
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-resource/angular-resource.js"></script>
<script src="/bower_components/angular-route/angular-route.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js scripts/main.js -->
<script src="scripts/main.js"></script>
<script src="scripts/services/sales.js"></script>
<script src="scripts/services/appconfig.js"></script>
<script src="scripts/controllers/sales.js"></script>
<!-- endbuild -->
<div ng-app="app">
<div ng-view></div>
</div>
</body>
</html>
I'm using angular 1.6.1.
Can anyone tell me what I'm doing wrong?
Angular 1.6.1 default hashPrefix is now ! as stated in the docs and the changelog
$locationProvider.html5Mode(false);$locationProvider.hashPrefix('');
This should work.
Try
$locationProvider.html5Mode(false);
And visit http://yourapp.com/#/page instead of http://yourapp.com/page
Related
I am using the Foundation Sites 6 Framework for one of my sites. I installed it via bower and included the css and js files in my html.
It all works fine but the orbit slider only shows the first two slides and then it stops. I don't get any errors in the console.
Here you can see the website: http://dev.epo-marketing.de/academy-studium-landingpage/
Header:
<!-- styles -->
<!-- build:css _assets/css/styles.min.css -->
<link rel="stylesheet" href="_assets/bower_components/foundation-sites/dist/css/foundation.css">
<link rel="stylesheet" href="_assets/fonts/kit-epo-academy-of-fine-art/css/embedded-woff.css">
<link rel="stylesheet" href="_assets/css/app.css">
<!-- endbuild -->
<!-- /styles -->
Footer:
<!-- scripts -->
<!-- build:js _assets/js/scripts.min.js -->
<script type="text/javascript" src="_assets/bower_components/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="_assets/bower_components/what-input/dist/what-input.js"></script>
<script type="text/javascript" src="_assets/bower_components/foundation-sites/dist/js/foundation.js"></script>
<script type="text/javascript" src="_assets/js/app.js"></script>
<!-- endbuild -->
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap" async defer></script>
<!-- /scripts -->
I solved it by myself. I had to include the motion-ui javascript and css files.
I have found this template and I want to use in my angular 1 application. I have include all directories to my project correctly. When I try to start my application, I have this error:
I have tried this https://stackoverflow.com/questions/24444807/cant-get-magnific-popup-to-work-two-javascript-errors but it did not work.
Can you please help to to solve this issue ?
Update
This is my headers:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900&subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
<link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="assets/img/favicon-96x96.png">
<script src="//d3js.org/d3.v3.min.js"></script>
..................................
..................................
..................................
..................................
..................................
..................................
..................................
<!-- build:css({.tmp/serve,src}) styles/vendor.css -->
<!-- bower:css -->
<!-- run `gulp inject` to automatically populate bower styles dependencies -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css({.tmp/serve,src}) styles/app.css -->
<!-- inject:css -->
<!-- css files will be automatically insert here -->
<!-- endinject -->
<!-- endbuild -->
<!-- here this load js files -->
<script src="../js/jquery.min.js"></script>
<!-- jQuery Easing -->
<script src="../js/jquery.easing.1.3.js"></script>
<!-- Bootstrap -->
<script src="../js/bootstrap.min.js"></script>
<!-- Waypoints -->
<script src="../js/jquery.waypoints.min.js"></script>
<!-- Carousel -->
<script src="../js/owl.carousel.min.js"></script>
<!-- countTo -->
<script src="../js/jquery.countTo.js"></script>
<!-- Flexslider -->
<script src="../js/jquery.flexslider-min.js"></script>
<!-- Magnific Popup -->
<script src="../js/jquery.magnific-popup.min.js"></script>
<script src="../js/magnific-popup-options.js"></script>
<!-- Main -->
<script src="../js/main.js"></script>
<!-- build:js(src) scripts/vendor.js -->
<!-- bower:js -->
<!-- run `gulp inject` to automatically populate bower script dependencies -->
<!-- endbower -->
<!-- endbuild -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<!-- build:js({.tmp/serve,.tmp/partials,src}) scripts/app.js -->
<!-- inject:js -->
<!-- js files will be automatically insert here -->
<!-- endinject -->
<!-- inject:partials -->
<!-- angular templates will be automatically converted in js and inserted here -->
<!-- endinject -->
<!-- endbuild -->
when I click on error I get this:
I am just new to angularjs. I am trying to test simple controller in my index.html. But when i am running it on my localhost i am getting an error :
Failed to load resource: the server responded with a status of 404 (Not Found).
Here is my folder structure:
angulartesting
-bower_components
-index.html
-script.js
Here is my index.html file:
<!-- index.html -->
<!DOCTYPE html>
<html ng-app="store">
<head>
<!-- SCROLLS -->
<!-- load bootstrap and fontawesome via CDN -->
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel='stylesheet' type='text/css' />
<!-- SPELLS -->
<!-- load angular and angular route via CDN -->
<script src="/bower_components/angular/angular.min.js"></script>
<script src="/bower_components/angular-route/angular-route.js"></script>
<script src="script.js"></script>
</head>
<body >
<div ng-controller="StoreController as store">
<h1>{{store.product.name}}</h1>
<h2>${{store.product.price}}</h2>
</div>
<script src="bower_components/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Here is my script.js:
// create the module and name it scotchApp
// also include ngRoute for all our routing needs
(function(){
var app = angular.module('store', []);
app.controller('StoreController',function(){
this.product=gem;
});
var gem = {
name:'Gaurav',
price:'220'
}
})();
Can anybody tell me what I am doing wrong?
I am running it on my local server.
Try this. I've just removed forward slashes before script sources and added ng-app attribute.
<!-- index.html -->
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<!-- SCROLLS -->
<!-- load bootstrap and fontawesome via CDN -->
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel='stylesheet' type='text/css' />
<!-- SPELLS -->
<!-- **Removed forward slashes before script sources** -->
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="StoreController as store">
<h1>{{store.product.name}}</h1>
<h2>${{store.product.price}}</h2>
</div>
<script src="bower_components/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Hope it helps
I began a web project using yeoman angular-generator, it works great when I run grunt serve, but after using grunt build and grunt serve:dist my project is broken. The css and images are not showing up and my inspect element shows that $('.foo').masonry() is not a function. I'm very new to angular, yeoman and grunt, and am truly not sure why it is broken in grunt serve:dist but works great with grunt serve, any help would greatly appreciated.
Here is my index.html, the Gruntfile.js is unchanged since generation.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel='stylesheet' href='bower_components/bootstrap/dist/css/bootstrap.css' />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<script src="./scripts/libs/jquery-2.1.4.min.js"></script>
<script src="./scripts/libs/greensock/src/minified/TweenMax.min.js"></script>
<!-- endbuild -->
</head>
<body ng-app="yeoboyApp">
<div id="view-port" class="container-fluid">
<div ng-view="" autoscroll="true"></div>
</div>
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/skrollr/src/skrollr.js"></script>
<script src="bower_components/angular-skrollr/dist/angular-skrollr.js"></script>
<!-- endbower -->
<script src="./scripts/libs/skrollr.min.js"></script>
<script src="./scripts/libs/masonry.pkgd.min.js"></script>
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/project.js"></script>
<script src="scripts/controllers/exposurements.js"></script>
<script src="scripts/controllers/google.js"></script>
<script src="scripts/controllers/htc.js"></script>
<script src="scripts/controllers/portbound.js"></script>
<script src="scripts/controllers/massive.js"></script>
<script src="scripts/controllers/churn.js"></script>
<script src="scripts/controllers/tessalate.js"></script>
<script src="scripts/controllers/tempsense.js"></script>
<script src="scripts/controllers/website.js"></script>
<!-- endbuild -->
</body>
</html>
Is there any other info I should provide?
I can't get my application to render in ie8. I've included every shim/shiv that I can possibly think of. Is there something wrong with my html? My application works perfectly in every browser above ie9.
Any helps is appreciated, here is my index.html file below:
<!doctype html>
<html class="no-js" xmlns:ng="http://angularjs.org" id='ng-app' ng-app="PredictionApp" >
<head>
<meta charset="utf-8">
<title>Prediction App</title>
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<!-- <link href='http://fonts.googleapis.com/css?family=Roboto:500,300|Crimson+Text:400,600,400italic' rel='stylesheet' type='text/css'> -->
<link rel="stylesheet" href="ionicons/css/ionicons.min.css">
<link rel="stylesheet" href="bower_components/angular-rangeslider/angular.rangeSlider.css">
<link rel="stylesheet" href="bower_components/rickshaw/rickshaw.css">
<link rel="stylesheet" href="bower_components/allmighty-autocomplete/style/autocomplete.css">
<link rel="stylesheet" href="main.css">
<!-- endbuild -->
<!--[if lt IE 9]>
<script src="bower_components/html5shiv/dist/html5shiv.min.js"></script>
<script src="bower_components/es5-shim/es5-shim.min.js"></script>
<script src="bower_components/json3/lib/json3.min.js"></script>
<script src="bower_components/r2d3/r2d3.js" charset="utf-8"></script>
<script type="text/javascript" src="https://getfirebug.com/firebug-lite-debug.js"></script>
<![endif]-->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.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-rangeslider/angular.rangeSlider.js"></script>
<script src="bower_components/moment/moment.js"></script>
<script src="bower_components/lodash/dist/lodash.compat.min.js"></script>
<script src="bower_components/clndr/clndr.min.js"></script>
<script src="bower_components/restangular/dist/restangular.js"></script>
<script src="bower_components/d3/d3.js"></script>
<script src="bower_components/rickshaw/rickshaw.js"></script>
<script src="bower_components/allmighty-autocomplete/script/autocomplete.js"></script>
<script src="bower_components/allmighty-autocomplete/script/app.js"></script>
<script src="application.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div class='app-container' ui-view autoscroll="true"></div>
</body>
</html>
Your pulling angular 1.3 which they don't officially support. Check the link https://docs.angularjs.org/guide/ie
Also You can try angular 1.2, if you are supporting IE 8.