We Keep Coding

Page not updating in AngularJS

I am creating a web app, where I have one page which is home.html and about.html. In the home.html I have list of users, and when they click on one of the users, it goes to about.html, but does not show the users info. Can anyone check my code, to see what I have done wrong. Thanks in advance.
Here is my code. (home.html)
<form name="myForm">
<label>Search
<input type="text" size="35" ng-model="userSearch">
</label>
</form>
<br/>
<label>Filters</label>
<button type="button" class="btn btn-link">+ Add Filter</button>
<hr>
<legend>Users</legend>
<div class="people" ng-repeat="person in userInfo.lawyers | filter:userSearch" >
<a href="#/lawyer/{{ person.id }}">
<img ng-src="{{person.imgUrl}}"/>
<span class="name">{{person.firstName}} </span>
<span class="name">{{person.lastName}} </span>
<p class="title">{{person.title}} </p>
<span class="date">{{person.date}} </span>
</a>
</div>
About.html
<div class="people-view">
<h2 class="name">{{person.first}}</h2>
<h2 class="name">{{person.last}}</h2>
<span class="title">{{person.title}}</span>
<span class="date">{{person.date}} </span>
</div>
<div class="list-view">
<form>
<fieldset ng-disabled="inactive">
<legend>Basic Info</legend>
<b>First Name:</b>
<input type="text" ng-model="person.first">
<br>
<b>Last Name:</b>
<input type="text" ng-model="person.last">
<br>
<b>Email:</b>
<input type="email" ng-model="person.email">
<br>
<b>Phone:</b>
<input type="num" ng-model="person.phone">
<br>
<b>Website:</b>
<input type="text" ng-model="person.website">
<br>
<b>Education:</b>
<input type="text" ng-model="person.education">
<br>
<b>Education Year:</b>
<input type="text" ng-model="person.year">
<br>
</form>
</div>
</div>
App.js
var app = angular.module("Portal", ['ngRoute', 'ui.bootstrap' ]);
app.controller('MyCtrl', function($scope) {
//form setting to true
$scope.inactive = true;
$scope.confirmedAction = function() {
isConfirmed.splice($scope.person.id, 1);
location.href = '#/lawyer';
}
});
app.config(function ($routeProvider) {
$routeProvider
.when("/lawyer", {
controller: "HomeController",
templateUrl: "partials/home.html"
})
.when("/lawyer/:id", {
controller: "LawyerController",
templateUrl: "partials/about.html"
})
.otherwise({
redirectTo: '/lawyer'
});
});
Controller
app.controller('LawyerController', ['$scope', 'people', '$routeParams',
function ($scope, people, $routeParams) {
people.getUserInfo().then(function (response) {
$scope.person = people.getUserInfo();
console.log($scope.person.lawyers);
}, function (error) {
console.log(error)
});
}]);
HomeController
var isConfirmed = false;
app.controller('HomeController', function($scope, people, $http) {
if (!isConfirmed) {
people.getUserInfo().then(function (response) {
$scope.userInfo = response.data;
isConfirmed = $scope.userInfo;
console.log($scope.userInfo.lawyers);
}, function (error) {
console.log(error)
});
}
});
Services
app.factory('people', ['$http', function($http) {
var userInfo = {
getUserInfo: function () {
return $http.get('https://******************');
}
};
return userInfo;
}]);

As others mentioned, your whole code is in wrong way! but I will try to help as much as I can.
You don't have any method in LawyerController to get the data, so let's begin from that :
change your $routeProvider in app.js like this to have a method :
$routeProvider
.when("/lawyer", {
controller: "HomeController",
templateUrl: "partials/home.html"
})
.when("/lawyer/:id", {
controller: "LawyerController",
templateUrl: "partials/about.html",
method: 'lawyerInit'
})
.otherwise({
redirectTo: '/lawyer'
});
Then change your LawyerController to something like this :
app.controller('LawyerController', ['$scope', 'people', '$routeParams',
function ($scope, people, $routeParams) {
$scope.lawyerInit = function(){
people.getUserInfo().then(function (response) {
$scope.getAll= people.getUserInfo();
for (var i=0; i<=$scope.getAll.length -1; i++){
if($scope.getAll[i].lawyers.id==$routeParams.id){
$scope.person= $scope.getAll[i];
}
}
console.log($scope.person.lawyers);
}, function (error) {
console.log(error)
});
}
}]);
Hope this work, I was not sure how is your json response, if you get error in this line if($scope.getAll[i].lawyers.id==$routeParams.id) you need make sure the id where is exactlly in your json object.

why is scope undefined in angular

