I am using angular js and I am trying to use route provider to load multiple html pages on a single page application. However I declared my module,
controller and in my html have a button that sends to the controller to redirect the html to the new partial.
What am I doing wrong?
PS. I'm not sure how the imports work as in if I use it in one html do I get it in another? As well why can I only import one module into one file
I get an injector error if I import it into two separate HTML files.
//module.js
var mainM = angular.module('mainM', ['ngRoute', 'ngResource']);
mainM.config(["$routeProvider"], function($routeProvider))
{
$routeProvider
.when('/',
{
controller: "homeController",
templateUrl : 'index.html'
})
.when('/signIn',
{
controller: "controllSignIn",
templateUrl : 'partials/MainPage/signIn.html'
})
.when('Website/index.html',
{
controller: "controllSignUp",
templateUrl : 'partials/MainPage/signUp.html'
})
.when('/newProject',
{
controller: "controllNewProejct",
templateUrl : 'partials/MainPage/newProject.html'
})
}
//End of config routing -------------------------------------------------------
//Controllers
mainM.controller('controllSignUp', function($scope)
{
//Submit Data for sign up
$scope.credentials = [
{word: "Testing"},
{word: "Hello"}
]
$scope.changeView = function ()
{
$location.path('/partials/MainPage/signUp.html');
//$scope.uname += "123";
alert('called');
};
});
<!DOCTYPE html>
<!-- Sign up-->
<html lang = "en" ng-app ="mainM">
<head>
<title>Project Buddy</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.js"></script>
<script src="/scripts/module.js"></script>
<link rel="stylesheet" href="css/signUp.css" />
</head>
<body data-ng-app = "mainM">
<div data-ng-controller="controllSignUp">
<center>
<!-- Sign Up -->
<form action = "http://www.google.com/formsubmission" method = "POST">
<label>Username:</label>
<input type="text" ng-model="uname" placeholder="Enter username" />
</br>
<label>Email Address:</label>
<input type="text" ng-model="ename" placeholder="Enter email address" />
</br>
<label>Password:</label>
<input type="password" ng-model="psw1" placeholder="Enter Password" />
</br>
<label>Confirm Password:</label>
<input type="password" ng-model="psw2" placeholder="Enter Password" />
<button type="button" ng-click="signUpUser()">Sign Up</button>
</form >
</center>
</div>
</body>
</html>
<!DOCTYPE html>
<!-- index -->
<html lang = "en">
<head>
<title>Project Buddy</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.js"></script>
</head>
<body>
<!-- Drop down menu -->
<div id = "dropDown" ng-controller = "controllSignUp">
<button id = "SignUp" ng-click="changeView()">Sign Up</button><br/>
</div>
</body>
</html>
Related
I'm getting the following error on the chrome console:
The controller with the name 'registerCtrl' is not registered.
for some reason, my registerCtrl is not being recognized when routing to the root or /register.
for some reason, my registerCtrl is not being recognized when routing to the root or /register.
Index.html
<html ng-app="testApp">
<head>
<base href="/">
<title></title>
<link href="Content/bootstrap.css" rel="stylesheet" />
<script src="Scripts/jquery-3.2.1.min.js"></script>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="app/app.js"></script>
<script src="app/register/registerCtrl.js"></script>
<script src="app/adminDashBoard/adminDashBoardCtrl.js"></script>
<script src="app/services/hubProxy.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="app/directives/alerts/alertDir.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
app.js(boostrap)
(function () {
var app = angular.module('testApp', ["ngRoute"]);
app.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when("/", {
templateUrl: "/app/register/register.html",
controller: 'registerCtrl'
})
.when("/register", {
templateUrl: "/app/register/register.html",
controller: 'registerCtrl'
})
.when("/adminDashBoard", {
templateUrl: "/app/adminDashBoard/adminDashBoard.html",
controller:'adminDashboardCtrl'
})
});
})();
registerCtrl
(function () {
var registerController = function ($scope, hubProxy) {
var hub = hubProxy("", "UserRegisterHub");
$scope.registerUser = function () {
// call hub and pass these details
if ($scope.userName !== "" && $scope.emailAddress !== "") {
hub.invoke("RegisterUser", function (result) {
// confirm user use boostrap alert
$scope.showAlert = true;
});
}
}
$scope.userName = "yoyoy";
$scope.email = "";
};
angular.module("testApp").controller('RegisterCtrl', registerController);
})();
register.Html
<div>
<a ng-href="adminDashBoard">Admin Dashboard</a>
<alert showAlert="true"></alert>
<label>{{userName}}</label>
<form name="register">
<div>
<label>Name</label>
<input type="text" required="" ng-model="userName" />
</div>
<div>
<label>Email</label>
<input type="text" required="" ng-model="email" />
</div>
<div>
<input type="submit" ng-click="registerUser()" value="submit" />
</div>
</form>
</div>
Any ideas? thanks
I have an angularjs application using ui-router, when i access the following URL http://localhost:63342/UIRouter/customlogin, as per the ui-route configured it has to display the customlogin.html page but its not, it gives 404 error page
in the above url UIRouter is the application name and /customlogin is the state's url.
could somebody help me in getting this solved...please
below is the plnkr url
https://plnkr.co/edit/SPOr9IUWWSAIxNbfnBox?p=preview
below are my files
baseApp.js
angular.module('baseApp',['baseApp.routes']);
baseApp.routes.js
angular.module('baseApp.routes',['ui.router'])
.config(['$stateProvider','$urlRouterProvider','$httpProvider',function($stateProvider,$urlRouterProvider,$httpProvider){
console.log("in view");
$stateProvider
.state("login",{
url:'/customlogin',
templateUrl:'customlogin.html',
controller:'ContactLoginCtrl'
})
$urlRouterProvider.otherwise("/customlogin");
}]) ;
ContactLoginCtrl.js
angular.module('baseApp')
.controller('ContactLoginCtrl', ['$scope',function($scope){
console.log("in the controller")
}])
customlogin.html
<html lang="en" ng-app="baseApp">
<body>
<form name="contactLogin" ng-controller="ContactLoginCtrl" ng-submit="authenticate(userModel)">
<label for="name" >UserName:</label>
<input type="text" ng-model="userModel.username" /></br>
</br>
<label for="password" >PassWord: </label>
<input type="password" ng-model="userModel.password" />
</br>
</br>
<button type="submit" name="Login" >Login</button>
</form>
<script src="angular.min.js"></script>
<script src="angular-ui-router.min.js"></script>
<script src="baseApp.js"></script>
<script src="baseApp.routes.js"></script>
</body>
</html>
Among other adjustments, the most important is - to have a target for states. We need:
<div ui-view></div>
There is adjusted and working plunker
Angular Router is not working in my application. I have a login form, Angular controller, and Welcome page. When I pass the login details and click on submit button, Angular is not routing to welcome.html page.
Below is the code snippet.
Login Form(AngularForm.html)
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.js"></script>
<script src="LoginCtrl.js"></script>
</head>
<body ng-app="myAngular">
<div ng-controller="LoginController">
<form action="/" id="myForm">
UserName:
<input type="text" id="username" ng-model="username">
<br> Password:
<input type="password" id="passowrd" ng-model="password">
<br>
<button type="button" ng-click="submit()">Login</button>
</form>
</div>
</body>
</html>
Login Controller(LoginCtrl.js)
var App = angular.module('myAngular', ['ngRoute']);
App.config(function($routeProvider){
$routeProvider.when('/',{
templateUrl: 'AngularForm.html'
})
.when('/welcome',{
templateUrl: 'welcome.html'
})
.otherwise({
redirectTo: '/'
});
});
function UserLogin($scope,$location)
{
$scope.submit = function(){
var uname=$scope.username
var pwd=$scope.passowrd
if($scope.username == 'admin' && $scope.password == 'admin')
{ $location.path('/welcome'); }
}
}
App.controller('LoginController',UserLogin);
Welcome Page(welcome.html)
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>Login Successful!!</h1>
</body>
</html>
I think you need to separate the login content from the main AngularForm.html file
AngularForm.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.js"></script>
<script src="LoginCtrl.js"></script>
</head>
<body ng-app="myAngular">
<div ng-view></div>
</body>
</html>
make sure to add the <div ng-view></div> so that partial routes lay on top of this.
make the login HTML like this
login.html
<div ng-controller="LoginController">
<form action="/" id="myForm">
UserName:<input type="text" id="username" ng-model="username"><br>
Password:<input type="password" id="passowrd" ng-model="password"><br>
<button type="button" ng-click="submit()">Login</button>
</form>
</div>
add a new state called login in the config
JS
var App = angular.module('myAngular', ['ngRoute']);
App.config(function($routeProvider){
$routeProvider
.when('/',{
templateUrl: 'AngularForm.html'
})
.when('/login',{
templateUrl: 'login.html'
})
.when('/welcome',{
templateUrl: 'welcome.html'
})
.otherwise({
redirectTo: '/login'
});
});
function UserLogin($scope,$location)
{
$scope.submit = function(){
var uname=$scope.username
var pwd=$scope.passowrd
if($scope.username == 'admin' && $scope.password == 'admin')
{ $location.path('/welcome'); }
}
}
App.controller('LoginController',UserLogin)
hello i'm working on my small project using angular , during the creating my second controller with second service i have a problem , when i inject my own service as a dependency in the controller it dont work and all of expressions in html file are not resolved (before adding a service all works) here is my code
after adding AccSrv to AccCtrl the problem occurs
angular.module('myApp', ['ngRoute', 'membersService']).config(
['$httpProvider', '$routeProvider', function ($httpProvider, $routeProvider) {
$routeProvider.when('/home', {
templateUrl: 'partials/home.html',
controller: 'MembersCtrl'
}).when('/account', {
templateUrl: 'partials/account.html',
controller: 'AccCtrl'
}).otherwise({
redirectTo: '/home'
});
}]);
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<title>myApp</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="format-detection" content="telephone=no"/>
<link rel="stylesheet" href="css/screen.css" type="text/css"/>
<script src="js/libs/angular.js"></script>
<script src="js/libs/angular-route.js"></script>
<script src="js/libs/angular-resource.js"></script>
<script src="js/app.js"></script>
<script src="js/services/MemberSrv.js"></script>
<script src="js/controllers/MemberCtrl.js"></script>
<script src="js/services/AccSrv.js"></script>
<script src="js/controllers/AccCtrl.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en" ng-app="myApp" ng-controller="AccCtrl">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>{{hello}}</p>
<p>{{world}}</p>
<form name="accForm" ng-submit="createAccount()">
<div>
<label for="email">Email</label>
<input type="text" name="email" id="email" ng-bind="newAccount.email"/>
</div>
<div>
<label for="password">Password</label>
<input type="password" name="password" id="password" ng-bind="newAccount.password"/>
</div>
<div>
<input type="submit" id="registerAccount" value="Sign-up"/>
</div>
</form>
<form name="accForm" ng-submit="getAccountByEmail()">
<div>
<label for="getemail">CheckEmail</label>
<input type="text" name="getemail" id="getemail" ng-bind="ExistingAccount.email"/>
</div>
<div>
<input type="submit" id="check" value="Check"/>
</div>
</form>
<table>
<tr>
<td>{{ExistingAccount.id}}</td>
<td>{{ExistingAccount.email}}</td>
<td>{{ExistingAccount.password}}</td>
<td>{{ExistingAccount.creationDate}}</td>
</tr>
</table>
</body>
</html>
angular.module('AccountService', []).service('AccSrv', ['$http', function ($http) {
this.getAccountByEmail = function (email) {
var req = {
method: 'GET',
url: "http://localhost:8080/gadziksy-web/rest/account/" + email
};
return $http(req);
};
}]);
var myApp = angular.module('myApp');
myApp.controller('AccCtrl',['$scope','$http' ,'AccSrv' , function ($scope , $http , AccSrv) {
$scope.hello = 'hello';
$scope.world = 'world';
$scope.ExistingAccount = {
"id": '',
"email": '',
"password": '',
"creationDate": ''
};
$scope.getAccount = function () {
return AccSrv.getAccountByEmail($scope.ExistingAccount.email).then(function (data) {
$scope.ExistingAccount = data.data;
})
}
}]);
The problem is that your service is being defined in a module that you are not including anywhere:
angular.module('AccountService', []).service('AccSrv'...etc
should be
myApp.service('AccSrv'...etc
Otherwise you will need to include the AccountService MODULE as a dependency of myApp.
#yBrodsky is correct you need to change
angular.module('AccountService', []).service('AccSrv', ['$http', function ($http) {
To:
angular.module('myApp').service('AccSrv', ['$http', function ($http) {
Don't see what I'm missing here. My javascript isn't throwing any errors, but when I run the main page all I get is a blank screen; it appears that view1.htm isn't loading.
Here's the main page:
<!doctype HTML>
<html ng-app="demoApp">
<!--- This is how you integrate with partials (views)... --->
<head>
<title>Using AngularJS Views</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
<!-- normally would put this in it's own js file and call with script src="" -->
<script>
var demoApp = angular.module('demoApp', ['ngRoute']);
demoApp.config(function ($routeProvider) {
$routeProvider
.when("/",
{
controller:"simpleController",
templateURL:"partials/view1.htm"
})
.when("/view2",
{
controller:"simpleController",
templateURL:"partials/view2.htm"
})
.otherwise({ redirectTo: "/"});
});
demoApp.controller('simpleController', ['$scope', function($scope) {
$scope.customers = [
{name:"David Jones", city:"Phoenix"},
{name:"James Riley", city:"Atlanta"},
{name:"Heedy Wahlin", city:"Chandler"},
{name:"Thomas Winter", city:"Seattle"}
];
$scope.addCustomer = function(){
$scope.customers.push(
{name: $scope.newCustomer.name, city: $scope.newCustomer.city}
);
};
}]);
</script>
</head>
<body>
<div>
<!-- placeholder for the views -->
<div ng-view></div>
</div>
</body>
</html>
and here's partials/view1.htm:
<div class="container">
<h2>View 1</h2>
Name:
<br/>
<input type="text" ng-model="filter.name" />
<br/>
<ul>
<li ng-repeat="cust in customers | filter:filter.name">{{cust.name}}</li>
</ul>
<br/>
Customer Name:<br/>
<input type="text" ng-model="newCustomer.name" />
<br/>
Customer City:<br/>
<input type="text" ng-model="newCustomer.city" />
<br/>
<button ng-click="addCustomer()">Add Customer</button>
View 2
</div>
Thanks for any help.
Found it. templateURL should be templateUrl.