Why is this AngularJS routing broken when html5mode is enabled? - javascript

I would like to use AngularJS routing. I am using AngularJS-seed-master as a start and routing works by default. However, it stopped working after I enabled html5mode. Below is the html code when routing works;
<ul class="menu">
<li>view1</li>
<li>view2</li>
</ul>
<div ng-view></div>
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
Javscript app.js code when routing works;
angular.module('myApp', [
'ngRoute',
'myApp.filters',
'myApp.services',
'myApp.directives',
'myApp.controllers'
]).
config(['$routeProvider', function($routeProvider)
{
//configuration for $routeProvider
$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
$routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
$routeProvider.otherwise({redirectTo: '/view1'});
}])
Then, I enabled html5mode by adding this to app.js
.config(['$locationProvider', function($locationProvider)
{
$locationProvider.html5Mode(true);
}])
It is at this point that AngularJS routing stops working. What did I do wrong? How can AngularJS routing be made to work after enabling html5Mode?

What you have to do is in "app.js" set the "html5mode" to true:
config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true).hashPrefix('!');
$routeProvider.otherwise({redirectTo: '/view2'});
}]);
In index.html add under header:
<head>
<base href="/" />
<meta name="fragment" content="!">
</head>
And change the link:
<body>
<ul class="menu">
<li>view1</li>
<li>view2</li>
</ul>
</body>
And that's it the main URL:
http://localhost:8000
Will redirect to:
http://localhost:8000/view1
And link will work showing sexy address.

Related

Injecting route configuration from module to module

I'm studying routing in angular and something is going wrong
I have the following file structure:
index.html
<br>script.js
<br>first/first.js (controller) second.html (view)
<br>second/second.js (controller) second.html (view)
index.html
'use strict';
// script.js
angular.module('RoutingApp', [
'ngRoute',
'RoutingApp.first',
'RoutingApp.second',
'RoutingApp.third',
])
.config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
$locationProvider.hashPrefix('!');
$routeProvider.otherwise({redirectTo: '/first'});
}]);
//first.js
'use strict';
angular.module('RoutingApp.first', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/first', {
templateUrl: 'first/first.html',
controller: 'First'
});
}])
.controller('First', [function() {
}]);
//second.js
'use strict';
angular.module('RoutingApp.second', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/second', {
templateUrl: 'second/second.html',
controller: 'second'
});
}])
.controller('second', [function() {
}]);
ul {
list-style-type: none;
}
<html lang="en" ng-app="RoutingApp">
<head>
<title>Routing app</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<ul class="nav flex-column">
<li class="nav-item">Home</li>
<li class="nav-item">Contact</li>
</ul>
</nav>
<div ng-view></div>
//...
</body>
</html>
and nothing happens.
What's wrong?
You have an extra comma at
'RoutingApp.third',
That third route probably shouldn't be there either since it's not defined anywhere.

Angular Ui-router inline template not rendering

I'm New to Angular, and learning through the tutorials on Thinkster. I'm at the Angular Routing -> Adding a New State step.
I am trying to use ui-router to render an inline template, but the template is not appearing. Here is my index.html (abridged) :
<html>
<head>
<!-- My js files are loaded here -->
</head>
<body ng-app='flapperNews'>
<div class ='row'>
<div class="col-md-6 col-md-offset-3">
<div ui-view></div>
</div>
</div>
<script type="text/ng-template" id="home.html">
<!-- My template written as plain html>
</script>
</body>
</html>
And this is how my routing is currently handled in app.js :
angular.module('flapperNews',['ui.router'])
.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider){
return;
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl'
});
$urlRouterProvider.otherwise('home');
}]);
It is my understanding that ui-router should parse the url and render the appropriate template within the div ui-view tags. (Thinkster says the tag should be 'ui-view' but the ui-router docs seemed to indicate otherwise; I have tried both ).
My page renders blank, and there are no errors logged to the console. For what its worth, I am doing the tutorial with just local files, and since I've added the routing code my url has a # appended to it i.e file://blah/blah/FlapperNews/index.html# and I'm unsure why.
Just tries the following code and seem to work. It is based on the link you provided.
What I fixed from your code:
id="home.html" to id="/home.html"
comment is not closed: <!-- My template written as plain html>
delete return; from config function
removed controller since there wasn't any code for it
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body ng-app='flapperNews'>
<div class ='row'>
<div class="col-md-6 col-md-offset-3">
<div ui-view></div>
</div>
</div>
<script type="text/ng-template" id="/home.html">
test content
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
angular.module('flapperNews', ['ui.router'])
.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html'
// controller: 'MainCtrl'
});
$urlRouterProvider.otherwise('home');
}])
</script>
</body>
</html>
Delete the return in your configuration function.
angular.module('flapperNews',['ui.router'])
.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider){
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl'
});
$urlRouterProvider.otherwise('home');
}]);

angular js routing not working in localhost

