I'm just getting started with ui-router and can't make it displaying a view under the ui-view template.
Main template looks like this
index.html
<html ng-app="MyApp">
<head>
<link href="stylesheets/style.css" rel="stylesheet">
</head>
<body>
<h4>
This should be the header
</h4>
<div ui-view></div>
<script src="vendor/angular.js"></script>
<script src="vendor/angular-ui-router.js"></script>
<script src="vendor/angular-route.js"></script>
<script src="vendor/angular-cookies.js"></script>
<script src="app.js"></script>
<script src="controllers/main.js"></script>
</body>
</html>
test.html contains just few lines of text
app.js
angular.module('MyApp', ['ui.router'])
.config(function($stateProvider) {
$stateProvider
.state('main', {
url: '/',
templateUrl: 'views/test.html',
controller: 'MainCtrl'
});
})
And on the '/' page I can only see a header and no test.html text.Console gives no errors.
What am I missing here?
Check this plunker, which shows, that we should not forget to set the default route via the: $urlRouterProvider.otherwise("/");. So the only extension made is the injection of $urlRouterProvider and configuration what to do at the start-up (otherwise):
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state('main', {
url: '/',
templateUrl: 'test.html',
controller: 'MainCtrl'
});
})
See that example in action.
NOTE: also, do not mix usage of ui-router and default angular routing:
<script src="vendor/angular-ui-router.js"></script>
<!--<script src="vendor/angular-route.js"></script>-->
Simply use one, or the other. The ui-router, which you've already started to use, would/should be good enough...
Related
I'm building a simple personal contacts management app using AngularJS. I put all my files inside htdocs/angular-contacts/ folder of my Mac machine.
index.html
<!DOCTYPE html>
<html ng-app='ContactsApp'>
<head>
<title>Contacts</title>
<base href='/'></base>
</head>
<body>
<h1>Contacts</h1>
<div ng-view=""></div>
<script src='/angular-contacts/jquery-2.1.3.min.js'></script>
<script src='/angular-contacts/angular.min.js'></script>
<script src='/angular-contacts/angular-route.min.js'></script>
<script src='/angular-contacts/angular-route.min.js.map'></script>
<script src='/angular-contacts/app.js'></script>
<script src='/angular-contacts/controller.js'></script>
</body>
</html>
app.js
angular.module('ContactsApp', ['ngRoute']);
.config(function($routeProvider,$locationProvider){
$routeProvider
.when('/contacts',{
controller: 'ListController',
templateUrl: 'list.html'
});
$locationProvider.html5Mode(true);
});
controller.js
angular.module('ContactsApp')
.controller('ListController',function($scope){
$scope.contacts = [];
})
list.html
<p>List views...</p>
Why I go to http://localhost:8888/angular-contacts/contacts, I got 404 Not Found error.
How to fix this problem? How to load that list.html?
Note:
I'm using MAMP (Apache).
AngularJS: v1.3.14
Angular Route: v1.3.14
That's because
$routeProvider
.when('/contacts',{
controller: 'ListController',
templateUrl: 'list.html'
});
expects the http://localhost:8888/contacts location, not the http://localhost:8000/angular-contacts/contats location.
You should add the prefix in your route declaration, or even better, conifgure the virtual host, so you'll be able to use a real domain, rather than the localhost's sub-catalogue.
I'm using angularJS to build a website and use angular-route library for view of different pages of website. my website is working well but there is a hash tag in url when i move on different views. for removal of hash tag I'm using
$locationProvider.html5Mode(true);
but this is not working on page refresh. My code is given below:-
Index.html
<body data-ng-app="myapp" data-ng-controller="myctrl">
<div data-ng-include=" 'pages/menu.html'"></div>
<div ng-view class="view-animate"></div>
<div data-ng-include=" 'pages/footer.php' "></div>
<body>
app.js
'use-strict'
var tc = angular.module('myapp', ['ngRoute']);
tc.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/home', {
templateUrl: 'pages/home.html',
})
.when('/about', {
templateUrl: 'pages/about.html',
})
.otherwise({
redirectTo: '/home'
})
}]);
Use:-
<base href="/" />
And put this in your head tag :-)
I suggest you to use $stateProvider , $routeProvider not suggest by many Angularjs expert. And $stateProvider have more control over route then $routeprovider.
see
Using $routeProvider with $stateProvider
Make sure you have <!doctype html> at the top of your index.html
I created a basic angular app with ui-router. I am serving partial template from index.html with a script tag but I get this error
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:1337/home.html
Here is my code.
var app = angular.module('smApp', ['ui.router'])
.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('home', {
url: '',
templateUrl: 'home.html',
controller: 'homeCtrl'
})
}])
.controller('homeCtrl', ['$scope', function ($scope) {
$scope.home = 1;
}]);
index.html
<script type="text/script" id="home.html">
<div>Home Page {{home}}</div>
</script>
<body>
<div ui-view></div>
</body>
You need to change type attribute of your script tag that contains template code. For Angular, in order to recognize the template, you need to change type attribute to 'text/ng-template' from 'text/script'
Your index.html should be
<script type="text/ng-template" id="home.html">
<div>Home Page {{home}}</div>
</script>
<div ui-view></div>
newbie to AngularJS here.
I created one AngularJS application using Yeoman, grunt and bower.
The index page contains some style and ng-app and ng-view.
index.html
<html>
<head>
<!-- CSS Imports -->
</head>
<body ng-app="MyApp1">
<div>
//Some divs here to have some styles
<div ng-view></div>
</div>
</body>
<!--importing AgularJS, app.js, controller JS files -->
</html>
app.js
'use strict';
angular.module('MyApp1', [])
.config(function ($routeProvider,$locationProvider) {
$routeProvider
.when('/', {
redirectTo: '/main'
})
.when('/invoice', {
templateUrl: 'views/invoice.html',
controller: 'UploadController'
})
.when('/main', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/login', {
templateUrl: 'views/login.html',
})
.otherwise({
redirectTo: '/main'
});
// $locationProvider.html5Mode(true);
});
angular.module('LoginApp', [])
.config(function ($routeProvider,$locationProvider) {
});
The index page has ng-view that will display invoice.html or main.html. Default is main.html.
main.html
<div class="hero-unit">
<a ng-href="views/login.html" target="_self">Login</a>
<br>
<a ng-href="#invoice">New Document</a>
</div>
Ok. In this main.html, I have two links. Second is a link to invoice. That anyway will display inside index.html ng-view. The controller UploadController belongs to MyApp1 module. And it has separate JS file. It is working fine.
The first link is to another HTML page. Its login.html. It has another ng-app called LoginApp. Both the modules are independent and in diferent pages.
When I click on the first link, it goes to login.html. But in the URL it shows like http://localhost:9000/views/login.html. But I want it to be shown like http://localhost:9000/login, just like for other main.html (http://localhost:9000/#/main). When I edited the link like <a ng-href="#login">Login</a> it is not working.
And also $locationProvider.html5Mode(true); is not working for me.
Put the login.html to same folder like index.html.
I think it's not possible to route to another module. However this route rule for login.html will not working for (external) page.
I am trying to have each item in a list have a button that uses $routeProvider to route to a template. However, I keep getting 404s when I hit the link (it goes to the right address, but no page loads). Any help on getting this code to work would be most appreciated:
angular.module('tipOutput', ['firebase', 'filters'])
.controller('Tips', ['$scope', 'angularFire',
function ($scope, angularFire) {
var ref = new Firebase('https://sitename.firebaseio.com/tips');
angularFire(ref, $scope, "tips");
}])
//routing to secondary pages
.config(['$routeProvider', function($routeProvider, $locationProvider) {
$routeProvider.
when('/tips/:tipId', {template: 'partials/tip-detail.html', controller: 'Tips'}).
otherwise({redirectTo: '/'});
}])
And, in case it helps, here's the code of my template:
<html ng-app="TipOutput">
<body>
<div ng-view></div>
<script type="text/javascript" src="http://static.firebase.com/v0/firebase.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular-resource.min.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.3.0/angularfire.min.js"></script>
<script type='text/javascript' src='https://cdn.firebase.com/v0/firebase-simple-login.js'></script>
<script src="js/app.js"></script>
</body>
</html>
Routes in a single page app are really virtual routes. How does the webserver software know what to do with that url? What are you doing to map this url to the html file that is serving your app? I suspect you might need to setup your httpd so that it understands what is going on.