I have a simple html and on that page i am trying to include some other html page for user detail. but some how the page is not being included.
On index page i have following code
<form>
<input type="Search" placeHolder="Enter Name" ng-model="user"/><br>
<input type="Button" value="Search" ng-click="Search()"/>
<div ng-include src="'userDetail.html'">
</div>
</form>
I have tried following.
<ng-include src="'userDetail.html'"></ng-include>
<div ng-include="'userDetail.html'"></div>
<div ng-include src="'userDetail.html'"></div>
The error code I am getting is
Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource.
Please see attached screenshot for further details.
The reason for the error is right in its description. You need to run your app in any of the listed protocols (for local development that's http or https 99,9% of the time). Instead you are running it as a file on the disk (notice the file:// in your URL).
You must use a local HTTP server (like Apache or IIS) or use a IDE with build-in server (I recommend Brackets for its great preview function) to serve your content to be able to properly test the application locally.
Related
I have tried several things to clear browser cache while routing between pages.like cache: false , index.html?x=1 ,target="_self" ,disableCache: true, in $routeProvider as well.but any of this didn't worked for me.finaly $window.location.reload(); worked.but i do not want reload the page every time when routing.is there any perfect solution for route cache in AngulerJs?
scenario
In my header.html have ng-if="currentPath ==='/store'".it's check current path and display some styles regarding to store in header.html
header.html
<div class="container" ng-if="currentPath ==='/store'">
<div class="col-xs-8 buttons" >
<a class="brand" href="#" target="_self"><img src="img/logo.png" /></a>
<a class="btns" href="#Store" target="_self">Store</a>
</div>
<ul class="col-xs-4 icons">
<li ><i class="fa"></i>{{user.email}}</li>
<li> <span ng-show="cart_size > 0" class="count">{{cart_size}}</span></li>
</ul>
<--some styles for store.......-->
</div>
<div class="container" ng-if="currentPath !=='/store'">
<div class="col-xs-8 buttons" >
<a class="brand" href="#" target="_self"><img src="img/logo.png" /></a>
<a class="btns" href="#Store" target="_self">Store</a>
</div>
</div>
current issue
when i go into store page i have to refresh browser to display store styles in header.
after that go into another page,store styles still display in header.then i have to refresh again.
how to solve this issue?
You may try
angular.element('html[manifest=saveappoffline.appcache]').attr('content', '');
where you want to disable cache.
The manifest attribute specifies the location of the document's cache manifest.
As per w3schools.com
HTML5 introduces application cache, which means that a web application
is cached, and accessible without an internet connection.
Application cache gives an application three advantages:
Offline browsing - users can use the application when they're offline
Speed - cached resources load faster
Reduced server load - the browser will only download updated/changed resources from the server
The manifest attribute should be included on every page of your web
application that you want cached.
The manifest file is a simple text file that lists the resources the
browser should cache for offline access.
To learn more about how to create the manifest file, please read our
HTML5 Application Cache chapter.
Another solution that you can try is add following snippet on your angular apps header so that your page will never be cached.
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
I am new to Angular JS. I am trying to include profile.html within profiletest.html by using ng-include.
Given below is the code of my profiletest.html
profiletest.html
<body>
<div ng-app="guestProfileApp">
<div ng-controller="guestProfileController">
<button ng-click="getProfile(401)">Show Profile</button>
<ng-include ng-if="showProfile" src="'profile.html'"></ng-include>
</div>
</div>
When I am making changes to the profile.html code, the changes are not getting updated in when I refreshed the profiletest.html in browser.
You can deactivate the browser cache - In Chrome Dev Tools on the bottom right click on the gear and tick the option.
Disable cache (while DevTools is open)
In Firefox there is the same option in Debugger -> Settings -> Advanced Section
(Not sure if it works in firefox. Alot of people say it doesn't work for them)
I'm following a Code School tutorial on Angular. I'm trying to include a template with ng-include. I have the following code:
<h3 ng-include="'product-title.html'"></h3>
and my product-title.html
{{product.name}}
<em class="pull-right">{{product.price | currency}}</em>
When I inspect the element it shows <!-- ngInclude: 'product-title.html' -->
Question. Do I need to be running a web server in order for this to work?
Yes, you need to run your application from a server. Templates are loaded via AJAX call, and those calls need to originate from a webserver.
You have several lightweight options to run an ad-hoc static files servers, e.g.:
node's simple-server (https://github.com/balupton/simple-server)
python's python -m SimpleHTTPServer
I was getting myself started with Angular JS.
I tried to put angular code in my html page and then I tried to open up browser but Angular JS didn't worked.
But when I requested the same page from server It did worked
A bit of mystry ...
as soon as angular need to load template code using a template url you have to serve the page via HTTP because angular can only load templates using HTTP.
one example would be :
<div>
<div ng-include="'templateA.htm'"></div>
<div ng-include="'templateB.htm'"></div>
</div>
Some directives of AngularJS use AJAX to load themselves and by default navigators like Chrome block AJAX request when they are local.
You can open your AngularJS app in any server e.g: http-server
maybe a stupid question but I don't succedd to view angular website as local host.
this is the website i downloaded : https://github.com/kenyee/angularjs-cart
i see only the title ang get error in console :
"XMLHttpRequest cannot load file:///C:/Users/--name--/Dropbox/angularjs-cart-master/angularjs-cart-master/ShoppingCart/partials/store.htm. Received an invalid response. Origin 'null' is therefore not allowed access. "
thanks for any help!
If the url says similar to file:///C:/Users/... its not running on localhost.. its just open as a file.
It needs to be ran from a 'server'..
If using Windows add the folder as a site on IIS, on Mac use something like MAMP..
Or open the folder in an IDE (Editor) that runs a server automatically for you.. such as Visual Studio or Brackets.
If you can let me know which your using I can add more info if you need it.
UPDATED: although it's true a raw angular page is client side and doesn't need to run from a server.. if it's pulling in other files from the local file system. (i.e. scripts / css / templates / partials) it needs to be running on a server as the browser doesn't have access to just pull in files from the file system unless they are served via server.. (for obvious security reasons)
You should have no issues viewing an AngularJS website in localhost.
AngularJS is client side.
EDIT: I downloaded and checked all of the pages for you. It loads up nice on my side. Just remember since AngularJS is client side you don't need a server. Instead of running it on localhost (I assume XAMPP or something is what your using), just right click + open with a browser.
Remember to open the main html (default.html) first, and perhaps read some html/css/js docs before jumping strait into AngularJS!
Good luck!
If You have Xampp installed on your system then put ShoppingCart folder in
xampp/htdocs folder`
After This hit the url
[http://localhost/ShoppingCart/#].
It will work as this application on my system.
You definitely need a local server (WAMP on Windows or Lamp on Linux) to run Angular application as David Beech suggests. In my case I couldn't figure out why this simple Angular check form code from Plunk wouldn't work properly on my computer (it didn't seem to lead the css code).
<body ng-app="formExample">
<div ng-controller="ExampleController">
<form novalidate class="css-form">
Name: <input type="text" ng-model="user.name" required /><br />
E-mail: <input type="email" ng-model="user.email" required /><br />
Telephone: <input type="number" ng-model="user.number" required /><br />
<input type="submit" ng-click="update(user)" value="Save" />
</form>
</div>
<style type="text/css">
.css-form input.ng-invalid.ng-touched {
background-color: #FA787E;
}
.css-form input.ng-valid.ng-touched {
background-color: #78FA89;
}
</style>
<script>
angular.module('formExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.master = {};
$scope.update = function(user) {
$scope.master = angular.copy(user);
};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
}]);
</script>
</body>
I did my search on google, found this great example of Single Page Angular App where it says you need some local environment, otherwise Angular routing won't work. I fired my Wamp server, put the code to "www" directory, and lo and behold, the angular triggered css worked just fine.