My code looks like this:
index.html
<!doctype html>
<html ng-app="myApp">
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"> </script>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular-route.min.js"></script>
<script src = "js/main.js"></script>
</head>
<body>
<div>
<div data-ng-view></div>
</div>
</body>
</html>
main.js
var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/view1', {
controller : 'SimpleController',
templateUrl : 'templates/view1.html'
})
.when('/view2', {
controller : 'SimpleController',
templateUrl : 'templates/view2.html'
})
.otherwise({ redirectTo : '/view1' });
}]);
app.controller('SimpleController', function ($scope) {
$scope.customers = [
{name : "John Doe", city : "San Francisco"},
{name : "John Bollinger", city : "Phoenix"},
{name : "Jane Doe", city : "Washington"}
];
$scope.addCustomer = function () {
$scope.customers.push(
{name : $scope.newCustomer.name,
city : $scope.newCustome.city
}
)
}
});
In my js folder, I have another folder called templates. In this we have 2 html files.
view1.html
<div class="container">
<h1>View 1</h1>
Enter a name to search the list
<input type="text" data-ng-model="custName" />
<ul>
<li data-ng-repeat="cust in customers | filter : custName | orderBy : 'name' ">
{{ cust.name }} - {{ cust.city }}
</li>
</ul>
<br />
Customer name: <br />
<input type="text" data-ng-model="newCustomer.name" />
Customer city: <br />
<input type="text" data-ng-model="newCustomer.city" />
<br />
<button data-ng-click="addCustomer()">Add Customer</button>
</div>
and finally...
view2.html
<div class="container">
<h1>View 2</h1>
Enter a name to search the list
<input type="text" data-ng-model="custName" />
<ul>
<li data-ng-repeat="cust in customers | filter : custName | orderBy : 'city' ">
{{ cust.name }} - {{ cust.city }}
</li>
</ul>
</div>
Any ideas why this isn't working? I tried fixing the issue with the ng-route but that didnt work either. When I open the file, the URL goes to index.html#/view1 indicating the route works, but the webpage is completely empty. None of the html elements load.
Edit: This is the error I get in developers mode:
XMLHttpRequest cannot load angular.js:8632 file:///E:/Learning%20AngularJs/templates/view1.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
Note, I do have another templates folder in the directory with index.html containing the 2 view html files.
There is nothing wrong with your code. The problem is you need to host this in a web server i think you are trying to open it from file explorer
You can deploy this in IIS or any other webserver and try.
Or you can follow below steps
make sure you install node js
create a file called server.js. put below code
var connect = require('connect'), serveStatic = require('serve-static');
var app = connect();
app.use(serveStatic('.')) app.listen(5000);
browse http://localhost:5000
It should work. I was able to do this using the code you have given
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.