In my application, when we logged in I am passing an Http get request for an image. The image is being loaded successfully but it is not displayed until I refresh the page.
I want it to be displayed when I logged in by using angular in my application.
<img ng-src="{{ProfileImage}}" />
This is the HTTP call:
$http.get('URLpath')
.then(function(response){
$scope.ProfileImage=response.data;
}
The image is getting loaded from the source but it is not displayed immediatley when i log in.
It is displayed after refreshing the page.
var app = angular.module('myApp', []);
app.controller('DemoCtrl', function($scope, $http) {
$scope.myObj = {
"image":"https://www.w3schools.com/css/trolltunga.jpg",
};
});
<!DOCTYPE html>
<html>
<body>
<div ng-app="myApp" ng-controller="DemoCtrl">
<img src="{{myObj.image}}" width="100" height="100">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</body>
</html>
You should either wrap your image to ng-if so it should appear after the data is loaded or assign some valid data to $scope.ProfileImage before response comes. Otherwise, your ng-src is neglected.
thanks for the response guys.
This issue is fixed by storing the image to window local storage and then accessing it using angular {{ProfileImage}}.
Related
I have created CEF base desktop application, where I want to show two tabs ( login, iframeView), clicking on iframeView tab should load the iframe and show the content accordingly.
I use https://github.com/angular-ui/ui-router library to route the page.
but the problem here is, whenever we click on the second tab which has iframe, iframe takes time to load the content, what I want is, it should show iframe content immediately as soon as user click on tab, if I remove iframe code and add any other tags, it show the content quickly,
we have set Cache-Control: public, max-age=21600 in response header of URL https://example.com to get content loaded from cache but still it takes a time to load the content.
I tried by adding below Iframe code in main DOM and then tried to copy the same Iframe when the user clicks on the second tab but still, it takes the time to load the content.
is there any way to load the iframe content quickly?
Why is iframe slow?
index.html
<!DOCTYPE html>
<html lang="en">
[...]
<body ng-app="name" ng-controller="mainController" ng-init="init()" ui-
view>
</body>
</html>
mainController
.controller('mainController', function ($scope, $state, session, [...]) {
$scope.tabClick = function () {
$state.go('iframeView');
});
};
})
EDIT: Route definitions
.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('iframeView', {
url: '/iframeView',
template: '<frame-view layout flex></frame-view>'
})
})
HTML of iframe-view
<iframe id="myIframe" src="https://example.com" style="width500px;height:500px"></iframe>
I'm learning angularjs and there is one aspect of it that I'm struggling to understand.
My desired/expected behavior of the code below is:
User clicks the Paris link (anchor tag)
The routeProvider intercepts the request, loads the paris.html page into the ng-view.
The 'getCity' function in the controller gets the data and sets the scope variables, which are displayed in the london.html expressions.
However, I can't figure out how to config angularjs to use the 'getCity' function when the html page is loaded into the ng-view. The closest I can get is calling the 'getCity' function from within the CityController itself, bit this seems to have the undesired effect of calling the function when the whole app (index.html) is loaded instead of only when the link is clicked. The controller will have a number of different functions.
I also know you can use ng-click to call a controller's function, but I'm unsure how this would work with loading a html page into an ng-view through the route provider.
Any help would be appreciated. Please see code below from a small app built for learning purposes:
index.html
<!DOCTYPE html>
<html ng-app="mainApp">
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.js"></script>
</head>
<body>
<ol>
<li>Paris</li>
</ol>
<div class="content-wrapper" ng-controller="CityController">
<div ng-view></div>
</div>
<script src="resources/js/app.js"></script>
<script src="resources/js/CityController.js"></script>
</body>
</html>
app.js
var app = angular.module("mainApp", [ 'ngRoute' ]);
app.config([ '$routeProvider', function($routeProvider) {
$routeProvider.
when('/cities/paris', {
templateUrl : 'resources/paris.html',
controller : 'CityController'
}).
otherwise({
redirectTo : ''
});
} ]);
CityController.js
app.controller('CityController', function($scope, $http) {
$scope.getCity = function() {
$http.get('city')
.success(function(response) {
$scope.name = response.name;
$scope.country = response.country;
}).error(function() {
//Output error to console
});
};
//$scope.getCity();
});
I don't want to call getCity here because it means the http get request to
the 'city' endpoint is called when index.html is loaded
paris.html
This is Paris.
<br><br><br>
Name: {{name}}<br>
Country: {{country}}
<br><br><br>
I think what you are looking for is the router resolve option.
A resolve contains one or more promises that must resolve successfully before the route will change. This means you can wait for data to become available before showing a view, and simplify the initialization of the model inside a controller because the initial data is given to the controller instead of the controller needing to go out and fetch the data.
Check the explanation and usage here
You can call getCity() from paris.html using ,ng-init=getCity() ,ng-init will call your function as soon as paris.html is loaded into your ng-view .
For Eg.
This is Paris.
<br><br><br>
<div ng-init=getCity() >
Name: {{name}}<br>
Country: {{country}}
</div>
<br><br><br>
I have index.html file which have these following below codes. I want to show result to other view searchResult.html when submitting the form. I retrieve the form data in homeCtrl but i can't do when submitting the form show the retrieved data to searchResult.html page. Please help me.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
//head code...
</head>
<body ng-controller="homeCtrl">
<form ng-submit="doSearch()">
<input type="search" placeholder="From" ng-model="search.from">
<input type="search" placeholder="Destination" ng-model="search.to">
<button type="submit">Search</button>
</form>
<div ng-view></div>
</body>
</html>
var app = angular.module('myApp', [])
app.controller('homeCtrl', function($scope, $location) {
$scope.doSearch = function() {
$scope.search={};
$scope.search=$scope.search;
//retrieved data here
}
});
You can get the data in homeCtrl and store it in rootscope or localstorage then redirect page to search page and retrieve data from rootscope or localstorage to searchCtrl scope.
It may be tempting to pass data around through the $rootScope, but this is problematic. To start, your data is now bound to the root scope, and can’t be moved off into isolation. Not only is this harder to test, but it can’t be used through multiple applications if need be.
take out your Searching logic in Separate Service.
use ui-router for URL routing.
Following links will be helpful!
navigation with routing -part1
navigation with routing -part2
I am new to AngularJS and I am trying to understand it by studying sample codes.
Here I have one about $http.get, from the following link:
http://www.w3schools.com/angular/tryit.asp?filename=try_ng_customers_json
I just replaced url with one of my own but it did not work, and I am really confused, please help, thanks!
=========================
second edit: thanks to the answers, double ng-app is a mistake, but it is not the main reason for this problem. I think it has something to do with cross-site blocking, but I have turn it off on my API (I use codeigniter REST API and I set $config['csrf_protection'] = FALSE; ), I am not sure how to configure it.
<!DOCTYPE html>
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="customersCtrl">
<ul>
{{names}}
</ul>
</div>
<div ng-controller="myCtrl">
<ul>
{{names}}
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://www.w3schools.com/website/Customers_JSON.php")
.success(function (response) {$scope.names = response;});
});
app.controller('myCtrl', function($scope, $http) {
$http.get("https://manage.pineconetassel.com/index.php/api/v1/colors2.php")
.success(function (response) {$scope.names = response;});
});
</script>
</body>
</html>
The problem is that you have two "myApp" declarations.
From AngularJS documentation:
Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application.
So, you should move the ng-app="myApp" to the body element.
However, once you've done that you probably still won't see any result because you are cross-site scripting and browsers will (by default) block the second request.
Two ng-app directive on single page will execute the first one, 2nd one will get ignored.
Remove ng-app="myApp" from both div of your html and use angular.bootstrap to bootstrap angular app on html page using below code.
Code
angular.element(document).ready(function() {
angular.bootstrap(document, ['myApp']);
});
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="angular-route.js"></script>
</head>
</head>
<body ng-app="myApp" ng-controller="cont1">
<a href=#dogs>dogs</a> <a href=#cats>cats</a>
<div ng-view></div>
<script>
angular.module("myApp", ['ngRoute']).config ('$routeProvider',function($routeProvider){
$routeProvider.when("/dogs", {templateUrl: "one.html"})
.when("/cats", {templateUrl: "two.html"})
.otherwise("/cats", {redirectTo: "/dogs"})
});
app.controller("cont1", function($scope){ $scope.model = {message: "This is my app One!!!"} });
</script>
</body>
</html>
I am unable to get the message in paragraph 'Here are the cats' or 'Here are the dogs' on clicking the two links; these files are saved as one.html and two.html in the same folder.
I have downloaded and added the angular-route.js file in the same folder. Kindly help!
I have put controllers in routerProvider but it is not necessary, and adding it to it wont run! :(
You are forgetting to insert the controllers for your templates inside the object in when. See below:
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="angular-route.js"></script>
</head>
</head>
<body ng-app="myApp" ng-controller="cont1">
<a href=#dogs>dogs</a> <a href=#cats>cats</a>
<div ng-view></div>
<script>
angular.module("myApp", ['ngRoute']).config ('$routeProvider',function($routeProvider){
$routeProvider.when("/dogs", {
templateUrl: "one.html",
controller: "cont1"
})
.when("/cats", {
templateUrl: "two.html",
controller: "cont1"
})
.otherwise("/cats", {redirectTo: "/dogs"})
});
app.controller("cont1", function($scope){ $scope.model = {message: "This is my app One!!!"} });
</script>
</body>
</html>
If you're opening this html file directly in the browser, it won't work. This is because your template files will be loaded using AJAX. To make sure the user's data from one site cannot be fetched by a malicious other site, AJAX requests must adhere to the Same origin policy. The minute details of this policy are outside the scope of this answer, but it means that one site page can't make requests to another site. Files loaded directly from disk (loaded using the `file://' url scheme) don't have an origin so the cross origin policy check will always fail.
To solve this problem, put your files on a server, and try acessing them from there. If you're using a mac, you canuse Python's simple http server, which comes preinstalled on your mac. On windows, you can use mongoose.
When you use the minify-proof syntax for angular you pass the parameters as an array, so instead of:
config('$routeProvider',function($routeProvider){
$routeProvider.when("/dogs", {
...
});
you needed:
config(['$routeProvider',function($routeProvider){
$routeProvider.when("/dogs", {
...
}]);
http://plnkr.co/edit/7NiWduPXCIKutSF243Hg?p=preview
I checked it out with Team. I just had to remove the controller from the top part of the code in Html file, and it would work fine.
<body ng-app="myApp" ng-controller="cont1">
should be turned to ...
<body ng-app="myApp">
Thanks buddies for helping me though!