So I am using ionic to build a hybrid app. Just to be clear, this works flawlessly with android!
Here is my login html:
<body ng-app="starter">
<head>
<script src="phonegap.js"></script>
</head>
<ion-header-bar align-title="center" class="bar-positive" ng-controller="BackBtnCtrl">
<button class="button" ng-click="goBack()"><<</button>
<h1 class="title">Push Notifications</h1>
</ion-header-bar>
<ion-content>
<div class="list">
<form style="display: block; margin: 100px">
<label class="item item-input">
<input type="text" ng-model="name" placeholder="Name">
</label>
<label class="item item-input">
<input type="password" ng-model="password" placeholder="Password" style="text-align: center">
</label>
<label class="item item-input">
<input type="email" ng-model="email" placeholder="Email" style="text-align: center">
</label>
<label class="item item-input">
<input type="text" ng-model="company" placeholder="Company Name" style="text-align: center">
</label>
<button class="button button-block button-positive" type="submit" ng-click="doLogin()">Register</button>
</form>
</div>
</ion-content>
</body>
Now in my app.js I declare the controller for the ion-content as:
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
})
and when I access, for example, $scope.email in the android app, it returns correctly. But when I access $scope.email in the iOS app, I get undefined. Has anyone ever heard of this issue?
controller:
.controller('LoginCtrl', function($scope, $rootScope, $http, $state, $ionicPlatform) {
if(window.localStorage.getItem("loggedIn") == undefined || window.localStorage.getItem("loggedIn") == null) {
// This function only gets called when the register button gets hit. It posts to the server to store the users registration data
$scope.doLogin = function() {
if ($scope.name == undefined || $scope.password == undefined|| $scope.email == undefined|| $scope.company == undefined) {
window.plugins.toast.showWithOptions(
{
message: 'Please Fill in ALL Fields',
duration: 'long',
position: 'middle'
});
alert($scope.email);
alert("returning");
return;
}
alert($scope.email);

According to the official Angular documentation, you should declare the controller like this:
myApp.controller('GreetingController', ['$scope', function($scope) {
$scope.greeting = 'Hola!';
}]);
So, try change your code in the following way:
.controller('LoginCtrl', ['$scope', '$rootScope', '$http', '$state', '$ionicPlatform', function($scope, $rootScope, $http, $state, $ionicPlatform) {
if(window.localStorage.getItem("loggedIn") == undefined || window.localStorage.getItem("loggedIn") == null) {
// This function only gets called when the register button gets hit. It posts to the server to store the users registration data
$scope.doLogin = function() {
if ($scope.name == undefined || $scope.password == undefined|| $scope.email == undefined|| $scope.company == undefined) {
window.plugins.toast.showWithOptions(
{
message: 'Please Fill in ALL Fields',
duration: 'long',
position: 'middle'
});
alert($scope.email);
alert("returning");
return;
}
alert($scope.email);

This might sound absolutely crazy..
First let me thank all the responses. I have learned a lot with how things should be and how I need to fix my code to be 'standard'. Like using . object instead of primitive strings. Thank You.
But I have solved my issue.The thing that was making my fields undefined, was that I had type='email' and if they just entered in something other than an email, it came back undefined. I don't know how, but that fixed it. I changed type='text' and it fixed my issues.

Angular & Loopback : User.login is not a function

So, I got an error today when I try to run Login function in Ionic.
The error said : TypeError: User.login is not a function (on controller.js
This is my controller.js :
angular.module('starter.controllers', [])
.controller('LoginCtrl', function($scope, User, $state) {
$scope.signIn = function(user) {
$scope.loginResult = User.login(user,
function(res) {
console.log('Login success');
console.log(res);
$state.go('tab.dash');
// success
}, function(res) {
// error
});
}
})
and this is my login.html :
<div class="list list-inset">
<label class="item item-input">
<input type="email" placeholder="Email" ng-model="user.email">
</label>
<label class="item item-input">
<input type="password" placeholder="Password" ng-model="user.password">
</label>
</div>
<button class="button button-block button-calm" ng-click="signIn(user)">Login</button>
This is my route in app.js :
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
})
Please correct my code.
Thanks for ur effort :)

Have you set up the loopback-sdk-angular properly? Please see my example at https://github.com/strongloop/loopback-getting-started-intermediate/blob/master/client/js/services/auth.js#L6-L15

$location error in angularJS

I have a master controller and I would like to set up the login page to take me to "/tables" path if username=admin and password=admin, however I am getting this error everytime I try to login
TypeError: Cannot read property 'path' of undefined
I added $location in the controller and in the login function but nothing changed keep getting same error. If I take $location out I get this error
ReferenceError: $location is not defined
Not sure what to do there. Any help is appreciated. Here is my code
angular
.module('RDash')
.controller('MasterCtrl', ['$scope', '$cookieStore', MasterCtrl]);
function MasterCtrl($scope, $cookieStore, $location) {
/**
* Sidebar Toggle & Cookie Control
*/
var mobileView = 992;
$scope.getWidth = function() {
return window.innerWidth;
};
$scope.login = function($location) {
if($scope.credentials.username !== "admin" && $scope.credentials.password !== "admin") {
alert("you are not the admin");
}
else{
$location.path('/tables');
}
};
}
login.html:
<div ng-controller="MasterCtrl">
<form >
<div class="jumbotron" class="loginForm">
<div class="form-group" id="loginPageInput">
<label for="exampleInputEmail1">User Name</label>
<input type="text" class="form-control" id="exampleInputEmail1" placeholder="Enter Username" ng-model="credentials.username">
</div>
<div class="form-group" id="loginPageInput">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" ng-model="credentials.password">
</div>
<div id="loginPageInput">
<button ng-click="login()" type="submit" class="btn btn-primary btn-lg">Submit</button>
</div>
</form>
<div id="loginPageInput">
<div class="wrap">
<button ng-click="register()" class="btn btn-default" id="lefty" >Register</button>
<p ng-click="forgotpass()" id="clear"><a>Forgot my Password</a></p>
</div>
</div>
</div>
</div>

You missed to inject $location in your dependency array of MasterCtrl
Code
angular
.module('RDash')
.controller('MasterCtrl', ['$scope', '$cookieStore', '$location', MasterCtrl]);
//^^^^^^^^
function MasterCtrl($scope, $cookieStore, $location) {
Also you need to remove $scope.login parameter $location which is killing the service $location variable existance which is inject from the controller.
$scope.login = function ()

You are not passing any $location to login function hence it's undefined and shadows outer $location local variable. Correct code should be:
$scope.login = function () {
if ($scope.credentials.username !== "admin" && $scope.credentials.password !== "admin") {
alert("you are not the admin");
} else {
$location.path('/tables');
}
};

Why AngularJS view doesn't change when navigating?

I am new in angularJS. I write some code for navigation and it was work perfect. But it's stop working when I integrate MetroPreLoader in my angularJs service. It change browser URL but view does not update. if i remove MetroPreLoader from my service then it`s works again.
Here is my Code :
Service :
voiceAppControllers.factory('appService', function ($http, $log, $window) {
return {
showWaitBar : function() {
MetroPreLoader.setup({
logoUrl: "Content/Images/logo.png",
logoWidth: "100px",
logoHeight: "100px",
multipleBGColors: ["#CA3D3D", "#F58A16", "#32A237", "#A110E6"],
delay: "Unlimited"
});
MetroPreLoader.run();
},
hideWaitbar : function() {
MetroPreLoader.close();
}
};
})
Controller :
voiceAppControllers.controller('loginController', ['$scope', '$http', '$location', '$timeout', 'appService', 'notificationService',
function ($scope, $http, $location,$timeout, appService, notificationService) {
var onSuccess = function () {
notificationService.pushNotifaction("service update successfully.");
};
var onError = function () {
notificationService.pushNotifaction("service update fail.");
};
$scope.login = function () {
var credentials = "grant_type=password&username=" + $scope.loginModel.Username + "&password=" + $scope.loginModel.Password;
console.log(credentials);
appService.showWaitBar();
$http({
method: 'POST',
url: appService.loginUrl,
data: credentials,
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
})
.success(function (data) {
console.log(data.access_token);
appService.updateAuthInfo(data.userName, data.access_token);
appService.hideWaitbar();
$location.path(appService.routes.dahboard);
})
.error(function () {
appService.clearAuthInfo();
appService.hideWaitbar();
$location.path(appService.routes.login);
notificationService.pushNotifaction("Login Fail. Wrong username and password.");
});
};
}
]);
when i comment appService.showWaitBar() and appService.hideWaitbar() then its works fine.
I defiantly miss something but don`t figure out that it is.
Thnaks.
Update 1:
my App.js is :
var voiceAppControllers = angular.module('voiceAppControllers', []);
var voiceApp = angular.module('voiceApp', ['ngRoute', 'voiceAppControllers', 'kendo.directives']);
voiceApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/organization', {
templateUrl: 'Templates/OrganizationTemplate.html',
controller: 'organizationController'
}).when('/service', {
templateUrl: 'Templates/ServiceTemplate.html',
controller: 'serviceController'
}).when('/login', {
templateUrl: 'Templates/LoginTemplate.html',
controller: 'serviceController'
}).when('/Dashboard', {
templateUrl: 'Templates/DashboardTemplate.html',
controller: 'dashboardController'
}).
otherwise({
redirectTo: '/login'
});
}]);
Login View is :
<div ng-controller="loginController">
<form name="loginFrom" novalidate ng-submit="login(loginFrom)">
<input type="hidden" ng-model="loginModel.Id" />
<h1>Login</h1>
<label>Need Some Text</label>
<div>
<label>username :</label>
<div class="input-control text">
<input type="text" placeholder="Your username" required ng-model="loginModel.Username" />
</div>
</div>
<div>
<label>password :</label>
<div class="input-control password">
<input type="password" placeholder="Your password" required ng-model="loginModel.Password" />
</div>
</div>
<div class="offset3">
<input class="primary" type="submit" value="UPDATE" ng-disabled="loginFrom.$invalid" />
</div>
</form>
</div>
my Dashboard View is :
<div ng-controller="dashboardController">
<h1>Dashboard</h1>
<input type="button" value="Next" />
</div>