Angular- View Not loading

Question

I wrote a file new.html and I am trying to test navigation. But when i load the page View1.html should be loaded but it shows a blank page. Here is my new.html:

<!DOCTYPE html>
<html data-ng-app="demoApp">
    <head> 
        <title> Angular Test</title>
    </head>
    <body>
        <div>
            <div data-ng-view></div>
        </div>
        <script src = "Scripts/angular.min.js"></script>
        <script src="Scripts/angular-route.min.js"></script>
    </body>
    <script>
        var demoApp = angular.module('demoApp', ['ngRoute']);
        demoApp.config(function ($routeProvider) {
            $routeProvider
                .when('/', 
                {
                    controller: 'SimpleCtr',
                    templateUrl: 'View1.html'
                })
                .when('/2',
                {
                    controller: 'SimpleCtr',
                    templateUrl: 'View2.html'
                })
                .otherwise({ redirectTo: '/' });
        });
        demoApp.controller('SimpleCtr', function($scope) {
                $scope.customers = [
                    { name:'Rajat', city:'Kanpur' }, 
                    { name:'Adarsh', city:'Lucknow' }, 
                    { name:'Manoj', city:'Banaras' }
                ];

                $scope.addCustomer = function() {
                    $scope.customers.push({ name: $scope.newCustomer.name, city: $scope.newCustomer.city });
                }
            });
    </script>
</html>

And here is my View1.html:

<div class="container">
    <h2> View 1 </h2>
    Name: <br/>
    <input type="text" data-ng-model="filter.name"/>
    <br/>
    <ul>
        <li data-ng-repeat = "cust in customers | filter:filter.name | orderBy:'city'"> {{cust.name}} </li>
    </ul>
    Customer Name: <br/>
    <input type="text" data-ng-model="newCustomer.name"/>
    <br />
    Customer City: <br />
    <input type="text" data-ng-model="newCustomer.city"/>
    <br />
    <button data-ng-click = "addCustomer()"> Add Customer </button>
    <a href = "#/2" > View 2 </a>   
</div>

Here is View2.html:

<div class="container">
        <h2> View 2 </h2>
        City:
        <br/>
        <input type="text" data-ng-model="city" />
        <br/>
        <ul>
            <li data-ng-repeat = "cust in customers | filter:filter.city | orderBy:'city'"> {{cust.name}} </li>
        </ul>
</div>

Please help me where i am going wrong?

i tried <div data-ng-view= "" ></div> but now i am getting error as XMLHttpRequest cannot load file://localhost/Users/XYZ/angularTest/View1.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource. — Rajat Nigam
– Rajat Nigam, Commented Sep 28, 2015 at 6:59
and 2 more errors as: Failed to execute 'send' on 'XMLHttpRequest' and Error: [$compile:tpload] — Rajat Nigam
– Rajat Nigam, Commented Sep 28, 2015 at 7:00
It works on Plnr plnkr.co/edit/NmfnOMTRHXzsLkcHfgZX?p=preview — geckob
– geckob, Commented Sep 28, 2015 at 7:04
Install a webserver like XAMPP on windows and access your website through localhost:80 — posixpascal
– posixpascal, Commented Sep 28, 2015 at 7:04
You have to run in over http not just accessing the file using browser. — geckob
– geckob, Commented Sep 28, 2015 at 7:04

posixpascal · Accepted Answer · 2015-09-28 07:03:56Z

1

You are missing a closing bracket in your code on line 8

<!DOCTYPE html>
<html data-ng-app="demoApp">
    <head> 
        <title> Angular Test</title>
    </head>
    <body>
        <div>
            <div data-ng-view> </div> <!-- right here -->
        </div>

I created a plunker here: http://plnkr.co/edit/uj4S1ybv7vJSsQctG1nD http://plnkr.co/edit/uj4S1ybv7vJSsQctG1nD

Your views aren't loaded because you try to access them using the file:// protocol. If you put your website on a HTTP server (XAMPP for example) you'll get the desired result.

edited Sep 28, 2015 at 7:03

answered Sep 28, 2015 at 6:56

posixpascal

3,1603 gold badges27 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rajat Nigam Over a year ago

i changed but its same.

geckob · Accepted Answer · 2015-09-28 07:08:44Z

0

It works fine with Plnkr. http://plnkr.co/edit/NmfnOMTRHXzsLkcHfgZX?p=preview

My best guess is you are not running the file in HTTP server. The simplest HTTP server is, run this command in your working directory:

python -m SimpleHTTPServer

Then, request your program in browser

localhost:8000/new.html

edited Sep 28, 2015 at 7:08

answered Sep 28, 2015 at 7:07

geckob

8,2085 gold badges36 silver badges43 bronze badges

2 Comments

posixpascal Over a year ago

he's using windows so python isn't available.

geckob Over a year ago

@praszyk It should be available. stackoverflow.com/questions/17351016/…

Collectives™ on Stack Overflow

Angular- View Not loading

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related