All geek questions in one place

NgRoute does not work until error messages are reported

I am new to AngularJS and I created a simple application that has the following pages.

1) index.html

2) View1.html

3) View2.html

The problem I encountered is the routing of the application in View1 and View2. No output and browser. After some research, I realized that from Angular version 1.2 a separate angular -route.js "file should be added ahead, which I did but did not get any help. Can you look at that and provide a solution.

PS: I am new to Angular, so pls save me if I make some small mistakes.

Here is my code.

index.html

<html data-ng-app="demoApp"> <head> <title>Using AngularJS Directives and Data Binding</title> <meta charset="UTF-8"> <script src="Scripts/angular.js"></script> <script src="Scripts/angular-route.js"></script> </head> <body> <div> <!--Placeholder for Views--> <div data-ng-view=""></div> </div> <script> var demoApp = angular.module('demoApp',['ngRoute']); demoApp.config(function($routeProvider){ //demoApp.config(['$routeProvider',function($routeProvider){ $routeProvider .when('/view1',{ controller: 'SimpleController', templateurl: 'Partials/View1.html' }) .when('/view2',{ controller: 'SimpleController', templateurl: 'Partials/View1.html' }) .otherwise({ redirectTo: '/view1'}); }); demoApp.controller('SimpleController', function ($scope) { $scope.customers = [ {name:'John Smith', city:'Phoenix'}, {name:'John Doe', city:'New York'}, {name:'Jane Doe', city:'San Fancisco'} ]; $scope.addCustomer = function() { $scope.customers.push( { name: $scope.newCustomer.name, city: $scope.newCustomer.city }); }; }); </script> </body>

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 | uppercase}} - {{cust.city | lowercase }}</li> </ul> <br /> Customer Name:<br /> <input type="text" data-ng-model="newCustomer.name" /> <br /> Customer City:<br /> <input type="text" data-ng-model="newCustomer.city" /> <br /><br /> <button data-ng-click="addCustomer()">Add Customer</button> <br /><br /> <a href="#/view2">View 2</a>

View2.html

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

+5
source share
2 answers

Typo:

 templateurl: 'Partials/View1.html'

it should be

 templateurl: 'Partials/View1.html'

Angular will not load anything since no template is provided.

+6
source

Remove ng-app from the html tag and add it to the body tag.

0
source

Source: https://habr.com/ru/post/1239419/

More articles:


All Articles