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.
Related
I just began to study angular, tried to make some kind of SPA, but faced with problem of editing data in it. The obect is visible in console, but it hasn't appear on page, what I did wrong?
Here my controller:
var app = angular.module("testModule", ['ngRoute']);
app.config(function ($routeProvider){
$routeProvider.when('/', {
templateUrl: 'pages/main.html',
controller: 'addCtrl'
})
.when('/save', {
templateUrl: 'pages/save.html',
controller: 'editCtrl'
})
.when('/edit', {
templateUrl: 'pages/edit.html',
controller: 'addCtrl'
})
})
app.service('dataService', function($http) {
var data = {};
data.list = [];
var getData = function() {
$http.get("model/data.json").then(function (response) {
data.list = response.data;
});
}
return {
getDataFromJson: getData,
getData: data,
}
});
app.controller("mainCtrl", function($scope, dataService) {
dataService.getDataFromJson();
});
app.controller("editCtrl", function($scope, dataService) {
$scope.data = dataService.getData;
$scope.editData = function(adverse){
$scope.adverse= adverse;
console.log($scope.adverse)
}
});
and the part of page:
<div class="panel">
<form name="addForm" >
<div class="well" >
<div class="form-group">
<label for="name">Name:</label>
<input type='text' id="name" class="form-control" ng-model="adverse.name" placeholder={{adverse.name}} />
<label for="shop">Shop:</label>
<input type='text' id="shop" class="form-control" ng-model="adverse.shop" placeholder="{{adverse.shop}}" />
<label for="begin">Begin:</label>
<input id="begin" class="form-control" ng-model="adverse.begin" placeholder="{{adverse.begin}}" >
<label for="end">End:</label>
<input id="end" class="form-control" ng-model="adverse.end" placeholder="{{adverse.end}}" />
<button type="submit" class="btn btn-primary btn-block add_btn" ng-click="editData(adverse)">
Edit
</button>
</div>
</div>
</form>
</div>
Also here is a screenshot: the props of object suppose to be in the inputs but it hasn't.
enter image description here
If possible can you give me an example how I can do it by another way?
Recreated your scenario in this plunker. But it works. Please have a look at this plunker where you alo can see the StateProvider which is used instead of NgRoute
One thing I see which is incorrect is that you are sending the adverse object in the function and then setting the param to the scope adverse.
The thing is that the $scope.adverse already holds the values so you don't need to pass the value and setting it to the scope again. Remeber the scope is your glue between the view and ctrl
$scope.editData = function(){
console.log($scope.adverse)
}
I have two different HTML forms
index.html
home.html
I am trying to create a login in index.html and if it is authenticated i want to navigate to home.html and if its not i am displaying an alert message. But the page does not navigate. Any ideas as to what i am doing wrong?
My code is as follows
index.html
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-view></div>
<form ng-submit="login(username, password)">
<label>User name</label>
<input type="text" ng-model="username" class="ng-pristine ng-valid">
<label>Password</label>
<input type="password" ng-model="password" class="ng-pristine ng-valid">
<br/>
<br/><br/>
<button class="btn btn-success" ng-click="">Submit</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</form>
</div>
<script>
var app = angular.module('myApp', ['ngRoute']);
app.config([ '$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.when('/home', {
templateUrl : 'home.html',
controller : 'HomeController'
}).
$routeProvider.when('/', {
templateUrl : 'index.html',
controller : 'myCtrl'
}).
otherwise({
redirectTo: 'home.html'
});
//$locationProvider.html5Mode(true); //Remove the '#' from URL.
}
]);
app.controller('myCtrl', function($scope,$location) {
// $scope.count = '';
$scope.login = function(username, password) {
if (username == 'admin' && password == '1234')
{
$location.path("/home" );
}
else
{
alert('invalid username and password');
}
}
});
</script>
</body>
home.html
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="HomeConroller">
<button ng-click="myFunction()">Click Me!</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('HomeConroller', function($scope) {
$scope.count = 0;
$scope.myFunction = function() {
$scope.count++;
}
});
</script>
</body>
</html>
Try:
window.location.href = "home.html";
Instead of
$location.path("/home" );
I have a very frustrating problem...I have a page with four templates and four corresponding states in my angular file. They all work fine except one, 'detail'; I can get to it by clicking the button in the 'home' template, but once there, it will not render the HTML inside the template.
angularApp.js:
var app = angular.module('app', ['ui.router']);
app.factory('auth', ['$http', '$window', function($http, $window){
var auth = {};
auth.saveToken = function(token){
$window.localStorage['app-token'] = token;
};
auth.getToken = function(){
return $window.localStorage['app-token'];
};
auth.isLoggedIn = function(){
var token = auth.getToken();
if(token){
var payload = JSON.parse($window.atob(token.split('.')[1]));
return payload.exp > Date.now()/1000;
}else {return false;}
};
auth.currentUser = function(){
if(auth.isLoggedIn()){
var token = auth.getToken();
var payload = JSON.parse($window.atob(token.split('.')[1]));
return payload.username;
}
};
auth.register = function(user){
return $http.post('/register', user).success(function(data){
auth.saveToken(data.token);
});
};
auth.logIn = function(user){
return $http.post('/login', user).success(function(data){
auth.saveToken(data.token);
});
};
auth.logOut = function(){
$window.localStorage.removeItem('app-token');
};
return auth;
}]);
app.controller('MainCtrl', [
'$scope',
function($scope){
$scope.greeting = "hello,world";}
]);
app.controller('SecCtrl', ['$scope', function($scope){
$scope.queryObject = {};
}]);
app.controller('AuthCtrl', [
'$scope',
'$state',
'auth',
function($scope, $state, auth){
$scope.user = {};
$scope.register = function(){
auth.register($scope.user).error(function(error){
$scope.error = error;}
).then(function(){
$state.go('home');
});
};
$scope.logIn = function(){
auth.logIn($scope.user).error(function(error){
$scope.error = error;
}).then(function(){
$state.go('home');
});
};
}]);
app.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider){
$stateProvider
.state('home',{
url: '/home',
templateUrl: '/home.html',
controller: 'SecCtrl'
})
.state('detail',{
url: '/detail',
templateURL: '/detail.html',
controller: 'SecCtrl'
})
.state('login',{
url: '/login',
templateUrl: '/login.html',
controller: 'AuthCtrl',
onEnter: ['$state', 'auth', function($state, auth){
if(auth.isLoggedIn()){
$state.go('home');
}
}]
})
.state('register',{
url: '/register',
templateUrl: '/register.html',
controller: 'AuthCtrl',
onEnter: ['$state', 'auth', function($state, auth){
if(auth.isLoggedIn()){
$state.go('home');
}
}]
});
$urlRouterProvider.otherwise('home');
}
]);
index.ejs:
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='/stylesheets/style.css' />
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="javascripts/angularApp.js"></script>
</head>
<body ng-app = "app">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view>
</div>
</div>
<script type="text/ng-template" id="/home.html"><a ui-sref="detail">
<button >Go to Details</button></a>
</script>
<script type="text/ng-template" id="/detail.html">
<h1>Details!</h1> <!--This is the part that won't show up -->
</script>
<script type="text/ng-template" id="/login.html">
<div class="page-header">
<h1>Flapper News</h1>
</div>
<div ng-show="error" class="alert alert-danger row">
<span>{{error.message}}</span>
</div>
<form ng-submit="logIn()"
style="margin-top:30px;">
<h3>Log In</h3>
<div class="form-group">
<input type="text"
class="form-control"
placeholder="Username"
ng-model="user.username"></input>
</div>
<div class="form-group">
<input type="password"
class="form-control"
placeholder="Password"
ng-model="user.password"></input>
</div>
<button type="submit" class="btn btn-primary">Log In</button>
</form>
</script>
<script type="text/ng-template" id="/register.html">
<div class="page-header">
</div>
<div ng-show="error" class="alert alert-danger row">
<span>{{ error.message }}</span>
</div>
<form ng-submit="register()"
style="margin-top:30px;">
<h3>Register</h3>
<div class="form-group">
<input type="text"
class="form-control"
placeholder="Username"
ng-model="user.username"></input>
</div>
<div class="form-group">
<input type="password"
class="form-control"
placeholder="Password"
ng-model="user.password"></input>
</div>
<button type="submit" class="btn btn-primary">Register</button>
</form>
</script>
</body>
</html>
Thanks in advance for any help you can give!
Try this. Change templateURL to templateUrl:
.state('detail',{
url: '/detail',
templateUrl: '/detail.html',
controller: 'SecCtrl'
})
There is typo in defining templetUrl property name . you wrote it as
templateURL: '/detail.html',
it should be
templateUrl: '/detail.html',
I am building a TODO application using Angular-Meteor.I am following the tutorial here:
http://angularjs.meteor.com/tutorial/step_06
I have an error while I am trying to access a single todo item:
Here is my app.js
Todos = new Mongo.Collection('todos');
if (Meteor.isClient) {
var todo = angular.module('todo', ['angular-meteor', 'ui.router']);
todo.config(['$urlRouterProvider', '$stateProvider', '$locationProvider', function($urlRouterProvider, $stateProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$stateProvider
.state('todos', {
url: '/todos',
templateUrl: 'todos-list.ng.html',
controller: 'todoListController'
})
.state('todoDetails', {
url: '/todos/:todoId',
templateUrl: 'todo-details.ng.html',
controller: 'todoDetailsController'
});
$urlRouterProvider.otherwise("/todos");
}]);
todo.controller('todoListController', ['$scope', '$meteor', function($scope, $meteor) {
$scope.todos = $meteor.collection(Todos);
$scope.addTodo = function(todo) {
todo.date = new Date();
$scope.todos.save(todo);
};
$scope.remove = function(todo) {
$scope.todos.remove(todo);
};
$scope.clear = function() {
$scope.todos.remove();
};
}]);
todo.controller('todoDetailsController', ['$scope', '$stateParams','$meteor', function($scope, $stateParams, $meteor) {
$scope.todoId = $stateParams.todoId;
$scope.todo = $meteor.object(Todos, $stateParams.todoId);
}]);
}
My index.html:
<head>
<base href="/">
</head>
<body>
<div ng-app="todo">
<h1>
Home
</h1>
<div ui-view></div>
</div>
</body>
My todo-list.ng.html
<form>
<label for="name">Name</label>
<input type="text" id="name" ng-model="newTodo.name">
<label for="priority">Priority</label>
<input type="text" id="priority" ng-model="newTodo.priority">
<button class="btn btn-primary" ng-click="addTodo(newTodo)">Add Todo</button>
</form>
<ul>
<li ng-repeat="todo in todos track by $index">
{{todo.name}} {{todo.priority}} {{todo.date | date}}
<button class="btn btn-primary" ng-click="remove(todo)">Done</button>
</li>
<h4>Tasks to do: {{todos.length}}</h4>
</ul>
<button class="btn btn-primary" ng-click="clear()">Clear list</button>
And todo-details.ng.html
<h1>Your to do</h1>
<input type="text" ng-model="todo.name">
<input type="text" ng-model="todo.priority">
I have no idea, what am I doing wrong, following the official tutorial step by step, just replace parties with todo, honestly.
Any ideas ?
It turns out it was a bug caused by Meteor itself.
I have created an issue on Github and it was fixed.
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>