AngularJS routes - views not loading -
i attempting load 2 different partials page. routes seem working. i.e i'm redirected #/view1 default, want. when partials/view1.html not loaded page, , same true when manually navigate #/view2. can't seem figure out missing.
here index.html:
<!doctype html> <html ng-app="demoapp"> <head> <title>using angularjs directives , data binding</title> </head> <body> <div> <div ng-view> <!-- placeholder views --> </div> </div> <script src="scripts/angular.min.js"></script> <script src="scripts/angular-route.min.js"></script> <script> var demoapp = angular.module('demoapp', ['ngroute']); demoapp.config(['$routeprovider', function ($routeprovider) { $routeprovider .when('/view1', { controller: 'simplecontroller', templateurl: 'partials/view1.html' }) .when('/view2', { controller: 'simplecontroller', templateurl: 'partials/view2.html' }) .otherwise({ redirectto: '/view1' }); }]); demoapp.controller('simplecontroller', function ($scope) { $scope.customers = [ { name: 'john smith', city: 'phoenix' }, { name: 'john doe', city: 'new york city' }, { name: 'jane doe', city: 'san francisco' } ]; $scope.addcustomer = function() { $scope.customers.push( { name: $scope.newcustomer.name, city: $scope.newcustomer.city }); }; }); </script> </body> </html> and partials/view1.html :
<div class="container"> <h2>view 1</h2> name: <br> <input type="text" ng-model="filter.name"> <br> <ul> <li ng-repeat="cust in customers | filter: filter.name | orderby: 'city'">{{ cust.name }} - {{ cust.city }}</li> </ul> <br> customer name: <br> <input type="text" ng-model="newcustomer.name"> <br> customer city: <br> <input type="text" ng-model="newcustomer.city"> <br> <button ng-click="addcustomer()">add customer</button> <br> <a href="#/view2">view 2</a> </div> and partials/view2.html
<div class="container"> <h2>view 2</h2> name: <br> <input type="text" ng-model="city"> <br> <ul> <li ng-repeat="cust in customers | filter: name | orderby: 'city'">{{ cust.name }} - {{ cust.city }}</li> </ul> </div>
try relative url template: templateurl: './partials/view2.html'
edit (from comment):
xmlhttprequests don't work locally - xmlhttprequest local files, best bet install webserver host content via http locally. apache easiest / installed, although can use node, nginx, etc..
Comments
Post a Comment