Im buildning a login system with angularjs and php, and after successfully logged in, a new page should be visible to the user.
The problem I have is that the view Im trying to load seems not to be loaded. The page content is not displayed.
Here is my controller:
var gameApp = angular.module("gameApp", []);
gameApp.service('link', function() {
this.user = false;
});
gameApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'partials/firstpage.html',
controller : 'firstPageCtrl'
})
.when('/game', {
templateUrl : 'partials/game.html',
controller : 'gameCtrl'
});
});
gameApp.controller("firstPageCtrl", function($scope,$http,link,$location) {
$scope.doLogin = function() {
$http.post("lib/action.php", {username: $scope.username, password: $scope.password}).success(function(data) {
if(data) {
link.user = data;
console.log(link.user);
$location.path("/game.html");
}
}).error(function(data) {
console.log(data);
});
};
});
gameApp.controller("gameCtrl", function($scope,$http,link,$location) {
alert("hej");
$scope.fisk = "fisk";
/*if(link.user) {
$scope.message = "fisk";
console.log(link.user);
} else {
$scope.message = "Ledsen fisk";
console.log("Är inte satt");
}*/
});
The view that should be loaded is game.html.
Here is my content of game.html:
asdasdsaaaaaaaaaaaaaaaa
<div ng-controller="gameCtrl">
<div id="test" style="border: 1px solid #000; width: 300px; height: 300px;">
{{message}}
{{fisk}}
</div>
</div>
The content above is not displayed.
Here is my index.html
<!DOCTYPE html>
<html ng-app="gameApp">
<head>
<link href="css/style.css" rel="stylesheet" type="text/css">
<meta content="text/html;charset=UTF-8" http-equiv="content-type" />
</head>
<body ng-controller="firstPageCtrl">
<div id="layout">
<div id="topcontent">
</div>
<div id="middlecontent">
<div ng-view></div>
</div>
<div id="bottomcontent">
{{"AngularJS"}}
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="js/mastercontroller.js"></script>
</html>
Try changing $location.path("/game.html"); to $location.path("/game"); in firstPageCtrl so it matches the exact declaration in your gameApp.config.
Related
My problem is $http.get instruction --> Without $http.get in the main page I get "random 46" (test ok) but if I insert $http.get I get "random {{ number }}".
How can I fix this?
-server.js
-public
-core.js
-index.html
server.js (node backend)
//restful api
app.get('/api/random', function(req, res) {
res.json({
"text" : "4"
});
});
//app
app.get('*', function(req, res) {
res.sendFile(__dirname + '/public/index.html');
});
core.js (angular frontend)
angular.module("myModule", [])
.controller('myController', function($scope) {
$scope.number = 46;
$http.get('/api/random')
.then(function successCallback(res) {
$scope.number = res.data;
console.log('success');
}, function errorCallback() {
console.log('Error');
});
})
index.html
<html ng-app="myModule">
<head>
<!-- META -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- Optimize mobile viewport -->
<title>Random number from sa-mp</title>
<!-- SCROLLS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"><!-- load bootstrap -->
<style>
html { overflow-y:scroll; }
body { padding-top:50px; }
#todo-list { margin-bottom:30px; }
</style>
<!-- SPELLS -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!-- load jquery -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script><!-- load angular -->
<script src="core.js"></script>
</head>
<!-- SET THE CONTROLLER AND GET ALL TODOS -->
<body ng-controller="myController">
<div class="container">
<!-- HEADER AND TODO COUNT -->
<div class="jumbotron text-center">
<h1>random <span class="label label-info">{{ number }}</span></h1>
</div>
</div>
</body>
</html>
EDIT:
I tried
res.data
$scope.$apply();
and
res.data.text
$scope.$apply();
and
res.text
$scope.$apply();
but it didn't work.
EDIT 2: RESOLVED
I replaced this
.controller('myController', function($scope) {
with
.controller('myController', function($scope, $http) {
and used this to set data
$scope.number = res.data.text;
Try to use $scope.$apply() at the last line of your callback.
like:
$http.get('/api/random')
.then(function successCallback(res) {
$scope.number = res.data.text;
$scope.$apply();
console.log('success');
}, function errorCallback() {
console.log('Error');
});
If it works. You can know more about that in this article: http://jimhoskins.com/2012/12/17/angularjs-and-apply.html
Also, you should get res.data.text to have the right value on your html. like: $scope.number = res.data.text;
I am creating an app in AngularJS, where I am grabbing the data from the backend to display on the view. But, for some reason, I am getting the data in my console but not in my view. I will be so thankful if any one can help me solve this. Thanks in advance.
Here is my code. -Services
app.factory('user', ['$http', function($http) {
var userInfo = {
getUserInfo: function () {
return $http.get('https://************/*****/**/***********')
}
};
return userInfo;
}]);
home page(view)
<div class="users" ng-repeat="user in users | filter:userSearch" >
<a href="#/users/{{ user.id }}">
<img ng-src="{{user.img}}"/>
<span class="name">{{user.first}} </span>
<span class="name">{{user.last}} </span>
<p class="title">{{user.title}} </p>
<span class="date">{{user.date}} </span>
</a>
HomeController
var isConfirmed = false;
app.controller('HomeController', function($scope, user, $http) {
if (!isConfirmed) {
user.getUserInfo().then(function (response) {
$scope.userInfo = response.data;
isConfirmed = $scope.userInfo;
console.log($scope.userInfo);
}, function (error) {
console.log(error)
});
}
});
App.js
var app = angular.module("Portal", ['ngRoute']);
app.controller('MyCtrl', function($scope) {
$scope.inactive = true;
$scope.confirmedAction = function() {
isConfirmed.splice($scope.person.id, 1);
location.href = '#/users';
}
});
index.html
<!doctype html>
<html ng-app="Portal">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,700' rel='stylesheet' type='text/css'>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="css/main.css" rel="stylesheet" />
</head>
<body>
<div class="header">
<div class="container">
<h3>Portal</h3>
</div>
</div>
<div class="main">
<div class="container">
<div ng-view>
</div>
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/HomeController.js"></script>
<script src="js/controllers/UserController.js"></script>
<!-- Services -->
<script src="js/services/users.js"></script>
</body>
</html>
change your ng-repeat="user in users" to ng-repeat="user in userInfo"
as your assigning and consoling only $scope.userInfo in your controller
The property you assign data has to be same as of binded to view.
As per your HTML data should be in users. So do it like : $scope.users = response.data;.
or if you assign data to userInfo, then bind it on html. like :
<div class="users" ng-repeat="user in userInfo | filter:userSearch" >
So im using ngRoute to load different partial html files to my index.html file. The ng-view directive loads the first partial (search.html), and when i click a link in that partial, it loads a second partial (details.html). The link click effectively makes a call (via a controller) to the OMDB API to retrieve a specific movie's details and sets $scope.movieJson = response. When i try to access this in my details.html partial, it doesnt recognise it.
index.html
<!DOCTYPE html>
<html ng-app="myApp" ng-controller="AppCtrl">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>Movie List - Home</title>
</br>
</br>
<div class="container">
<img class="" src="http://www.movie-list.com/images/logo.png" display="block" margin="auto" width="25%">
</div>
</br>
</br>
</head>
<body>
<div class='container'>
<input class="form-control searchBox" ng-show="show" type="text" name="searchBox" ng-model="movies" ng-change="getMovies()" placeholder="Enter your movie search">
</br>
<h3>Search Again</h3>
<div data.ng-view></div>
<ng-view></ng-view>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="controllers/controller.js"></script>
<script src="js/config.js"></script>
<script src="js/app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
</body>
</html>
controller.js
var myApp = angular.module('myApp', ['ngRoute']);
myApp.controller('AppCtrl', function($scope, $routeParams, $http) {
$scope.show = true;
$scope.hide = true;
$scope.getMovies = function() {
console.log("Get movies requested in controller");
$http.get("http://www.omdbapi.com/?s="+$scope.movies+"&y=&plot=full&r=json").success(function(response) {
console.log("Get movies requested in controller");
console.log($scope.movies);
console.log(response);
$scope.moviesJson = response;
});
};
$scope.getMovie = function(Title, err) {
console.log(Title);
$http.get("http://www.omdbapi.com/?t="+Title+"&y=&plot=full&r=json").success(function(response) {
console.log("Get single movie requested in controller");
console.log(response);
$scope.movieJson = response;
window.scrollTo(0, 0);
});
$scope.show = false;
$scope.hide = false;
};
$scope.reloadPage = function() {
window.location.reload();
};
});
config.js
myApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'partials/search.html',
controller : 'AppCtrl'
})
.when('/details', {
templateUrl : 'partials/details.html',
controller : 'AppCtrl'
})
.otherwise(
{
templateUrl : '<div>No Page</div>'
});
});
search.html
<div class="container" ng-controller="AppCtrl">
<div class="row" vertical-align: middle ng-show="show">
<div class="col-md-10 col-xs-10 col-lg-10">
<div data-ng-repeat="movie in moviesJson.Search" class="col-md-4 col-xs-4 col-lg-4">
<h4>{{movie.Title}}</h4>
<img class="img-responsive" ng-src="{{ movie.Poster || 'https://www.myuniverse.co.in/ABMUPictureLibrary/NoImage.jpg' }}">
</div>
</div>
</div>
</div>
details.html
<div class="container" ng-controller="AppCtrl">
<div class="col-md-10 col-xs-10 col-lg-10">
<table class="table" border="1">
<thead>
</thead>
<tbody>
<tr><h4><strong>Title:</strong> {{movieJson.Title}}</h4></tr>
<tr><h4><strong>Year:</strong> {{movieJson.Year}}</h4></tr>
<tr><h4><strong>Rated:</strong> {{movieJson.Rated}}</h4></tr>
<tr><h4><strong>Released:</strong> {{movieJson.Released}}</h4></tr>
<tr><h4><strong>Runtime:</strong> {{movieJson.Runtime}}</h4></tr>
<tr><h4><strong>Genre:</strong> {{movieJson.Genre}}</h4></tr>
<tr><h4><strong>Director:</strong> {{movieJson.Director}}</h4></tr>
<tr><h4><strong>Writer:</strong> {{movieJson.Writer}}</h4></tr>
<tr><h4><strong>Actors:</strong> {{movieJson.Actors}}</h4></tr>
<tr><h4><strong>Plot:</strong> {{movieJson.Plot}}</h4></tr>
<tr><h4><strong>Language:</strong> {{movieJson.Language}}</h4></tr>
<tr><h4><strong>Country:</strong> {{movieJson.Country}}</h4></tr>
<tr><h4><strong>Awards:</strong> {{movieJson.Awards}}</h4></tr>
<tr><h4><strong>Metascore:</strong> {{movieJson.Metascore}}</h4></tr>
<tr><h4><strong>IMDB Rating:</strong> {{movieJson.imdbRating}}</h4></tr>
<tr><h4><strong>IMDB Votes:</strong> {{movieJson.imdbVotes}}</h4></tr>
<tr><h4><strong>IMDB ID:</strong> {{movieJson.imdbID}}</h4></tr>
</tbody>
</table>
</div>
</div>
app.js
window.addEventListener('hashchange', function() {
console.log("Worked");
});
server.js
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
app.use(express.static(__dirname = '\public'));
app.use(bodyParser.json());
app.get('', function (req, res) {
console.log(req.body);
res.json();
});
app.post('', function(req, res) {
console.log(req.body);
res.json(doc);
});
app.listen(3001);
console.log("Server running on port 3001");
End result
Get rid of ng-controller="AppCtrl"
You are effectively creating 3 different instances , each with it's own scope.
The first is created by the route, then you have 2 nested instances inside that one
I am trying to develop a single page web application.In my Welcome.html i had several buttons.when user clicks a button all buttons should vanish and the respective message or any content respective to the clicked button should appear in place of that my
Welcome.html is
<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<meta charset="ISO-8859-1">
<title>Film Management System</title>
<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.min.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body background='bg1.JPG'>
<img src='bg.png' width="1270" height="222"/>
Add New Film
Modify Existing Film
<div ng-view></div>
</body>
</html>
my app.js is
var app=angular.module('myApp',['ngRoute'])
app.config(function($routeProvider) {
$routeProvider
.when('/AddNewFilm', {
templateUrl : 'AddNewFilm.html',
controller : 'AddNewFilm'
})
.when('/ModifyFilm', {
templateUrl : 'ModifyFilm.html',
controller : 'ModifyFilm'
})
.otherwise({redirectTo: '/'});
});
app.controller('AddNewFilm', function($scope) {
$scope.message = 'Hello from AddNewFilm';
});
app.controller('ModifyFilm', function($scope) {
$scope.message = 'Hello from ModifyFilm';
});
AddNewFilm.html
<div align="center">
<h1>AddNewFilm</h1>
<h3>{{message}}</h3>
</div>
ModifyFilm.html
<div align="center">
<h1>ModifyFilm</h1>
<h3>{{message}}</h3>
</div>
</html>
I'm trying to get this done using the RUG (Random User Generator) API but I can't get this to work. I should be calling the http request after a click event but it doesn't seems to work. Here is what I've done (and sorry for my amateur code):
index.html
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div id="clk" style="background-color: indigo; widht: 100px; height: 100px"></div>
{{"Hello world"}}
<div ng-controller="firstController">
{{ store.email}}
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
app.js
var app = angular.module('people', []);
app.controller('firsController', ["http",function (http) {
var store = this;
store.products = [];
$http.get('http://api.randomuser.me').success(function(data){
store.products = data.results[0].user;
})
}]);
OR
var boton = document.getElementById('clk');
boton.addEventListener('click', function () {
$.ajax({
url: 'http://api.randomuser.me/',
dataType: 'json',
success: function(data){
console.log(data.results[0].user);
}
});
});
Neither of this can work. Could I get this to work, to click a button and loading a new user from the api and use it with angular?
This is the correct way to use $http service and scope variables.
<html ng-app="people">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('people', []);
app.controller('firstController', ["$scope", "$http", function ($scope, $http) {
$scope.store = {};
$scope.store.products = [];
$http.get('http://api.randomuser.me').success(function(data){
$scope.user = data.results[0].user;
})
}]);
</script>
</head>
<body>
<div id="clk" style="background-color: indigo; widht: 100px; height: 100px"></div>
<div ng-controller="firstController">
{{ user.email}}
</div>
</body>
</html>