In PLUNK everything works fine. Why doesn't it work on the computer?

N

Nikolay2015-05-05 17:24:34

css

Nikolay, 2015-05-05 17:24:34

Application in PLUNK index.html
file:

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="utf-8" />
    <title>AngularJS - Getting Started!</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/css/foundation.min.css">
</head>
<body>

    <div class="row">
        <h1 class="text-center">AngularJS - Getting Started</h1>
    </div>

    <ng-view></ng-view>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script>
    <script type="text/javascript" src="app.js"></script>

</body>
</html>

login.html file :

<form>
    <div class="row">
        <div class="small-6 large-centered columns columns">
            <input type="text" placeholder="Login" />
        </div>
        <div class="small-6 large-centered columns columns">
            <input type="password" placeholder="Password" />
        </div>
        <div class="small-6 large-centered columns columns">
            <button class="button">Log-In</button>
        </div>
    </div>
</form>

app.js file :

var app = angular.module('app', ['ngRoute']).config(function ($routeProvider) {
    $routeProvider.when('/login', {
        templateUrl: "login.html",
        controller: 'LoginController'
    });
    $routeProvider.otherwise({ redirectTo: 'login' });
});
app.controller('LoginController', function ($scope) {

});

Errors:

XMLHttpRequest cannot load file:///C:/Users/Adminchic/Desktop/Angular.js/login.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///C:/Users/Adminchic/Desktop/Angular.js/login.html'.

Reply

Answer the question

In order to leave comments, you need to log in

3 answer(s)

T

TCloud, 2018-05-18
@OTCloud

Why do you need to torture the radio battalion? Make buttons with input and process them through js. Less fuss

G

Good UI, 2018-05-18
@you_web

If I understand correctly, then something like this - https://codepen.io/you_web/pen/YLRLKO
But as far as I remember, custom styling of checkboxes is not recommended.
I will not fully describe the algorithm for this example, it will be clear from the code, I will only say the meaning:
1) Hide the default checkbox
2) Create an element that will replace it
3) Set the necessary styles + positioning for it
4) Using a pseudo-class (in this case :checked) + pseudo-element (if desired, you can do without it), you set a custom style.
Dimensions, background, etc. change as you need

A

Alexey, 2015-05-05
@tryvols

Probably because you are just opening the page from disk. Start some web server and load your application via http protocol.