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
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.
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');
}]);
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']);
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>
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