EDIT: Solved the problem, seems the '#' character that Angular uses caused the problem. Here are the correct.
Edit after WiRo's answer
(I use grunt for my http-server)
app.js
require('angular/angular.min');
require('./angular-material.min')
require('angular-route/angular-route.min');
var listController = require('./controllers/listcontroller.js');
var authController = require('./controllers/authcontroller.js');
// Create your app
var app = angular.module("advjavascript", ["ngRoute"]);
app.controller('ListController', listController);
app.controller('AuthController', authController);
app.config([
'$routeProvider',
function($routeProvider) {
$routeProvider
.when('/auth', {
templateUrl: 'pages/auth.html',
controller: 'AuthController',
controllerAs: 'auth'
})
.when('/', {
templateUrl: 'pages/home.html',
controller: 'ListController',
controllerAs: 'list'
})
.otherwise({
redirectTo: '/',
controller: 'listController',
controllerAs: 'list'
});
}
]);
authcontroller.js
module.exports = function($scope, $routeParams){
var vm = this;
alert("this");
vm.username = $routeParams.username;
vm.token = $routeParams.token;
console.log("This token: " + vm.token);
vm.data = {
token: vm.token,
username: vm.username
};
};
listcontroller.js
module.exports = function($scope, $routeParams){
var vm = this;
vm.data = {
username: ""
};
console.log(vm.data.username);
};
pages/auth.html
<h1>Logged in!</h1>
<p>Your username is {{auth.data.username}}</p>
Back to page
pages/home.html
<h1>Hello World</h1>
<p>Your username is {{list.data.username}}</p>
log in
index.html
<html lang="en" ng-app="advjavascript">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" href="css/main.css"/>
<link rel="stylesheet" href="css/angular-material.min.css"/>
<title>AdvJavascript</title>
</head>
<body>
<div ng-view></div>
<script src="js/app.js"></script>
</body>
</html>
I have a callback that goes to http://localhost:3000/auth?username=secret&token=secret
It doesn't route to auth.html, heck it doesn't even route to index.html (default page)
Anyone knows what's going on?
Here are the results:
auth route
normal route
There are a couple of things to modify (see comments):
Routing:
app.config([
'$routeProvider',
function($routeProvider) {
$routeProvider
.when('/auth', {
// you used '/pages/auth.html' which may route to the wrong directory
templateUrl: 'pages/auth.html',
controller: 'authController',
// add this if you want to use controllerAs as in your example
controllerAs: 'auth'
})
.otherwise({
redirectTo: '/'
});
}
]);
Controller
Make sure you do not mix using $scope and controllerAs:
module.exports = function($scope, $routeParams){
var vm = this;
alert("this");
// Changing $scope to vm will bind your variables to the controller,
// this is what you need to do when using controllerAs
vm.username = $routeParams.username;
vm.token = $routeParams.token;
console.log("This token: " + vm.token);
vm.data = {
token: vm.token,
username: vm.username
};
};
You may want to use ng-view:
Index.html:
<html lang="en" ng-app="advjavascript">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" href="../css/main.css"/>
<link rel="stylesheet" href="../css/angular-material.min.css"/>
<title>Home</title>
</head>
<body>
<div ng-view></div>
</body>
</html>
auth.html
The auth.html will be included in the ng-view div-element by angularjs as soon as your route changes to '/auth'. Angularjs will also automatically assign the authController to this view.
<h1>Logged in!</h1>
<p>Your username is {{auth.data.username}}</p>
Back to page
Related
I have error like this Error : [$compile] tpload when i try to have clean url from here : https://scotch.io/tutorials/pretty-urls-in-angularjs-removing-the-hashtag
Here is my code
JS:
.config(['$locationProvider', '$routeProvider',
function($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider.when('/', {redirectTo: '/datatables'});
$routeProvider.otherwise({redirectTo: '/page-404'});
$routeProvider.when('/documentation/index', {
templateUrl: 'documentation/index.html'
});
$routeProvider.when('/datatables', {
templateUrl: 'datatables.html'
});
$routeProvider.otherwise({
redirectTo: '/datatables'
});
}
]);
HTML :
<!DOCTYPE html>
<html ng-app="cleanUI">
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Template</title>
<!-- Angular Version Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-route.min.js"></script>
<base href="/">
</head>
Have you any ideas?
Thanks for answers in advance!!!
Your js code have some issues. You have to correct it as this
.config(['$locationProvider', '$routeProvider',
function($locationProvider, $routeProvider) {
$routeProvider.when('/documentation/index', {
templateUrl: 'documentation/index.html'
}).when('/datatables', {
templateUrl: 'datatables.html'
}).when('/page-404', {
templateUrl: 'page-404.html'
});
$routeProvider.otherwise('/page-404');
$locationProvider.html5Mode(true);
}
]);
I am getting error in routing to about page. Home page is loading successfully. I am new to angular. Please help me to do it successfully.
here is the code link
enter code here Plunker Link
find code here
index.html
<!DOCTYPE html>
<head>
<title>Title</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/bootstrap.min.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
</head>
<body ng-app="demo">
<div ng-view></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Js
// Code goes here
var app = angular.module("demo", ['ngRoute']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/home.html',
controller: 'homeController'
}).
when('/about', {
templateUrl: 'partials/about.html',
controller: 'aboutController'
}).
otherwise({
redirectTo: 'partials/404.html'
});
}
]);
app.controller('mainController', function() {});
app.controller('homeController', function($scope, $http, $location){
$scope.login= function() {
$location.path("/home");
}
});
app.controller('aboutController', function($scope, $http) {
$scope.about= function() {
$location.path("/about");
}
});
Correct your references as <script src="main.js"></script> and create partial/home.html. It will work then.
Try to utilize browser developer tool (F12), it will you help to find actual error.
There are several issues with your plunker.
You don't have the partials created in your plunker version. You need to create the files partials/about.html and partials/home.html.
The css/main.css. You have created a style.css in the root folder, but referred css/main.css in index.html.
3.The path to main.js was wrong. The file is in the root folder and you referred it as js/main.js. Please refer it as <script src="main.js"></script>
You have to call the routes from the partials.
You have created the about method in aboutController. But, it should be in the home controller. About controller will only be instantiated when you route to the about.html page.
You have referred an URL '/home' which is not defined in the main.js.
Please find the following working plunker.
https://plnkr.co/edit/APKWvpuTfivua5CovRp7?p=preview
// Code goes here
var app = angular.module("demo", ['ngRoute']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'home.html',
controller: 'homeController'
}).
when('/about', {
templateUrl: 'about.html',
controller: 'aboutController'
}).
when('/login', {
templateUrl: 'login.html',
controller: 'loginController'
}).
otherwise({
redirectTo: 'partials/404.html'
});
}
]);
app.controller('homeController', function($scope, $http, $location){
$scope.login= function() {
$location.path("/login");
}
$scope.about= function() {
$location.path("/about");
}
});
app.controller('aboutController', function($scope, $http) {
$scope.backToHome = function() {
window.history.back();
}
});
app.controller('loginController', function($scope, $http) {
$scope.backToHome = function() {
window.history.back();
}
});
index.html:
<!DOCTYPE html>
<head>
<title>Title</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/bootstrap.min.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body ng-app="demo">
<div ng-view></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.min.js"></script>
<script src="main.js"></script>
</body>
</html>
I'm trying to create a login/signup site in order to learn how to separate controllers and partial views, but I'm not sure why my 'LoginController' isn't being injected. Feel free to provide any other feedback.
app.js
angular.module('Registration', ['ngRoute'])
.config(['$routeProvider', ($routeProvider) => {
$routeProvider
.when('/login', {
templateUrl: 'app/login/login.html',
controller: 'LoginController'
})
.otherwise({ redirectTo: '/login' });
}]);
LoginController.js
angular.module('Registration')
.controller('LoginController', ['$scope', ($scope) => {
$scope.message = 'Does this work?';
}]);
login.html
<div class="col-md-offset-3 col-md-6">
{{ message }}
</div>
index.html
<!doctype html>
<html ng-app="Registration">
<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>Sup?</title>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/styles.css">
</head>
<body>
<div class="container">
<div class="row">
<div ng-view></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/angular.min.js"></script>
<script src="assets/js/angular-route.min.js"></script>
<script src="app/app.js"></script>
<script src="app/login/LoginController.js"></script>
</body>
</html>
server.js
var express = require('express');
var app = express();
app.use(express.static('./public'));
app.listen(3000, () => {
console.log('Listening on port 3000.');
});
Directory Structure
Turns out you can't use an arrow function in the controller! Totally didn't mean to answer my own question.
Found the answer here: https://github.com/angular/angular.js/issues/14814
Just try to reach to your login route like http://localhost:8080/#/login
I am doing an angularjs application which was generated by web storm.
I tried to use html5 model pretty url (without # on url).It is not working.The url with # is working fine.
Here are my workouts
app.js
var app = angular.module('MyApp', [
'ngRoute',
'ngCookies',
'MyApp.login',
'MyApp.services',
'MyApp.AuthenticationService',
'headroom',
'angular-loading-bar',
'angularSoundManager',
'updateMeta'
]).
config(['$routeProvider','$locationProvider', function ($routeProvider,$locationProvider) {
$routeProvider.when('/login', {templateUrl: 'user/login.html', controller: 'loginCtrl'});
$routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
$routeProvider.otherwise({redirectTo: '/login'});
// configure html5 to get links working on node-webkit
if(window.history && window.history.pushState){
//$locationProvider.html5Mode(true); will cause an error $location in HTML5 mode requires a tag to be present! Unless you set baseUrl tag after head tag like so: <head> <base href="/">
// to know more about setting base URL visit: https://docs.angularjs.org/error/$location/nobase
// if you don't wish to set base URL then use this
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}
}])
index.html head section
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MyApp</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="content/images/favicon.png" type="image/x-icon"/>
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="app.css">
<link rel="stylesheet" href="bower_components/angular-loading-bar/build/loading-bar.min.css">
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
<base href="/">
</head>
login.js
'use strict';
angular.module('MyApp.login', ['ngRoute'])
.controller('loginCtrl', ['$scope', '$location', '$http', 'MyAppSettings', 'apiService','AuthenticationService', function ($scope, $location, $http, MyAppSettings, apiService,AuthenticationService) {
(function initController() {
alert('d');
// reset login status
//AuthenticationService.ClearCredentials();
})();
function _login(username, password) {
AuthenticationService.Login(username, password, function (response) {
if (response.success) {
} else {
alert('error')
}
});
}
$scope.login=_login;
}]);
Can anyone please help?Thanks in advance.
I'm using AngularJS 1.4.7 for a web application which works completely fine on the desktop site. However when I load the page on my phone using Chrome the webpage doesn't load any of the routing that should be taken care of by the ngRoute component.
The header.php
<?php ob_start(); ?>
<!DOCTYPE html>
<html lang="en-ca" ng-app="ledgerFeed">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Online Ledger</title>
<script src="/res/jQuery.js"></script>
<link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="/bootstrap/css/bootstrap-theme.css" />
<script src="/bootstrap/js/bootstrap.min.js"></script>
<base href="/ledger/">
<script src="https://code.angularjs.org/1.4.7/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.7/angular-route.min.js"></script>
<script src="app.js"></script>
<script src="fetcher.js"></script>
<script src="accountController.js"></script>
<script src="entryController.js"></script>
</head>
<body>
The app.js
(function() {
var app = angular.module("ledgerFeed", ["ngRoute"]);
app.config(function($routeProvider, $locationProvider) {
$routeProvider
// .when("/", {
// templateUrl: "accountlist.php",
// controller: "accountController"
// })
.when("/accounts", {
templateUrl: "accountlist.php",
controller: "accountController"
})
.when("/account/:accountID", {
templateUrl: "entrylist.php",
controller: "entryController"
})
.otherwise({ redirectTo: "/accounts" });
// $locationProvider.html5Mode(true);
});
})();
Does anyone know what I might be doing wrong ?