i trying to use angular js routing method to the web app i am building, bt i was not able to route through the directory, i am getting a 404 error, below is my codes.
<!doctype html>
<html ng-app="AngularStore">
<head>
<link rel="stylesheet" type="text/css" href="src/bootstrap/cerulean.css">
<script type="text/javascript" src="src/jquery/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="src/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="src/angular/angular.min.js"></script>
<script type="text/javascript" src="src/angular/angular-route.js"></script>
<script src="product.js" type="text/javascript"></script>
<script src="store.js" type="text/javascript"></script>
<script src="shoppingCart.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script src="controller.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span10 offset1">
<h1 class="well" >
<a href="default.html">
<img src="img/logo.png" height="60" width="60" alt="logo"/>
</a>
Angular Store
</h1>
<div ng-view></div>
</div>
</div>
</div>
</body>
</html>
here is my app.js file
var storeApp = angular.module('AngularStore', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/store', {
templateUrl: '/partials/store.html',
controller: 'storeController' }).
when('/products/:productSku', {
templateUrl: '/partials/product.html',
controller: 'storeController' }).
when('/cart', {
templateUrl: '/partials/shoppingCart.html',
controller: 'storeController' }).
otherwise({
redirectTo: '/store' });
}]);
Your code is definitely needs 'ngRoute'
var storeApp = angular.module('AngularStore', ['ngRoute']).
here is a plnkr http://plnkr.co/edit/X9gyEPm6v126kobj0lTa
Other thing you could be doing wrong is providing template paths relative to root
templateUrl: 'partials/store.html',
instead of
templateUrl: '/' + 'partials/store.html',
You should load ngRoute along with your app module declaration.
var storeApp = angular.module('AngularStore', ['ngRoute']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/store', {
templateUrl: 'partials/store.html',
controller: 'storeController' }).
when('/products/:productSku', {
templateUrl: 'partials/product.html',
controller: 'storeController' }).
when('/cart', {
templateUrl: 'partials/shoppingCart.html',
controller: 'storeController' }).
otherwise({
redirectTo: '/store' });
}]);
Make sure that you load ngRoute along with your app module declaration.
var app = angular.module("app", ['ngRoute']);
It's not enough that you load the script file. For you it should be:
var storeApp = angular.module('AngularStore', ['ngRoute']);

Angularjs: Unable to run the code

I am new to angularjs and these are the files I have created.
I have tried my best but could not run the above code.
myApp(Folder)
- app.js
- controller.js
- index.html
- phone-detail.html
- phone-list.html
The Home page is the phone-list.html and when clicked on a phone routes to a phone-detail.html page.
app.js
var phonecatApp = angular.module('phonecatApp', ['ngMaterial','phonecatControllers','$routeProvider']);
phonecatApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'phone-list.html',
controller: 'PhoneListCtrl'
}).
when('/phones/:phoneId', {
templateUrl: 'phone-detail.html',
controller: 'PhoneDetailCtrl'
}).
otherwise({
redirectTo: '/phones'
});
}]);
controller.js
var phonecatControllers = angular.module('phonecatControllers', []);
phonecatControllers.controller('PhoneListCtrl', ['$scope',
function ($scope) {
$scope.phones =
[{"Device":"ipad mini","Model":"MD528LL/A"},
{"Device":"ipadair","Model":"MD785LL/A"}]
}]);
phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams',
function($scope, $routeParams) {
$scope.Model = $routeParams.Model;
}]);
index.html
<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
<!-- Angular Material CSS now available via Google CDN; version 0.10 used here -->
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="controller.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-view>
</div>
</body>
</html>
phone-list.html
<div class="mainContent" style="margin:5%">
<li ng-repeat="phone in phones" style="float:left; margin:40px" >
<md-content style="padding:0px; overflow-y: hidden">
<md-card style="width:300px; height:300px; margin:0px" >
<img ng-src="{{phone.image}}" class="md-card-image" style="height:40%" alt="image caption" >
<md-card-content style="padding:0; height:25%">
<h6 class="md-title">{{phone.Device}}</h6> <hr style="opacity:0.5">
</md-card-content>
<md-card-footer class="md-actions" layout="row" layout-align="center" style="padding:0">
<md-button class="md-raised">Action 1</md-button>
<md-button class="md-raised">Action 2</md-button>
</md-card-footer>
</md-card>
</md-content>
</li>
</div>
phone-detail.html
{{phone.Device}}
You should inject ngRoute module instead of $routeProvider in :
var phonecatApp = angular.module('phonecatApp', ['ngMaterial','phonecatControllers','$routeProvider'])
Also make sure you included the sources of angular-route.js as angular routing is separated from angular sources.
Edit: From the index.html you posted I see you included angular-route.js but it appears you are missing the script of angular-material, so be sure to add :
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script>

Angularjs ng-view not showing data

I am learning Angularjs from Tuts+ Easier JavaScript Apps with AngularJS tutorial. Now I am at the part where they discussed Routing Primer using ng-view. I am trying to show the list page contents in ng-view of index page. For some reason nothing is shown when I load index.html. I found from searching that From angular 1.2.0, ngRoute has been moved to its own module. I have to load it separately and declare the dependency. But still I can't show anything from my list page.
index.html
<!doctype html>
<html ng-app="myApp">
<head>
<title>Angular App</title>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="Ctrl">
<div ng-view></div>
</div>
</body>
</html>
list.html
<h3>List</h3>
<ul>
<li ng-repeat="contact in contacts">
{{contact.name}}: {{contact.number}}
</li>
</ul>
app.js
var app = angular.module('myApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'list.html',
controller: 'Ctrl'
});
});
app.controller('Ctrl', function($scope){
$scope.contacts = [
{ name: 'Shuvro', number: '1234' },
{ name: 'Ashif', number: '4321' },
{ name: 'Anik', number: '2314' }
];
});
Remove the ng-controller from the div like this:
<body>
<div >
<div ng-view></div>
</div>
</body>
To void "miss-routings" add the otherwise to the main configuration like: otherwise({ redirectTo: '/'});
app.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'list.html',
controller: 'Ctrl'
}).otherwise({ redirectTo: '/'});
});
Online Demo

Categories