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
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, Sep 28 '15 at 06:59
and 2 more errors as: Failed to execute 'send' on 'XMLHttpRequest' and Error: [$compile:tpload] — Rajat Nigam, Sep 28 '15 at 07:00
It works on Plnr http://plnkr.co/edit/NmfnOMTRHXzsLkcHfgZX?p=preview — geckob, Sep 28 '15 at 07:04
Install a webserver like XAMPP on windows and access your website through `localhost:80` — posixpascal, Sep 28 '15 at 07:04
You have to run in over http not just accessing the file using browser. — geckob, Sep 28 '15 at 07:04

posixpascal · Accepted Answer · 2015-09-28T07:03:56.083

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 '15 at 07:03

answered Sep 28 '15 at 06:56

posixpascal

3,031
3
25
44

i changed but its same. – Rajat Nigam Sep 28 '15 at 06:58

geckob · Answer 2 · 2015-09-28T07:08:44.650

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 '15 at 07:08

answered Sep 28 '15 at 07:07

geckob

7,680
5
30
39

he's using windows so python isn't available. – posixpascal Sep 28 '15 at 07:08
@praszyk It should be available. http://stackoverflow.com/questions/17351016/set-up-python-simplehttpserver-on-windows – geckob Sep 28 '15 at 07:09

Angular- View Not loading

2 Answers2