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>
Related
The ng-view is not showing pages and routing doesn't seem to work but it is loading the angular-route.min.js in the browsers console/network.
The file structure is folders -> css, fonts, js, pages. there are 2 files in the root which are app.js and index.html and inside the pages folder are 2 more files which are the main.html and second.html which are supposed to be added to the ng-view parts but wont load.
When clicking on a link for the main.html content it comes back with http://127.0.0.1/main and completely ignores the /pages folder
**updated code, got the first page to load its content but the second one doesn't and there are no errors in the console so assumably I have the wrong href path?
Header Scripts
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="//code.angularjs.org/1.6.1/angular-route.min.js"></script>
<script src="app.js"></script>
HTML
<div class="row">
Main Content
Second Content
</div>
<div class="row">
<div class="col-md-12">
<div ng-view></div>
</div>
</div>
<hr>
</div>
JS
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateURL: 'pages/main.html',
controller: 'mainController'
})
.when('/second', {
templateURL: 'pages/second.html',
controller: 'secondController'
})
});
myApp.controller('mainController', ['$scope', function($scope) {
}]);
myApp.controller('secondController', ['$scope', '$log', function($scope, $log) {
}]);
Use templateUrl instead of templateURL.
In your html use #/main.
Don't use tow ng-views
JS code
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider) {
$routeProvider
.when('/main', {
templateUrl: 'main.html',
controller: 'mainController'
})
.when('/second', {
templateUrl: 'second.html',
controller: 'secondController'
})
});
myApp.controller('mainController', ['$scope', function($scope) {
$scope.name = "world"
}]);
myApp.controller('secondController', ['$scope', '$log', function($scope, $log) {
}]);
HTML code
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="//code.angularjs.org/1.4.0/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="mainController">
<p>Hello {{name}}!</p>
<div class="row">
Main Content
Second Content
</div>
<div class="row">
<div class="col-md-12">
<div ng-view></div>
</div>
</div>
<hr>
</body>
</html>
Here is working plunker
EDIT
Please note I have used angular version 1.4.0. If you want to use angular 1.6.1 they have changed default hash-prefix used for $location hash-bang URLs it is now ('!') instead of ('')
So you need to add this in your config phase.
myApp.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);
now it will work with angular 1.6.1 as well
.when('/main', {
templateURL: 'pages/main.html',
controller: 'mainController'
})
or
use this url to access main page :
http://127.0.0.1/
It should work, as you have not set routing for main in config.
I'm trying to create a single page app with angularjs to which I'm very new. I've pieced together this code based on a number of tutorials, but it doesn't work and I'm not quite sure why. I'm not getting any errors that I can see. The intention is to have the home.html file load on the initial load. Then based on the routes, load in different templates.
script.js
angular.module("myApp", ['ngRoute']).config(['$routeProvider', function($routeProvider){
$routeProvider.when("/view", {
templateUrl: "/view.html",
controller: "ViewCtrl"
})
.otherwise({
templateUrl: "/home.html",
controller: "HomeCtrl"
});
}]);
angular.module("myApp").controller("ViewCtrl", ['$scope', function($scope){
$scope.message = "In the view";
}]);
angular.module("myApp").controller("HomeCtrl", ['$scope', function($scope){
$scope.message = "At home";
}]);
angular.element(document).ready(function(){
angular.bootstrap(document, ['myApp']);
})
index.html
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.0-beta.4" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
<script data-require="angular-route#1.4.0-beta.4" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div id="content" ng-app="myApp"></div>
</body>
</html>
home.html
<div ng-controller="HomeCtrl">
{{message}}
</div>
view.html
<div ng-controller="ViewCtrl">
{{message}}
</div>
http://plnkr.co/edit/eLZQueX3OyPCXo2tQGWS
Couple of mistakes in your code. Please look the below changes
1) Add ng-view directive for loading partial content
<div id="content" ng-app="myApp"></div>
should be
<div id="content" ng-app="myApp" ng-view></div>
2) Template url not starts with slash (/)
templateUrl: "/view.html",
templateUrl: "/home.html",
Should be
templateUrl: "view.html",
templateUrl: "home.html",
3) No need to bootstrap the app manually, ng-app automatically do this.
4) No need to mention the controller in router level if you mentioned in template (vice versa)
Working Demo: http://plnkr.co/edit/n19eCFwRc9WQUt6SskPU?p=preview
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>
I have 4 files:
index.html
logic.js
controller.js
homepage.html
index.html
<html ng-app="sample">
<head>
<script src="angular.js"></script>
</head>
<body>
<div>
<div ng-view></div>
</div>
<script src="controller.js"></script>
<script src="logic.js"></script>
</body>
</html>
logic.js
var myapp = angular.module('sample',[]);
myapp.config(function($routeProvider)
{
$routeProvider
.when('/',
{
controller:homepageCtrl,
templateUrl:'homepage.html'
});
});
controller.js
function homepageCtrl($scope){
$scope.name = "ROHIT";}
homepage.html
{{name}}
homepage.html is loading and being displayed correctly by the route but the controller is not being called here when homepage.html is loaded into index.html.
Kindly help me out with this.
Thanks
You didn't defined controller in HTML.
Add this line
<div ng-controller = "homepageCtrl">
Suppose it should be in homepage.html:
<div ng-controller = "homepageCtrl">
{{name}}
</div>
In addition, wrap your controller name with ' logic.js
[EDIT]
Add $inject to routeProvider:
myapp.config(["$routeProvider",
function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: 'homepage.html',
controller: 'homepageCtrl'
});
}
]);
Controller name must be pass to $routeProvider as a string :
$routeProvider
.when('/',
{
controller:'homepageCtrl',
templateUrl:'homepage.html'
});