AngularJS - Navigation between pages if login is successful (with different html pages and controllers)
Helo, I am working on an AngularJS app. I need help with routing. I am trying to navigate to index.html
IF the login is successful (login.html). There are lots of examples about it but I could not get them to work
with my application. Recently, I tried this , but still no luck.
I have 2 html pages; index.html and login.html. Also 2 seperate controller files for them; controller.js and logincontroller.js
Below my logincontroller.js
var myLogin = angular.module('myLogin', )
myLogin.controller('MyLoginController', function($scope, $http)
{
$scope.Login = function(){
$http(
{...
})
.then(
function successCallback(response) {
$scope.loginresponse = response.data;
if($scope.loginresponse=="OK"){
// here go to index page
}
},
function errorCallback(response) {
alert("Failed to login!");
});
}
});
my controller.js(for index.html)
var myApp = angular.module('myApp',[ 'ui.bootstrap.datetimepicker', 'ngclipboard', 'hljs'])
myApp.controller("MyController", function TimeCtrl($scope, $timeout, $filter, $http, $window) {
});
in case needed part of: login.html
<!DOCTYPE html>
<html lang="en" data-ng-app="myLogin">
<meta charset="UTF-8">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="web-admin/libs/angular.js"></script>
<script src="web-admin/controllers/logincontroller.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
...
</head>
<body>
<div data-ng-controller="MyLoginController"> ...
index.html:
<!DOCTYPE html>
<html lang="en" data-ng-app="myApp">
<meta charset="UTF-8">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="web-admin/libs/angular.js"></script>
<script src="web-admin/controllers/controller.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
...
</head>
<body>
<div data-ng-controller="MyController">
I am confused about lots of things; one of them is that where should I put "config"? in controllerjs or logincontrollerjs or in a seperate file.
If in seperate file, should I change data-ng-app in html files etc. Thanks in advance!
javascript angularjs
asked Nov 12 '18 at 8:11
csel
567
add a comment |
Helo, I am working on an AngularJS app. I need help with routing. I am trying to navigate to index.html
IF the login is successful (login.html). There are lots of examples about it but I could not get them to work
with my application. Recently, I tried this , but still no luck.
I have 2 html pages; index.html and login.html. Also 2 seperate controller files for them; controller.js and logincontroller.js
Below my logincontroller.js
var myLogin = angular.module('myLogin', )
myLogin.controller('MyLoginController', function($scope, $http)
{
$scope.Login = function(){
$http(
{...
})
.then(
function successCallback(response) {
$scope.loginresponse = response.data;
if($scope.loginresponse=="OK"){
// here go to index page
}
},
function errorCallback(response) {
alert("Failed to login!");
});
}
});
my controller.js(for index.html)
var myApp = angular.module('myApp',[ 'ui.bootstrap.datetimepicker', 'ngclipboard', 'hljs'])
myApp.controller("MyController", function TimeCtrl($scope, $timeout, $filter, $http, $window) {
});
in case needed part of: login.html
<!DOCTYPE html>
<html lang="en" data-ng-app="myLogin">
<meta charset="UTF-8">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="web-admin/libs/angular.js"></script>
<script src="web-admin/controllers/logincontroller.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
...
</head>
<body>
<div data-ng-controller="MyLoginController"> ...
index.html:
<!DOCTYPE html>
<html lang="en" data-ng-app="myApp">
<meta charset="UTF-8">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="web-admin/libs/angular.js"></script>
<script src="web-admin/controllers/controller.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
...
</head>
<body>
<div data-ng-controller="MyController">
I am confused about lots of things; one of them is that where should I put "config"? in controllerjs or logincontrollerjs or in a seperate file.
If in seperate file, should I change data-ng-app in html files etc. Thanks in advance!
javascript angularjs
asked Nov 12 '18 at 8:11
csel
567
"Recently, I tried this , but still no luck." - the code in the JS bin works, so what is the issue?
– Ziv Weissman
Nov 12 '18 at 8:26
Yes, it is working. For example, since I have two different js files for each page where should I put routing related code ( .config(function ($routeProvider) {} ... ). In which js file (the one for index or login)? Or should I create separate file? This is one of my questions.
– csel
Nov 12 '18 at 8:41
add a comment |
Helo, I am working on an AngularJS app. I need help with routing. I am trying to navigate to index.html
IF the login is successful (login.html). There are lots of examples about it but I could not get them to work
with my application. Recently, I tried this , but still no luck.
I have 2 html pages; index.html and login.html. Also 2 seperate controller files for them; controller.js and logincontroller.js
Below my logincontroller.js
var myLogin = angular.module('myLogin', )
myLogin.controller('MyLoginController', function($scope, $http)
{
$scope.Login = function(){
$http(
{...
})
.then(
function successCallback(response) {
$scope.loginresponse = response.data;
if($scope.loginresponse=="OK"){
// here go to index page
}
},
function errorCallback(response) {
alert("Failed to login!");
});
}
});
my controller.js(for index.html)
var myApp = angular.module('myApp',[ 'ui.bootstrap.datetimepicker', 'ngclipboard', 'hljs'])
myApp.controller("MyController", function TimeCtrl($scope, $timeout, $filter, $http, $window) {
});
in case needed part of: login.html
<!DOCTYPE html>
<html lang="en" data-ng-app="myLogin">
<meta charset="UTF-8">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="web-admin/libs/angular.js"></script>
<script src="web-admin/controllers/logincontroller.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
...
</head>
<body>
<div data-ng-controller="MyLoginController"> ...
index.html:
<!DOCTYPE html>
<html lang="en" data-ng-app="myApp">
<meta charset="UTF-8">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="web-admin/libs/angular.js"></script>
<script src="web-admin/controllers/controller.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
...
</head>
<body>
<div data-ng-controller="MyController">
I am confused about lots of things; one of them is that where should I put "config"? in controllerjs or logincontrollerjs or in a seperate file.
If in seperate file, should I change data-ng-app in html files etc. Thanks in advance!
javascript angularjs
asked Nov 12 '18 at 8:11
csel
567
Helo, I am working on an AngularJS app. I need help with routing. I am trying to navigate to index.html
IF the login is successful (login.html). There are lots of examples about it but I could not get them to work
with my application. Recently, I tried this , but still no luck.
I have 2 html pages; index.html and login.html. Also 2 seperate controller files for them; controller.js and logincontroller.js
Below my logincontroller.js
var myLogin = angular.module('myLogin', )
myLogin.controller('MyLoginController', function($scope, $http)
{
$scope.Login = function(){
$http(
{...
})
.then(
function successCallback(response) {
$scope.loginresponse = response.data;
if($scope.loginresponse=="OK"){
// here go to index page
}
},
function errorCallback(response) {
alert("Failed to login!");
});
}
});
my controller.js(for index.html)
var myApp = angular.module('myApp',[ 'ui.bootstrap.datetimepicker', 'ngclipboard', 'hljs'])
myApp.controller("MyController", function TimeCtrl($scope, $timeout, $filter, $http, $window) {
});
in case needed part of: login.html
<!DOCTYPE html>
<html lang="en" data-ng-app="myLogin">
<meta charset="UTF-8">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="web-admin/libs/angular.js"></script>
<script src="web-admin/controllers/logincontroller.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
...
</head>
<body>
<div data-ng-controller="MyLoginController"> ...
index.html:
<!DOCTYPE html>
<html lang="en" data-ng-app="myApp">
<meta charset="UTF-8">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="web-admin/libs/angular.js"></script>
<script src="web-admin/controllers/controller.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
...
</head>
<body>
<div data-ng-controller="MyController">
I am confused about lots of things; one of them is that where should I put "config"? in controllerjs or logincontrollerjs or in a seperate file.
If in seperate file, should I change data-ng-app in html files etc. Thanks in advance!
javascript angularjs
javascript angularjs
asked Nov 12 '18 at 8:11
csel
567
asked Nov 12 '18 at 8:11
csel
567
asked Nov 12 '18 at 8:11
csel
567
asked Nov 12 '18 at 8:11
csel
567
asked Nov 12 '18 at 8:11
csel
567
567
"Recently, I tried this , but still no luck." - the code in the JS bin works, so what is the issue?
– Ziv Weissman
Nov 12 '18 at 8:26
Yes, it is working. For example, since I have two different js files for each page where should I put routing related code ( .config(function ($routeProvider) {} ... ). In which js file (the one for index or login)? Or should I create separate file? This is one of my questions.
– csel
Nov 12 '18 at 8:41
add a comment |
"Recently, I tried this , but still no luck." - the code in the JS bin works, so what is the issue?
– Ziv Weissman
Nov 12 '18 at 8:26
Yes, it is working. For example, since I have two different js files for each page where should I put routing related code ( .config(function ($routeProvider) {} ... ). In which js file (the one for index or login)? Or should I create separate file? This is one of my questions.
– csel
Nov 12 '18 at 8:41
"Recently, I tried this , but still no luck." - the code in the JS bin works, so what is the issue?
– Ziv Weissman
Nov 12 '18 at 8:26
"Recently, I tried this , but still no luck." - the code in the JS bin works, so what is the issue?
– Ziv Weissman
Nov 12 '18 at 8:26
Yes, it is working. For example, since I have two different js files for each page where should I put routing related code ( .config(function ($routeProvider) {} ... ). In which js file (the one for index or login)? Or should I create separate file? This is one of my questions.
– csel
Nov 12 '18 at 8:41
Yes, it is working. For example, since I have two different js files for each page where should I put routing related code ( .config(function ($routeProvider) {} ... ). In which js file (the one for index or login)? Or should I create separate file? This is one of my questions.
– csel
Nov 12 '18 at 8:41
add a comment |
2 Answers
2
active
oldest
votes
The main issue here is that your modules are not connected.
When declaring the angular.module('myLogin', ), you are telling angular to give you a new module which has no dependencies.
When you then declare angular.module('myApp',[ 'ui.bootstrap.datetimepicker', 'ngclipboard', 'hljs']), you tell angular to create a new module, with some dependencies, but don't supply the 'myLogin' module.
So now you got two modules which don't know about each other.
I recommend you to use one module and reuse it instead. Reuse the 'myApp' for both by just refering to the same instance like angular.module('myApp'), (if you don't pass an array to the module, it will fetch a module instead of creating a new)
Then, to solve your redirect problem. Look at the link you posted. You are missing the ngRoute dependency to the module. When that is injected you can use the $location service and perform $location.path("home"); in the login success callback.
answered Nov 12 '18 at 8:43
Marcus Höglund
9,65852545
Thank you! I am new to Angular. I was having doubts about having two different modules, now I get the issue. So maybe I can only work with one js file? One module and two controllers inside it right?
– csel
Nov 12 '18 at 8:50
@csel yes, I think you should keep it as simple as possible in the begining. Keep it in one file, make everything work and then, if you want, refactor it to different files. First step would be to just copy the link you provided and make that work locally, then take it step by step and make it more advanced :)
– Marcus Höglund
Nov 12 '18 at 8:52
add a comment |
Here is sample code, how to link module and controllers.
app.js
it's main app.js file. you need to config and collect all required information here.
(function() {
'use strict';
var wmApp = angular.module('wmApp', ['ngRoute', 'ngSanitize']);
// it's router, I cannot create separate file because of error message
wmApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: '/login.html',
controllerAs: 'loginCtrl'
})
.otherwise({redirectTo:'/'});
$locationProvider.html5Mode(false);
}]);
// Declare all require variable here, never declare controller files for common usage.
wmApp.run(['$rootScope', function ($rootScope, utilService, apiService) {
$rootScope.headers = {
};
}]);
})();
here is login controller file
In this controller file, there is service is included apiService.
(function() {
'use strict';
var wmApp = angular.module('wmApp');
wmApp.controller('loginCtrl', LoginCtrl);
LoginCtrl.$inject = ['$scope', '$window', '$routeParams', 'apiService'];
function LoginCtrl($scope, $window, $routeParams, apiService) {
}
})();
Here is services file as well as modules file
(function() {
'use strict';
var wmApp = angular.module('wmApp');
angular.module('wmApp').service('apiService', ['$rootScope', '$q', function($rootScope, $q) {
this.apiPostRequest = (paymentId, params) => {
var deferred = $q.defer();
return deferred.promise;
};
}]);
})();
here is main html file
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/">
</head>
<body ng-app="wmApp" class="bgcolor">
<div ng-view=""></div>
<script src="/scripts/app.js"></script>
<script src="/scripts/controllers/login.controller.js"></script>
<script src="/scripts/services/apiService.js"></script>
</body>
</html>
answered Nov 12 '18 at 8:56
PPShein
4,5642380139
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53258083%2fangularjs-navigation-between-pages-if-login-is-successful-with-different-html%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
The main issue here is that your modules are not connected.
When declaring the angular.module('myLogin', ), you are telling angular to give you a new module which has no dependencies.
When you then declare angular.module('myApp',[ 'ui.bootstrap.datetimepicker', 'ngclipboard', 'hljs']), you tell angular to create a new module, with some dependencies, but don't supply the 'myLogin' module.
So now you got two modules which don't know about each other.
I recommend you to use one module and reuse it instead. Reuse the 'myApp' for both by just refering to the same instance like angular.module('myApp'), (if you don't pass an array to the module, it will fetch a module instead of creating a new)
Then, to solve your redirect problem. Look at the link you posted. You are missing the ngRoute dependency to the module. When that is injected you can use the $location service and perform $location.path("home"); in the login success callback.
answered Nov 12 '18 at 8:43
Marcus Höglund
9,65852545
Thank you! I am new to Angular. I was having doubts about having two different modules, now I get the issue. So maybe I can only work with one js file? One module and two controllers inside it right?
– csel
Nov 12 '18 at 8:50
@csel yes, I think you should keep it as simple as possible in the begining. Keep it in one file, make everything work and then, if you want, refactor it to different files. First step would be to just copy the link you provided and make that work locally, then take it step by step and make it more advanced :)
– Marcus Höglund
Nov 12 '18 at 8:52
add a comment |
The main issue here is that your modules are not connected.
When declaring the angular.module('myLogin', ), you are telling angular to give you a new module which has no dependencies.
When you then declare angular.module('myApp',[ 'ui.bootstrap.datetimepicker', 'ngclipboard', 'hljs']), you tell angular to create a new module, with some dependencies, but don't supply the 'myLogin' module.
So now you got two modules which don't know about each other.
I recommend you to use one module and reuse it instead. Reuse the 'myApp' for both by just refering to the same instance like angular.module('myApp'), (if you don't pass an array to the module, it will fetch a module instead of creating a new)
Then, to solve your redirect problem. Look at the link you posted. You are missing the ngRoute dependency to the module. When that is injected you can use the $location service and perform $location.path("home"); in the login success callback.
answered Nov 12 '18 at 8:43
Marcus Höglund
9,65852545
Thank you! I am new to Angular. I was having doubts about having two different modules, now I get the issue. So maybe I can only work with one js file? One module and two controllers inside it right?
– csel
Nov 12 '18 at 8:50
@csel yes, I think you should keep it as simple as possible in the begining. Keep it in one file, make everything work and then, if you want, refactor it to different files. First step would be to just copy the link you provided and make that work locally, then take it step by step and make it more advanced :)
– Marcus Höglund
Nov 12 '18 at 8:52
add a comment |
The main issue here is that your modules are not connected.
When declaring the angular.module('myLogin', ), you are telling angular to give you a new module which has no dependencies.
When you then declare angular.module('myApp',[ 'ui.bootstrap.datetimepicker', 'ngclipboard', 'hljs']), you tell angular to create a new module, with some dependencies, but don't supply the 'myLogin' module.
So now you got two modules which don't know about each other.
I recommend you to use one module and reuse it instead. Reuse the 'myApp' for both by just refering to the same instance like angular.module('myApp'), (if you don't pass an array to the module, it will fetch a module instead of creating a new)
Then, to solve your redirect problem. Look at the link you posted. You are missing the ngRoute dependency to the module. When that is injected you can use the $location service and perform $location.path("home"); in the login success callback.
answered Nov 12 '18 at 8:43
Marcus Höglund
9,65852545
The main issue here is that your modules are not connected.
When declaring the angular.module('myLogin', ), you are telling angular to give you a new module which has no dependencies.
When you then declare angular.module('myApp',[ 'ui.bootstrap.datetimepicker', 'ngclipboard', 'hljs']), you tell angular to create a new module, with some dependencies, but don't supply the 'myLogin' module.
So now you got two modules which don't know about each other.
I recommend you to use one module and reuse it instead. Reuse the 'myApp' for both by just refering to the same instance like angular.module('myApp'), (if you don't pass an array to the module, it will fetch a module instead of creating a new)
Then, to solve your redirect problem. Look at the link you posted. You are missing the ngRoute dependency to the module. When that is injected you can use the $location service and perform $location.path("home"); in the login success callback.
answered Nov 12 '18 at 8:43
Marcus Höglund
9,65852545
answered Nov 12 '18 at 8:43
Marcus Höglund
9,65852545
answered Nov 12 '18 at 8:43
Marcus Höglund
9,65852545
answered Nov 12 '18 at 8:43
Marcus Höglund
9,65852545
9,65852545
Thank you! I am new to Angular. I was having doubts about having two different modules, now I get the issue. So maybe I can only work with one js file? One module and two controllers inside it right?
– csel
Nov 12 '18 at 8:50
@csel yes, I think you should keep it as simple as possible in the begining. Keep it in one file, make everything work and then, if you want, refactor it to different files. First step would be to just copy the link you provided and make that work locally, then take it step by step and make it more advanced :)
– Marcus Höglund
Nov 12 '18 at 8:52
add a comment |
Thank you! I am new to Angular. I was having doubts about having two different modules, now I get the issue. So maybe I can only work with one js file? One module and two controllers inside it right?
– csel
Nov 12 '18 at 8:50
@csel yes, I think you should keep it as simple as possible in the begining. Keep it in one file, make everything work and then, if you want, refactor it to different files. First step would be to just copy the link you provided and make that work locally, then take it step by step and make it more advanced :)
– Marcus Höglund
Nov 12 '18 at 8:52
Thank you! I am new to Angular. I was having doubts about having two different modules, now I get the issue. So maybe I can only work with one js file? One module and two controllers inside it right?
– csel
Nov 12 '18 at 8:50
Thank you! I am new to Angular. I was having doubts about having two different modules, now I get the issue. So maybe I can only work with one js file? One module and two controllers inside it right?
– csel
Nov 12 '18 at 8:50
@csel yes, I think you should keep it as simple as possible in the begining. Keep it in one file, make everything work and then, if you want, refactor it to different files. First step would be to just copy the link you provided and make that work locally, then take it step by step and make it more advanced :)
– Marcus Höglund
Nov 12 '18 at 8:52
@csel yes, I think you should keep it as simple as possible in the begining. Keep it in one file, make everything work and then, if you want, refactor it to different files. First step would be to just copy the link you provided and make that work locally, then take it step by step and make it more advanced :)
– Marcus Höglund
Nov 12 '18 at 8:52
add a comment |
Here is sample code, how to link module and controllers.
app.js
it's main app.js file. you need to config and collect all required information here.
(function() {
'use strict';
var wmApp = angular.module('wmApp', ['ngRoute', 'ngSanitize']);
// it's router, I cannot create separate file because of error message
wmApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: '/login.html',
controllerAs: 'loginCtrl'
})
.otherwise({redirectTo:'/'});
$locationProvider.html5Mode(false);
}]);
// Declare all require variable here, never declare controller files for common usage.
wmApp.run(['$rootScope', function ($rootScope, utilService, apiService) {
$rootScope.headers = {
};
}]);
})();
here is login controller file
In this controller file, there is service is included apiService.
(function() {
'use strict';
var wmApp = angular.module('wmApp');
wmApp.controller('loginCtrl', LoginCtrl);
LoginCtrl.$inject = ['$scope', '$window', '$routeParams', 'apiService'];
function LoginCtrl($scope, $window, $routeParams, apiService) {
}
})();
Here is services file as well as modules file
(function() {
'use strict';
var wmApp = angular.module('wmApp');
angular.module('wmApp').service('apiService', ['$rootScope', '$q', function($rootScope, $q) {
this.apiPostRequest = (paymentId, params) => {
var deferred = $q.defer();
return deferred.promise;
};
}]);
})();
here is main html file
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/">
</head>
<body ng-app="wmApp" class="bgcolor">
<div ng-view=""></div>
<script src="/scripts/app.js"></script>
<script src="/scripts/controllers/login.controller.js"></script>
<script src="/scripts/services/apiService.js"></script>
</body>
</html>
answered Nov 12 '18 at 8:56
PPShein
4,5642380139
add a comment |
Here is sample code, how to link module and controllers.
app.js
it's main app.js file. you need to config and collect all required information here.
(function() {
'use strict';
var wmApp = angular.module('wmApp', ['ngRoute', 'ngSanitize']);
// it's router, I cannot create separate file because of error message
wmApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: '/login.html',
controllerAs: 'loginCtrl'
})
.otherwise({redirectTo:'/'});
$locationProvider.html5Mode(false);
}]);
// Declare all require variable here, never declare controller files for common usage.
wmApp.run(['$rootScope', function ($rootScope, utilService, apiService) {
$rootScope.headers = {
};
}]);
})();
here is login controller file
In this controller file, there is service is included apiService.
(function() {
'use strict';
var wmApp = angular.module('wmApp');
wmApp.controller('loginCtrl', LoginCtrl);
LoginCtrl.$inject = ['$scope', '$window', '$routeParams', 'apiService'];
function LoginCtrl($scope, $window, $routeParams, apiService) {
}
})();
Here is services file as well as modules file
(function() {
'use strict';
var wmApp = angular.module('wmApp');
angular.module('wmApp').service('apiService', ['$rootScope', '$q', function($rootScope, $q) {
this.apiPostRequest = (paymentId, params) => {
var deferred = $q.defer();
return deferred.promise;
};
}]);
})();
here is main html file
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/">
</head>
<body ng-app="wmApp" class="bgcolor">
<div ng-view=""></div>
<script src="/scripts/app.js"></script>
<script src="/scripts/controllers/login.controller.js"></script>
<script src="/scripts/services/apiService.js"></script>
</body>
</html>
answered Nov 12 '18 at 8:56
PPShein
4,5642380139
add a comment |
Here is sample code, how to link module and controllers.
app.js
it's main app.js file. you need to config and collect all required information here.
(function() {
'use strict';
var wmApp = angular.module('wmApp', ['ngRoute', 'ngSanitize']);
// it's router, I cannot create separate file because of error message
wmApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: '/login.html',
controllerAs: 'loginCtrl'
})
.otherwise({redirectTo:'/'});
$locationProvider.html5Mode(false);
}]);
// Declare all require variable here, never declare controller files for common usage.
wmApp.run(['$rootScope', function ($rootScope, utilService, apiService) {
$rootScope.headers = {
};
}]);
})();
here is login controller file
In this controller file, there is service is included apiService.
(function() {
'use strict';
var wmApp = angular.module('wmApp');
wmApp.controller('loginCtrl', LoginCtrl);
LoginCtrl.$inject = ['$scope', '$window', '$routeParams', 'apiService'];
function LoginCtrl($scope, $window, $routeParams, apiService) {
}
})();
Here is services file as well as modules file
(function() {
'use strict';
var wmApp = angular.module('wmApp');
angular.module('wmApp').service('apiService', ['$rootScope', '$q', function($rootScope, $q) {
this.apiPostRequest = (paymentId, params) => {
var deferred = $q.defer();
return deferred.promise;
};
}]);
})();
here is main html file
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/">
</head>
<body ng-app="wmApp" class="bgcolor">
<div ng-view=""></div>
<script src="/scripts/app.js"></script>
<script src="/scripts/controllers/login.controller.js"></script>
<script src="/scripts/services/apiService.js"></script>
</body>
</html>
answered Nov 12 '18 at 8:56
PPShein
4,5642380139
Here is sample code, how to link module and controllers.
app.js
it's main app.js file. you need to config and collect all required information here.
(function() {
'use strict';
var wmApp = angular.module('wmApp', ['ngRoute', 'ngSanitize']);
// it's router, I cannot create separate file because of error message
wmApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: '/login.html',
controllerAs: 'loginCtrl'
})
.otherwise({redirectTo:'/'});
$locationProvider.html5Mode(false);
}]);
// Declare all require variable here, never declare controller files for common usage.
wmApp.run(['$rootScope', function ($rootScope, utilService, apiService) {
$rootScope.headers = {
};
}]);
})();
here is login controller file
In this controller file, there is service is included apiService.
(function() {
'use strict';
var wmApp = angular.module('wmApp');
wmApp.controller('loginCtrl', LoginCtrl);
LoginCtrl.$inject = ['$scope', '$window', '$routeParams', 'apiService'];
function LoginCtrl($scope, $window, $routeParams, apiService) {
}
})();
Here is services file as well as modules file
(function() {
'use strict';
var wmApp = angular.module('wmApp');
angular.module('wmApp').service('apiService', ['$rootScope', '$q', function($rootScope, $q) {
this.apiPostRequest = (paymentId, params) => {
var deferred = $q.defer();
return deferred.promise;
};
}]);
})();
here is main html file
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/">
</head>
<body ng-app="wmApp" class="bgcolor">
<div ng-view=""></div>
<script src="/scripts/app.js"></script>
<script src="/scripts/controllers/login.controller.js"></script>
<script src="/scripts/services/apiService.js"></script>
</body>
</html>
answered Nov 12 '18 at 8:56
PPShein
4,5642380139
answered Nov 12 '18 at 8:56
PPShein
4,5642380139
answered Nov 12 '18 at 8:56
PPShein
4,5642380139
answered Nov 12 '18 at 8:56
PPShein
4,5642380139
4,5642380139
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53258083%2fangularjs-navigation-between-pages-if-login-is-successful-with-different-html%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
"Recently, I tried this , but still no luck." - the code in the JS bin works, so what is the issue?
– Ziv Weissman
Nov 12 '18 at 8:26
Yes, it is working. For example, since I have two different js files for each page where should I put routing related code ( .config(function ($routeProvider) {} ... ). In which js file (the one for index or login)? Or should I create separate file? This is one of my questions.
– csel
Nov 12 '18 at 8:41