I have a problem with the AngularJS routing: I don't get any feedback of the page. No errors or view-switches.
I checked my implementation of the module, but it's declared in the right way. Then I searched for typos such as templateURL, but I didn't find any. I also tried to use ng-href instead of href in the list, but then the links weren't clickable anymore.
Here is my plunker.
And my code:
Created my navigation:
<body ng-app="Productportfolio">
<ul>
<li>
Home
</li>
<li>
<a href='#/privat'>Log in</a>
</li>
</ul>
<ng-view></ng-view>
<!--own js -->
<script src="app.js"></script>
<!--Controller -->
<script src="ProductCtrl.js"></script>
<!--Services -->
<!--Direktives-->
</body>
Made the templates:
//home.html
<div>
<h1> Home </h1>
</div>
//private.html
<div>
<h1> Private</h1>
</div>
Declared a Angular module:
angular.module('Productportfolio', ['ngRoute'])
Added the $routeProvider to my config:
angular.module('Productportfolio', ['ngRoute', 'ProductService', 'ProductCtrl'])
.config(['$routeProvider, $locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider
.when('/home', {
templateUrl: 'home.html',
controller: 'ProductCtrl'
})
.when('/private', {
templateUrl: 'private.html',
controller: 'ProductCtrl'
})
.otherwise({
redirectTo: '/home',
controller: 'ProductCtrl'
});
$locationProvider.hashPrefix('!');
}]);
In your Plunker, there were some issues related to imports. To make it easy, I simply removed both jQuery and Bootstrap. I also put all your modules in a single app.js file.
There were some errors in your html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<!--AngularJS-->
<script data-require="angularjs#1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<script data-require="angular-route#1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular-route.js"></script>
</head>
<body ng-app="Productportfolio">
<ul>
<li>
<a ng-href="#home">Home</a>
</li>
<li>
<a ng-href="#private">Private</a>
</li>
</ul>
<ng-view></ng-view>
<!--own js -->
<script src="app.js"></script>
</body>
</html>
Import Angular BEFORE ngRoute or any other module
Use ng-href='#routeName' or, otherwise
And in your js:
var myApp = angular.module('Productportfolio', ['ngRoute']);
myApp.controller('ProductCtrl', ['$scope',function ($scope) {
var vm = this;
}]);
myApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'home.html',
controller: 'ProductCtrl'
})
.when('/private', {
templateUrl: 'private.html',
controller: 'ProductCtrl'
})
.otherwise({
redirectTo: '/home',
controller: 'ProductCtrl'
});
}]);
You need to inject only external modules in your app module, not all controller, services etc
Notice that, to make it easy, I removed also your Service since you did not share it and it was useful.
Last but not least, if you want to use $locationProvider.hashPrefix('!'); to use hashbangs, you need to add <base href="/" /> at the end of your head.
For some reason, plunker does not allow me to do that, but I'm sure you'll get it to work on your version.
Here You can find the working plunker reproducing your application.
Hope I've been helpful.
The remaining and not visible problem is here :
angular.module('Productportfolio', ['ngRoute', 'ProductService', 'ProductCtrl'])
.config(['$routeProvider, $locationProvider',
config() function of module object takes as parameter, a array of strings and not a string with "," as separator char inside it.
See example and doc here :
https://docs.angularjs.org/guide/providers#provider-recipe
So, it should be :
angular.module('Productportfolio', ['ngRoute', 'ProductService', 'ProductCtrl'])
.config(['$routeProvider', '$locationProvider',
Update :
But in fact, in your case, it works even without precising the array :
angular.module('Productportfolio', ['ngRoute', 'ProductService', 'ProductCtrl'])
.config(
I updated the plunker and the app.js with both versions. I have the impression that the array is not mandatory (any longer). So, it seems better to ignore that parameter, especially, if with bad value, it may create side-effects.
Here the plunker with corrections (ordered lib, typos and config function called) :
http://plnkr.co/edit/NTn6Zmav5RX4V8zgHPOG?p=preview
I have removed $locationProvider.hashPrefix('!') as not suitable for the url you are using. See #AndreaM16 answer for that.
Besides, you have not declared your service you want to use in your controller.
app.js
angular.module('Productportfolio', ['ngRoute'])
.config(['$routeProvider', '$locationProvider',
function ($routeProvider, $locationProvider) {
$routeProvider
.when('/home', {
templateUrl: 'home.html',
controller: 'ProductCtrl'
})
.when('/private', {
templateUrl: 'private.html',
controller: 'ProductCtrl'
})
.otherwise({
redirectTo: '/home',
controller: 'ProductCtrl'
});
}]
);
or app.js without the array parameter in config function :
angular.module('Productportfolio', ['ngRoute'])
.config(
function ($routeProvider, $locationProvider) {
$routeProvider
.when('/home', {
templateUrl: 'home.html',
controller: 'ProductCtrl'
})
.when('/private', {
templateUrl: 'private.html',
controller: 'ProductCtrl'
})
.otherwise({
redirectTo: '/home',
controller: 'ProductCtrl'
});
// $locationProvider.hashPrefix('!');
}
);
index.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<!--Bootstrap-->
<script data-require="jquery#*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script><!-- Tether for Bootstrap -->
<link data-require="bootstrap#*" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
<script data-require="bootstrap#*" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
<!--AngularJS-->
<script data-require="angularjs#1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<script data-require="angular-route#*" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular-route.js"></script>
<!--own js -->
<script src="app.js"></script>
<!--Controller -->
<script src="ProductCtrl.js"></script>
<!--Services -->
<!--Direktives-->
</head>
<body ng-app="Productportfolio">
<ul>
<li>
Home
</li>
<li>
Log in
</li>
</ul>
<div ng-view></div>
</body>
</html>
The order of loading java script files is very important. Load in the following order:
<link data-require="bootstrap#*" data-semver="4.0.0-alpha.2" rel="stylesheet"
href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
<script data-require="jquery#*" data-semver="3.0.0"
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script>
<script data-require="bootstrap#*" data-semver="4.0.0-alpha.2"
src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
<!--AngularJS-->
<script data-require="angularjs#1.5.8" data-semver="1.5.8"
src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<script data-require="angular-route#*" data-semver="1.5.8"
src="https://code.angularjs.org/1.5.8/angular-route.js"></script>
It means that you are loading Bootstrap.js files, but Bootstrap cannot work without jQuery library. So it means you should load jQuery at first, then Bootstrap.js. And other libraries should be reordered(I've shown in an example above).
In addition, you can use Console in your browser to see whether there are errors and what errors you have.
Related
Im having trouble displaying my routed html in index.html. I am new to angular I've been trying several approaches in displaying the map. Eventually I want to interact with the map and put pointers on it, but I need to know how to display it first. Also the console is not printing anything so I don't know what is going on.
Directory
RestuarantRouter
--client
----controllers
------home.js
----vendors
------angular-google-maps.min.js
------angular-messages.js
------angular-route.js
------angular.js
----views
------home.html
----app.js
----index.html
index.html
<!doctype html>
<html ng-app="RestaurantRouter">
<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>RestaurantRouter</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/paper/bootstrap.min.css">
<link rel="stylesheet" href="//code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<ul class="nav navbar-nav">
<i class="ion-wineglass"></i> Restaurant Router
<li>Home</li>
</ul>
</div>
</div>
<div ng-view></div>
<script src="vendors/angular.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=myKey-8&libraries=places"></script>
<script src="vendors/angular-route.js"></script>
<script src="vendors/angular-messages.js"></script>
<script src="app.js"></script>
<script src="controllers/home.js"></script>
</body>
</html>
home.js
angular.module('RestaurantRouter', [])
.controller('HomeCtrl', function ($scope) {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(40.0000, -98.0000),
mapTypeId: google.maps.MapTypeId.TERRAIN
}
$scope.map = new google.map.Map(document.getElementById('map'), mapOptions);
});
app.js
angular.module('RestaurantRouter', ['ngRoute', 'ngMessages'])
.config('$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/home.html',
controller: 'HomeCtrl'
})
.otherwise({ redirectTo: '/'});
});
home.html
<div class="container">
<div class="jumbotron">
<h1>Hello</h1>
<div id="map">{{name}}</div>
</div>
</div>
If you use inline annotation, then you have to enclose your config dependencies and function in []:
.config(['$routeProvider', function ($routeProvider) {
console.log('çonfig');
$routeProvider
.when('/', {
templateUrl: 'home.html',
controller: 'HomeCtrl'
})
.otherwise({
redirectTo: '/'
});
}])
otherwise, like you did at the controller:
.config(function ($routeProvider) {
console.log('çonfig');
$routeProvider
.when('/', {
templateUrl: 'home.html',
controller: 'HomeCtrl'
})
.otherwise({
redirectTo: '/'
});
})
In my Javascript file I have the following code:
var app = angular.module('allApps',['ngRoute', 'ui.bootstrap']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
template: ''
})
.when('/user', {
templateUrl: 'pages/user.html'
})
.when('/gallery', {
templateUrl: 'pages/gallery.html'
})
.when('/contacts', {
templateUrl: 'pages/contacts'
})
.otherwise({
redirectTo: '/'
});
}]);
Now, through ng-route I have another page called user.html that is simple this:
<div ng-controller = "Ctrl2">
{{user.name}}
</div>
<script type="text/javascript">
angular.module('allApps').controller('Ctrl2',function($scope){
$scope.user={name:"Jim", lastname:"Smith"};
});
</script>
In my HTML file I have the following code:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.1.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src ="js/script.js"></script>
<link href="css/style.css" rel="stylesheet">
But it doesn't work. Error:
Error: [ng:areq] http://errors.angularjs.org/1.4.8/ng/areq?p0=Ctrl2&p1=not%20a%20function%2C%20got%20undefined
G/<#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:6:416
qb#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:22:131
Qa#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:22:218
Xe/this.$get</<#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:80:210
w#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:60:177
D#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:61:30
g#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:55:105
K/<#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:54:249
ngViewFillContentFactory/<.link#https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.js:986:7
ea#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:73:293
D#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:62:190
g#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:55:105
K/<#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:54:249
R/<#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:56:79
k#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:60:377
update#https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.js:936:25
lf/this.$get</r.prototype.$broadcast#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:136:157
commitRoute/<#https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.js:619:15
f/<#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:119:129
lf/this.$get</r.prototype.$eval#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:133:309
lf/this.$get</r.prototype.$digest#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:130:404
lf/this.$get</r.prototype.$apply#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:134:76
g#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:87:442
T#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:92:50
Uf/</w.onload#http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:93:78
<div class="ng-scope" ng-view="">
What am I doing wrong?
Thanks in advance.
You can't add controllers after angular is already bootstrapped, unless you use some kind of fancy lazy-loading. Therefore, adding a controller from a script block on a view is just not going to work.
You can have multiple controllers in differenct script files. But the script file should copile first before you start rendering the view.
Try binding your controller to the template view in the routes config
var app = angular.module('allApps',['ngRoute', 'ui.bootstrap']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
template: '',
controller: 'Ctrl1'
})
.when('/user', {
templateUrl: 'pages/user.html',
controller: 'Ctrl2'
})
.when('/gallery', {
templateUrl: 'pages/gallery.html',
controller: 'Ctrl3'
})
you are not closing your first function well. It should
var app = angular.module('allApps',['ngRoute', 'ui.bootstrap']);
app.controller('Ctrl1',[ '$scope', function ($scope){
...
}]);
I have a problem when I try to use the $routeProvider.
It just doesn't work at all and I don't see any problems :
var app = angular.module('app', ['ngStorage','ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: '/index.html',
controller: 'authCtrl'
})
.when('/dashboard', {
templateUrl: '/tpl/dashboard.html',
controller: 'mainCtrl'
})
.otherwise({
redirectTo: '/'
});
}]);
Here is index.html :
<html>
<head>
<title>Authenticate | BulbThings</title>
<script src="angular/angular.min.js"></script>
<script src="angular/ngStorage.min.js"></script>
<script src="angular/angular-route.min.js"></script>
<script src="js/build/app.min.js"></script>
</head>
<body ng-app="app">
<div ng-show="authenticate">
<span ng-cloak ng-show="addr" id="address">{{address}}</span>
<input type="mail" ng-model="email" placeholder="Email"><br />
<input type="password" ng-model="password" placeholder="Password"><br />
<button ng-click="auth.connect(email, password)" ng-model="signin">Sign in</button><br/><br/>
</div>
<p>{{error}}</p>
</body>
</html>
I set $scope.authenticate = true in the controller, and when I load the page it doesn't show up.
When I try /dashboard it returns me Cannot GET /dashboard.
I can't see what is going wrong I hope you can help me !
Thank you.
2 things, first you need the ng-view to render the view
<div ng-view=""></div>
And second, if you are getting "Cannot GET /dashboard" is because in angular the routes are in the hash, example:
yourdomain.com/#/dashboard, and not yourdomain.com/dashboard. So here you have a link if you want to go to dashboard:
<a ng-href="#/dashboard">Dashboard</a>
You are missing tag with ng-view directive.
I had a similar issue, cost me days of searching. The href was incorrect, coudln't make it work with "#home" or "home"
Here is my working code :
<html ng-app="app">
<head>
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<title>Testing</title>
</head>
<body>
home
about
<div ng-view="">
</div>
<script>
var app = angular.module('app', ['ngRoute'])
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'views/home.html'
})
.when('/about', {
templateUrl: 'views/about.html'
})
}]);
</script>
I have shown a simplified version of my problem below:
The directive 'name' is not understood when it is in the view 'loginView.html', however it works fine when It's in the main page 'index.html'
loginView.html
<p>Welcome : {{name}}</p>
<input type="text" data-ng-model="name"><br>
<button type="submit" data-ng-click="loginUser()">Login</button>
index.html
<!doctype html>
<html data-ng-app="vla">
<head>
<title>Video Learning application</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div class = "navBar">
<div class = "leftButton"></div>
<div class = "title">VLA</div>
<div class = "rightButton"></div>
</div>
<div data-ng-view=""></div>
<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="controllers/controllers.js"></script>
<script src="app.js"></script>
</body>
</html>
app.js
var app = angular.module('vla', ['ngRoute']);
app.config(function ($routeProvider){
$routeProvider
.when('/view1',
{
controller: 'controllers/controllers.js',
templateUrl: 'partials/loginView.html'
})
.otherwise({ redirectTo: '/view1' });
});
controller.js
app.controller('loginController', function ($scope)
{
$scope.loginUser = function () {
alert("test");
}
});
The {{name}} just prints itself out when in the view 'loginView', but works fine and prints he contents of the input field when placed into index.html.
I'm very new at this and would appreciate any help.
Thanks in advance
You should write controller name but not path in controller option of routeProvider:
$routeProvider
.when('/view1',
{
controller: 'loginController',
templateUrl: 'partials/loginView.html'
})
.otherwise({ redirectTo: '/view1' });
And attach file with controller (controllers/controllers.js) with tag <script>.
Just realised the problem was the ordering of the script declarations in the index.php page
The app reference should come before the controller:
<script src="app.js"></script>
<script src="controllers/controllers.js"></script>
I'm trying to implement the solution offered by ProLoser in link
in my Plunk. My problem is that whenever I press a link instead of opening in a sub-view below the links it overrides the entire view.
I need to understand how to solve this problem.
My flow is like that: index.html -> content.html (ng-view) -> link1/2/3.html (using ng-include).
My layout:
Index.html:
<!DOCTYPE html>
<html ng-app="webApp">
<head>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.0.7" data-semver="1.0.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
<script src="app.js"></script>
</head>
<body>
<header>This is header</Header>
<div class="content" ng-view>
</div>
</body>
</html>
content.html:
<div>
<h1>This is Content brought to you by ngView</h1>
<br>
link1
link 2
link 3
<ng-include src="'/sub/'+link + '.html' "></ng-include>
</div>
My code:
var webApp = angular.module('webApp', []);
//router logic
webApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'content.html',
controller: 'MainCtrl'
})
.when('/sub/:link', {
controller: 'LinkCtrl'
})
.otherwise({redirectTo: '/'});
}]);
//controllers
webApp.controller ('MainCtrl', function ($scope, $routeParams) {
$scope.link = $routeParams.link
});
You don't have a LinkCtrl to handle the links, it should work if you change:
.when('/sub/:link', {
controller: 'LinkCtrl'
})
to
.when('/sub/:link', {
templateUrl: 'content.html',
controller: 'MainCtrl'
})
And edit the line:
<ng-include src="'/sub/'+link + '.html' "></ng-include>
to:
<ng-include src="link + '.html'"></ng-include>