AngularJS ng-view commented out

Question

I want to use ng-view in angularjs. I created 3 html files in a folder. Two of them "view1.html" and "view2.html" are the pages that must be loaded inside ng-view. The third file is my main file which included the angularjs code as below:

<head>
<meta charset="utf-8" />
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>
<script>
    var angularModule = angular.module('demoApp', ['ngRoute']);

    angularModule.config(['$routeProvider',
        function ($routeProvider) {
            $routeProvider
            .when("/viewq", { controller: "testController", templateUrl: "/view1.html" })
            .when('/vieww', { controller: 'testController', templateUrl: '/View2.html' })
            .otherwise({ redirectTo: '/viewq' });
        }]);

    angularModule.controller('testController', function ($scope) {
        $scope.systemData = [{ name: "Test", city: "Frankfort" },
            { name: "John", city: "New york" },
            { name: "Mike", city: "London" }
        ];

    });

</script>

<body>
   <div ng-app="demoApp">
      <div ng-view></div>
   </div>
</body>

The problem is the ng-view is commented out so I don't have the html files loaded.

NOTE: I received this error: XMLHttpRequest cannot load file:///C:/AngularJS/view1.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Does it mean it is not possible to write ng-view without hosting it? Could anyone give me a reference if it is the case?

@Subin sorry i missinterpreated it and OP here is working plunker http://plnkr.co/edit/52iNa1w7Mcj3lc9WoYaX?p=preview — squiroid, Mar 08 '15 at 13:34
http://stackoverflow.com/questions/24124509/why-does-angularjs-ng-view-not-work-locally — Subin Sebastian, Mar 08 '15 at 13:44
http://stackoverflow.com/questions/19502978/do-angular-views-work-when-a-site-is-served-from-the-local-file-system — Yahya Uddin, Mar 08 '15 at 13:45

score 0 · Accepted Answer · edited May 23 '17 at 12:31

0

To use ng-view, you would probably would want to use a server or else your very likely to hit the cross origin request problem that you faced.However, if really want to use the local file system, you could disable same origin policy in chrome (although I'm not sure that would work, nor would I even recommend it): Disable same origin policy in Chrome

Another alternative method is mentioned here: https://stackoverflow.com/a/23492993/3006737

Personally I would not do either and suggest you use some sort of server. You don't even need to use any of the server features. Just to run the actual page. I typically just run the built in PHP server (even though I'm not using any PHP files), although something like Node and Apache could work fine.

http://php.net/manual/en/features.commandline.webserver.php

edited May 23 '17 at 12:31

Community

1
1

answered Mar 08 '15 at 13:56

Yahya Uddin

18,489
26
104
189

For using ngview we need to host the pages on a Web server like IIS as AngularJS use Ajax for loading pages inside ng-view. – Mehrdad Babaki Mar 16 '15 at 05:59
1

That is correct. Even though AngularJs uses AJAX to load the data, you need a webserver to run the Angular app when using a "ng-view", due to security reasons. Else, any website could potentially access your file system. – Yahya Uddin Mar 16 '15 at 10:56

AngularJS ng-view commented out

1 Answers1