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.
Related
I am trying to add userName use AngularJs into Sharepoint. Also, i should have a feature that I should view all the userName from SharePoint list. But i keeping getting error says '_spPageContextInfo is not defined'.
I am just start learning SharePoint and AngularJs. Can someone help me with it? Thank you.
Here is the code:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="angular.min.js"></script>
<!-- modules -->
<script src="app.js"></script>
<!-- controllers -->
<script src="view.js"></script>
<script src="add.js"></script>
</head>
<body ng-app="myApp">
<h3>view</h3>
<div class="view" ng-controller="viewItemsController" ng-repeat="user in users">
<!-- {{user.ID}}: -->
{{user.Title}}, {{user.FirstName}},{{user.LastName}}
<br />
</div>
<hr>
<h3>add</h3>
<div class="add" ng-controller="addItemsController">
<div class="Table">
<div class="Row">
<div class="Cell">Title :</div>
<div class="Cell">
<input type="text" id="title" ng-model="title" />
</div>
</div>
<div class="Row">
<div class="Cell">First Name :</div>
<div class="Cell">
<input type="text" id="firstName" ng-model="firstName" />
</div>
</div>
<div class="Row">
<div class="Cell">Last Name :</div>
<div class="Cell">
<input type="text" id="lastName" ng-model="lastName" />
</div>
</div>
<div class="Row">
<div class="Cell"></div>
<div class="Cell">
<input type="button" id="btnAddContact" value="Add Name" ng-click="addContact()" />
</div>
</div>
</div>
</div>
</body>
</html>
app.js //this is module
var spApp = angular.module('myApp',[]);
view.js // first controller
spApp.controller("viewItemsController", function ($scope, $http) {
var url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('Users')/items?$select=Title,First_Name,Last_Name";
$http(
{
method: "GET",
url: url,
headers: { "accept": "application/json;odata=verbose" }
}
).success(function (data, status, headers, config) {
console.log(data);
$scope.users = data.d.results;
}).error(function (data, status, headers, config) {
});
});
add.js // second controller
spApp.controller("addItemsController",function($scope,$http){
var url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('Users')/items";
var vm = $scope;
vm.addContact = function () {
return $http({
headers: { "Accept": "application/json; odata=verbose", "X-RequestDigest": jQuery("#__REQUESTDIGEST").val() },
method: "POST",
url: url,
data: {
'Title': vm.title,
'First_Name': vm.firstName,
'Last_Name':vm.lastName
}
})
.then(saveContact)
.catch(function (message) {
console.log("addContact() error: " + message);
});
function saveContact(data, status, headers, config) {
alert("User Added Successfully");
return data.data.d;
}
}
});
EDIT:
After check this, I am able to run my app now. Help this link could help other people.
It is not obvious, to me at least, what you are doing with index.html.
_spPageContextInfo will only be available on a SharePoint hosted page (i.e. script editor webpage, page layout, sharepoint designer edited page).
It will only be available once SP.js has excuted (See SharePoint scripts on demand).
If you are trying to do proper best practise sharepoint web development then look into SharePoint SPFX
I hope this is helpful
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) {
I'm building a simple weather app that gets the weather for any city.
For this API there are two stages:
1) you enter a name of a city, get its "where on earth ID" (woeid).
2) use the woeid to search for the weather.
This is the API: https://www.metaweather.com/api/
For example:
https://www.metaweather.com/api/location/search/?query=london
You get this JSON:
[{"title":"London","location_type":"City","woeid":44418,"latt_long":"51.506321,-0.12714"}]
For starters, just to get the woeid would be great.
It fails to connect to the API but when i type it manually it works.
app.js:
var app = angular.module('weatherApp', []);
app.controller('weatherCtrl', ['$scope', 'weatherService', function($scope, weatherService) {
function fetchWoeid(city) {
weatherService.getWoeid(city).then(function(data){
$scope.place = data;
});
}
fetchWoeid('london');
$scope.findWoeid = function(city) {
$scope.place = '';
fetchWoeid(city);
};
}]);
app.factory('weatherService', ['$http', '$q', function ($http, $q){
function getWoeid (city) {
var deferred = $q.defer();
$http.get('https://www.metaweather.com/api/location/search/?query=' + city)
.success(function(data){
deferred.resolve(data);
})
.error(function(err){
console.log('Error retrieving woeid');
deferred.reject(err);
});
return deferred.promise;
}
return {
getWoeid: getWoeid
};
}]);
index.html:
<!DOCTYPE html>
<html ng-app="weatherApp">
<head>
<meta charset="utf-8" />
<title>Weather App</title>
<link data-require="bootstrap-css#3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script>document.write('<base href="' + document.location + '" />');</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script data-require="jquery#*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap#*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="weatherCtrl">
<form>
<div class="form-group">
<input class="form-control" type="text" ng-model="city" placeholder="e.g. london" />
<input class="btn btn-default" type="submit" value="Search" ng-click="findWoeid(city)" />
</div>
</form>
<p ng-show="city">Searching the forecasts for: {{city}}</p>
<div>
<h1>WOEID is: {{ place }}</h1>
<a ng-click="findWeather('london'); city = ''">reset</a>
</div>
</body>
</html>
It appears you are having a Cross Origin problem. It doesn't look like Metaweather supports JSONP, so the fix for this is a bit more complex. You need to be running your page through a server that can support a proxy. One such example is https://www.npmjs.com/package/cors-anywhere. If you set that up using the defaults then change your AJAX call to:
$http.get('http://localhost:8080/https://www.metaweather.com/api/location/search/?query=' + city)
I have been having this issue with Controllers in Angular. I looked it up as much as possible, but I could not resolve the issue.
I am trying to implement a simple controller, but for the life of me, I cannot get the binding to work. It's not displaying my data. For example when I say, {{ test }}, I get just that, not the "Hello World!" string.
var app = angular.module('App', []);
app.controller('Hi', function($scope){
$scope.hello = "hello!";
});
app.controller('todoCtrl', ['$scope', '$http', function($scope, $http) {
$scope.test = "Hello World!";
$scope.formData = "";
$http.get('/api/todos')
.success(function(data) {
$scope.todos = data;
console.log(data);
})
.error(function(data) {
console.log('Error: ' + data);
});
$scope.createTodo = function() {
$http.post('/api/todos', $scope.formData)
.success(function(data) {
$scope.formData.text = "";
$scope.todos = data;
console.log(data);
})
.error(function(data) {
console.log('Error: ' + data);
});
};
$scope.deleteTodo = function(id) {
$http.delete('/api/todos/' + id)
.success(function(data) {
$scope.todos = data;
console.log(data);
})
.error(function(data) {
console.log('Error: ' + data);
});
};
}]);
<!DOCTYPE html>
<html ng-app="App">
<head>
<title>TodoX</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- TodoX CSS -->
<link rel="stylesheet" type="text/css" href="stylesheets/style.css"/>
</head>
<body ng-controller="todoCtrl">
<div class="container">
<div class="row">
<div class="jumbotron text-center">
<h1>TodoX<span>{{todos.length}}</span>{{test}}</h1>
</div>
<div class="col-md-8">
<div class="list-group">
<div class="checkbox" ng-repeat="todo in todos | orderBy:date">
<label class="list-group-item">
<input type="checkbox"/> {{todo.text}}
</label>
</div>
</div>
</div>
<div class="col-md-4">
<form class="form-group">
<input type="text" class="form-control" ng-model="formData"/>
<input type="submit" ng-click="createTodo()" placeholder="Submit" class="form-control"/>
</form>
</div>
</div>
</div>
<!-- Angular JS -->
<script type="text/javascript" href="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<!-- TodoX Core JS -->
<script type="text/javascript" href="core.js"></script>
</body>
</html>
I just executed your code while placing angular file link above the script tag, so that AngularJs is loaded before your script can call angular modules.
I think you're putting angular after your script which is why you are running into this issue. Your code works just fine. I tested it.
Put it like this
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="script.js"></script>
Here script.js will be your controller script.
Working fiddle
I just started angularfire Auth! And i get this problem when i sign in, And if you guys have any advice on how to make a email registration form i would be more than glad to hear that . Here is the error i receive :
Error: Firebase.authWithPassword failed: First argument must be a valid object.
Here is my
script.js:
var app = angular.module('LoginApp', ["firebase"])
app.controller('AuthCtrl', [
'$scope', '$rootScope', '$firebaseAuth', function($scope, $rootScope, $firebaseAuth) {
var ref = new Firebase('https://uniquecoders.firebaseio.com/')
$scope.auth = $firebaseAuth(ref);
$scope.signIn = function(){
var ref = new Firebase('https://uniquecoders.firebaseio.com/')
ref.authWithPassword('email', {
email: $scope.signInEmail,
password: $scope.signInPassword
}, function(error,userData){
if(error = 'INVALID_EMAIL'){
alert("The Email you entered is Invalid")
}
else if(error = 'INVALID_PASSWORD'){
alert("The Password you entered is Invalid")
}
else{
console.log(error)
}
})
}
}]
);
and our Index.html:
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.1.3/angularfire.min.js"></script>
<script src="https://cdn.firebase.com/js/simple-login/1.6.2/firebase-simple-login.js"></script>
<script src = "http://s.codepen.io/assets/libs/modernizr.js"></script>
<script type="text/javascript" src="script.js"></script>
<meta charset="UTF-8">
<meta name="X-UA-Compatible" content="">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="keywords" content="">
<meta name="description" content="">
<title>Login - UniqueCoders</title>
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="main.css">
</head>
<body ng-app="LoginApp">
<div id="page">
<header class="container">
<div class="row">
<img src="https://lh5.googleusercontent.com/-UXr_le-DEc4/VogTLE2yDfI/AAAAAAAAAfI/9RycRDVGNu8/w993-h207-no/uniquecoders.png" alt="UniqueCoders">
</div>
</header>
<main class="container">
<div class="row login">
<form ng-controller="AuthCtrl">
<input type="email" name="email" placeholder="Email" ng-model = "signInemail" id="email">
<input type="password" name="password" ng-model = "signInpassword" placeholder="Password" id="password">
<input type="submit" value="Login" ng-click = "signIn()">
</form>
</div>
</main>
<footer class="container">
<div class="row">
<small>© 2016. Unique Coders</small>
</div>
</footer>
</div>
<!-- Scripts at the end for faster loading -->
</body>
</html>
From the documentation here is what i see:
https://www.firebase.com/docs/web/libraries/angular/api.html#angularfire-users-and-authentication
var ref = new Firebase("https://<YOUR-FIREBASE-APP>.firebaseio.com");
ref.authWithPassword({
"email": "yourname#email.com",
"password": "password"
}, function(error, authData) {
if (error) {
console.log("Login Failed!", error);
} else {
console.log("Authenticated successfully with payload:", authData);
}
});
Can you change it above and check if it works. Here is a neat example on how to do authentication with angularjs.
http://jasonwatmore.com/post/2015/03/10/AngularJS-User-Registration-and-Login-Example.aspx