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) {
Related
I'm new to AngularJS and I tried creating a sample login page and I tried routing to other page on successful login but nothing shows up in ng-view and my code has no error. What could be the problem?
index.html
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-
route.js"></script>
<script src="maincontroller.js"></script>
</head>
<body>
<div ng-view>
</div>
</body>
</html>
controller
var app = angular.module('myapp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'login.html',
controller: 'maincontroller'
})
.when('/dashboard', {
templateUrl: 'dashboard.html'
})
.otherwise('/', {
templateUrl: '/'
})
});
app.controller('maincontroller', function($scope, $location) {
$scope.submit = function($scope) {
var username = $scope.username;
var password = $scope.password;
if ($scope.username == 'ashok' && $scope.password == 'ashok') {
$location.path('/dashboard');
} else {
windows.alert('wrong stuff');
}
};
});
login.html
<div ng-controller="maincontrol">
<form action="/" name="formgroup">
<label>Username:<input type="text" id="username" ng-model="username"/></label><br>
<label>Password:<input type="password" id="password" ng-model="password"/></label><br>
<button type="button" ng-click="submit()">Login</button>
</form>
You should mention ng-app in your HTML to make this an Angular app.
<html ng-app='myapp'>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-
route.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-view>
</div>
</body>
</html>
Maincontroller.js
var app = angular.module('myapp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'login.html',
controller: 'maincontroller'
})
.when('/dashboard', {
templateUrl: 'dashboard.html'
})
.otherwise('/', {
templateUrl: '/'
})
});
app.controller('maincontroller', function($scope, $location) {
$scope.submit = function() {
var username = $scope.username;
var password = $scope.password;
if ($scope.username == 'ashok' && $scope.password == 'ashok') {
$location.path('/dashboard');
} else {
windows.alert('wrong stuff');
}
};
});
$scope is already injected in to the controller and you are passing that as a parameter to your submit function which is undefined since you did not pass anything on submit.
Login.html
<form action="/" name="formgroup">
<label>Username:<input type="text" id="username" ng-model="username"/></label><br>
<label>Password:<input type="password" id="password" ng-model="password"/></label><br>
<button type="button" ng-click="submit()">Login</button>
</form>
Since you are injecting controller on routing, You don't have to use ng-controller in your login.html. It makes the controller execute again.
Check this Plunker: https://plnkr.co/edit/8jPJ7WOa3ixjqeRU8bpg?p=preview
I will recomment to use ng-app in body .
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-
route.js"></script>
<script src="maincontroller.js"></script>
</head>
<body ng-app="myapp">
<div ng-view>
</div>
</body>
</html>
also User maincontroller in login page
<div ng-controller="maincontroller">
<form action="/" name="formgroup">
<label>Username:<input type="text" id="username" ng-model="username"/></label><br>
<label>Password:<input type="password" id="password" ng-model="password"/></label><br>
<button type="button" ng-click="submit()">Login</button>
</form>
</div>
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 am making an AngularJS app,in which I am using Express as backend. The problem is,whenever I run my app
angular.js:36Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.0-beta.14/$injector/modulerr?p0=starter&p1=….com%2Fajax%2Flibs%2Fangularjs%2F1.3.0-beta.14%2Fangular.min.js%3A18%3A139)
Above error occurs in browser's console. I have tried many solutions but none of them worked.
My index.html is
<!DOCTYPE html>
<html ng-app="starter">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>AngularJS Routing example</title>
<script src="hhtp://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.14/angular.min.js"></script>
<script src="http://localhost/try/www/js/ng-cordova.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
<ul class="nav">
</ul>
</div>
<div class="col-md-9">
<div ng-view></div>
</div>
</div>
</div>
<script src="http://localhost/try/www/js/app.js"></script>
<script src="http://localhost/try/www/js/master_serverquery.js"></script>
<script src="http://localhost/try/www/js/employeeCtrl.js"></script>
</body>
</html>
My login.html is
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<title>Daily UI - Day 1 Sign In</title>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700|Lato:400,100,300,700,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://localhost/try/www/css/animate.css">
<link rel="stylesheet" href="http://localhost/try/www/css/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.14/angular.min.js"></script>
<script src="http://localhost/try/www/js/ng-cordova.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
</head>
<body ng-app="starter" >
<div ng-controller="loginCtrl">
<div class="top">
<h1 id="title" class="hidden"><span id="logo"></span></h1>
</div>
<div class="login-box animated fadeInUp">
<div class="box-header">
<h2>Log In</h2>
</div>
<form method="POST">
<label for="username">Username</label>
<br/>
<input type="text" name = "login" ng-model="loginId">
<br/>
<label for="password">Password</label>
<br/>
<input type="password" name = "password" ng-model = "loginPassword" >
<br/>
<button type="submit" ng-click = "loginFunc()">Sign In</button>
<br/>
Add New Order
</form>
<p class="small">Forgot your password?</p>
</div>
</div>
<script src="http://localhost/try/www/js/app.js"></script>
<script src="http://localhost/try/www/js/master_serverquery.js"></script>
</body>
</html>
My app.js is
var app = angular.module('starter', ['ngRoute','ngCordova']);
console.log("error")
app.run(function( $cordovaSQLite) {
db = window.openDatabase("marketplace.db", '1', 'my', 1024 * 1024 * 100);
$cordovaSQLite.execute(db, "CREATE TABLE IF NOT EXISTS user_master_vendor (server_db_column_id integer, name text)");
console.log("browser");
});
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/login', {
templateUrl: 'template/login.html',
controller: 'loginCtrl'
}).
otherwise({
redirectTo: '/login'
});
}]);
app.run(function($rootScope){
$rootScope.project_url = 'http://127.0.0.1:8081';
})
app.controller('loginCtrl',function($scope, $http, $rootScope ,$location, $cordovaSQLite){
$scope.loginFunc = function($scope){
var loginPassword = $scope.loginPassword;
var loginId = $scope.loginId;
console.log(" loginCtrl");
$scope.user = {
loginId : loginId,
loginPassword : loginPassword
}
alert($scope.user.loginId);
var loginUrl = $rootScope.project_url + '/login_post';
$http({
method : 'POST',
url : loginUrl,
headers: {
'Content-Type': undefined
},
params: {
loginId : loginId,
loginPassword : loginPassword
},
dataType: 'json',
processData : false
}).then(function successCallback(response) {
console.log(response.data.result[0].Emp_Id);
console.log(response.data.result[0].Emp_Password);
console.log("successCallback called");
var server_db_column_id = response.data.result[0].Id;
var user_name = response.data.result[0].Name;
$cordovaSQLite.execute(db, 'INSERT INTO user_master_vendor (server_db_column_id, name) VALUES (?, ?)',
[server_db_column_id, user_name])
.then(function(result) {
console.log("Data Saved Successfully in user_master at INSERT ID -> " + result.insertId);
console.log("Data user_empId-> " + user_empId + ", user_empPassword->" +user_empPassword);
},
function(error) {
$scope.showp = "Data could not be saved in user_master_vendor Error -> " + error.message;
console.log(error);
});
}, function errorCallback(response) {
alert("failure: "+response);
});
}
});
Thanks a lot for helping me.I have found the soultion for the problem,it required downloading angular-route module using npm.The below link helped me.
https://docs.angularjs.org/api/ngRoute
I followed all the steps and was able to solve the problem.
I'm trying to pull some data out of url to pass into a controller for use in the controller. I've been trying to do it via Angular Routing.
<!DOCTYPE html>
<html ng-app>
<head>
<meta name="viewport" content="width=device-width" />
<title>Edit</title>
<script src="~/Scripts/angular.min.js"></script>
</head>
<body>
<div ng-controller="SearchController" >
<input type="text" ng-model="SearchText" />
</div>
<script type="text/javascript">
var app = angular.module('myApp', ['ngRoute']);
app.config(function ($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/angularroute/edit/:sometext', {
controller: 'SearchController'
});
});
app.controller("SearchController", ['$scope', '$routeParams', SearchController]);
function SearchController($scope, $routeParams) {
$scope.SearchText = $routeParams.sometext;
}
SearchController.$inject = ['$scope'];
</script>
</body>
</html>
<html ng-app>
<head>
<meta name="viewport" content="width=device-width" />
<title>Edit</title>
<script src="~/Scripts/angular.min.js"></script>
</head>
<body>
<div ng-controller="SearchController" >
<input type="text" ng-model="SearchText" />
</div>
<script type="text/javascript">
var app = angular.module('myApp', ['ngRoute']);
app.config(function ($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/angularroute/edit/:sometext', {
controller: 'SearchController'
});
});
app.controller("SearchController", ['$scope', '$routeParams', SearchController]);
function SearchController($scope, $routeParams) {
$scope.SearchText = $routeParams.sometext;
}
SearchController.$inject = ['$scope'];
</script>
</body>
</html>
$routeParams in the controller is always null. Why?
Secondly, the url of the page that this is used on will be something like this: http://www.blah.com/angularroute/edit/32432 Is this an appropriate use of Angular routing?
Hi it looks like you miss reference to angular-route.js script please see example here: http://plnkr.co/edit/RZxt3t9dNQxbyW94V9jQ?p=preview
JS:
var app = angular.module('app', ['ngRoute']);
app.config(function($locationProvider, $routeProvider) {
$routeProvider
.when('/angularroute/edit/:sometext', {
controller: 'SearchController',
templateUrl: 'http://run.plnkr.co/d8ZBAv3VEkfIJI4h/search.html'
});
$locationProvider.html5Mode(true);
});
app.controller('firstCtrl', function($scope) {
});
app.controller("SearchController", ['$scope', '$routeParams', SearchController]);
function SearchController($scope, $routeParams) {
console.log($routeParams);
$scope.SearchText = $routeParams.sometext;
}
html:
<!DOCTYPE html>
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="app">
<div ng-controller="firstCtrl">
Search for elephant<br/>
Search for horse<br/>
Search for tigger<br/>
</div>
<div ng-view="">
</div>
</body>
</html>
Had the same problem with AngularJS 1.3.0, updating to 1.3.13 fixed it.
I am following YouTube's tutorial for Sharing Data between Controllers.
For some reason, the two inputs don't return shared data(not bind-able). Can anyone let me know what is wrong in my code?
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="/css/app.css?2">
<script src="/bower-foundation/js/vendor/modernizr.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js?2"></script>
<!-- angularjs -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.factory('Data', function(){
return {msg:"I am data from a service"}
})
function firstctrl($scope, Data) {
$scope.data = Data;
}
function secondctrl($scope, Data) {
$scope.data = Data;
}
</script>
</head>
<body ng-app="myApp">
<div ng-controller="firstctrl">
<input type="text" ng-model="data.msg">
<h1>{{data.msg}}</h1>
</div>
<div ng-controller="secondctrl">
<input type="text" ng-model="data.msg">
<h1>{{data.msg}}</h1>
</div>
<!-- javascript -->
<script src="/bower-foundation/js/foundation.min.js?3"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fastclick/0.6.11/fastclick.min.js?2"></script>
<script src="/js/min/app.min.js?3"></script>
</body>
</html>
Its working fine, Take a look at this
Working Demo
HTML
<div ng-app='myApp'>
<div ng-controller="firstctrl">
<input type="text" ng-model="data.msg" />
<h1>{{data.msg}}</h1>
</div>
<div ng-controller="secondctrl">
<input type="text" ng-model="data.msg" />
<h1>{{data.msg}}</h1>
</div>
</div>
SCRIPT
var myApp = angular.module('myApp', []);
myApp.factory('Data', function () {
return {
msg: "I am data from a service"
};
})
function firstctrl($scope, Data) {
$scope.data = Data;
}
function secondctrl($scope, Data) {
$scope.data = Data;
}
Also take a look at this stuff
AngularJS - Sharing variables between controllers