CODEWITHSUNDEEP
javascriptangularjs
André Queiroz
André Queiroz

Reputation: 21

Learning to angular: ng-view not loading, why?

The page of this app just loads blank. I i searched the problem for hours and still can't find the problem. Angular is 1.3.5 and Angular-route is v1.2.28.

This is index.html: 

<html ng-app="myApp">
	<head>	
		<script src="js/angulark.min.js"></script>	
		<script src="js/angular-routek.js"></script>
		<script>
			var myApp = angular.module('myApp', ['ngRoute']);
			
				myApp.config(function ($routeProvider) {
					$routeProvider
						.when('/',
							{
								controller: 'MainController',
								templateUrl: 'views/nameView.html';						
							})	
						.when('/cityView',
							{
								controller: 'MainController',
								templateUrl: 'views/cityView.html';						
							})
						.otherwise({ redirectTo: '/' });
				});	
			
				myApp.controller('MainController', ['$scope', function($scope) {
					$scope.customers = [
						{ name: 'Andre Queiroz', city: 'Rio de Janeiro' },
						{ name: 'Fulano', city: 'Sao Paulo'}, 
						{ name: 'Beltrano', city: 'Curitiba' }
					];
				
					$scope.addCustomer() = function () {
						$scope.customers.push( 
							{ name: $scope.newCustomer.name, city: $scope.newCustomer.city } 
						);
					};			
				}]);		
		</script>
		<title>Meu Aplicativo</title>
	</head>	
	<body>	
		<div>
			<!-- Placeholder for views -->
			<div ng-view> </div>				
		</div>
	</body>
</html>

This is nameView.html 

<div class="container">	
	<div ng-controller="MainController">		
		<div>
			<h2>View 1</h2>
			Name: <input type="text" ng-model="filter.name"/>	
		</div>
		<br />		
		  <ul>
			   <li ng-repeat="cust in customers | filter:filter.name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city}}</li>
		  </ul>
		</div	
		
		<div>
			<p>Customer name:</p>
			<input type="text" ng-model="newCustomer.name" />
			<p>Customer city:</p>
			<input type="text" ng-model="newCustomer.city" />
			<button ng-click="addCustomer()">Add customer </button>
			<a href="#/view2">View 2</a>
		</div>	
	</div>
</div>

The cityView.html is the same but with no addCustomer stuff. I was dividing into module file and so on, but i put it in one file to see if it worked.

Upvotes: 1

Views: 106

Answers (2)

Leo Caseiro
Leo Caseiro

Reputation: 1845

You're actually doing well. Most of erros are syntax.

Error 1: Remove ; from templateUrl inside $routeProvider.when()

Eq. templateUrl: 'views/cityView.html'

Error 2: Can't have parentheses to create a method with this sintaxe $scope: Eq. $scope.newfunction = function() {...}

<html ng-app="myApp">
    <head>  
        <script src="js/angulark.min.js"></script>  
        <script src="js/angular-routek.js"></script>
        <script>
            var myApp = angular.module('myApp', ['ngRoute']);

                myApp.config(function ($routeProvider) {
                    $routeProvider
                        .when('/',
                            {
                                controller: 'MainController',
                                templateUrl: 'views/nameView.html'                      
                            })  
                        .when('/cityView',
                            {
                                controller: 'MainController',
                                templateUrl: 'views/cityView.html'                      
                            })
                        .otherwise({ redirectTo: '/' });
                }); 

                myApp.controller('MainController', ['$scope', function($scope) {
                    $scope.customers = [
                        { name: 'Andre Queiroz', city: 'Rio de Janeiro' },
                        { name: 'Fulano', city: 'Sao Paulo'}, 
                        { name: 'Beltrano', city: 'Curitiba' }
                    ];

                    $scope.addCustomer = function () {
                        $scope.customers.push( 
                            { name: $scope.newCustomer.name, city: $scope.newCustomer.city } 
                        );
                    };          
                }]);        
        </script>
        <title>Meu Aplicativo</title>
    </head> 
    <body>  
        <div>
            <!-- Placeholder for views -->
            <div ng-view> </div>                
        </div>
    </body>
</html>

There're some HTML errors in your view. Make sure to validate your HTML.

Error: In the line 11, you must fix from </div to </div>

Also, you don't need to add a controller. You already added on your config:

Remove it from your view: From <div ng-controller="MainController"> to <div>

Not required, but best practice

On your last line, there's a spare </div>, get rid of it:

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

    <div>
        <p>Customer name:</p>
        <input type="text" ng-model="newCustomer.name" />
        <p>Customer city:</p>
        <input type="text" ng-model="newCustomer.city" />
        <button ng-click="addCustomer()">Add customer </button>
        <a href="#/view2">View 2</a>
    </div>
</div>

PS: Make sure you check your syntax errors. Using jshint, jslint or even Chrome dev tools / Firebug will help with that. You can set your editor(Sublimelinter for Sublime for example) to use jshint. Or use a IDE like Webstorm which comes with.

Upvotes: 0

Santanu
Santanu

Reputation: 420

There is a mistake in index.html javascript. Inside MainController change your code 

$scope.addCustomer() = function () {
    $scope.customers.push( 
        { name: $scope.newCustomer.name, city: $scope.newCustomer.city } 
    );
};

to

$scope.addCustomer= function () {
    $scope.customers.push( 
        { name: $scope.newCustomer.name, city: $scope.newCustomer.city } 
    );
};

it should $scope.addCustomer= instead of $scope.addCustomer()=

Upvotes: 2

Related Questions