1

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?

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

2 Answers 2

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.

1
  • i changed but its same. Sep 28, 2015 at 6:58
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

2

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.