Angular JS template now showing

StackOverflow https://stackoverflow.com/questions/22118455

  •  18-10-2022
  •  | 
  •  

Question

I am having issues trying to show a partial html on my index.html file (Nothing is displayed).

Please see my index.html code:

    <!doctype html>
<html lang="en" ng-app="myApp">
    <head>
        <meta charset="utf-8">
        <title>My AngularJS App</title>
        <link rel="stylesheet" href="css/app.css"/>
        <link rel="stylesheet" href="css/animations.css"/>
        <link rel="stylesheet" href="css/bootstrap.css"/>
        <script src="js/jquery-1.11.0.min.js"></script>
        <script src="lib/angular/angular.js"></script>
        <script src="lib/angular/angular-animate.js"></script>
        <script src="lib/angular/angular-route.js"></script>
        <script src="lib/angular/angular-resource.js"></script>
        <script src="js/app.js"></script>
        <script src="js/animations.js"></script>
        <script src="js/services.js"></script>
        <script src="js/controllers.js"></script>
        <script src="js/filters.js"></script>
        <script src="js/directives.js"></script>
    </head>
    <body>
        <li>
            <a href="#people">Show People</a>
        </li>
        <div ng-view></div>
    </body>
</html>

Then I try to load people.html that is on partials directory, using routing on app.js:

'use strict';

// Declare app level module which depends on filters, and services
var myApp = angular.module('myApp', ['ngRoute', 'filters', 'services', 'directives', 'controllers']);

myApp.config(['$routeProvider',
function($routeProvider) {
    $routeProvider.when('/people', {
        templateUrl : 'patials/people.html',
        controller : 'PeopleController'
    }).otherwise({
        redirectTo : '/people'
    });
}]);

If I replace the ng-view part on my index.html with my template file content, everything displays fine, so I dont think I have an issue on my controller declarations.

Can you take a look and help me figuring out what's wrong?

Thanks!

Pas de solution correcte

Autres conseils

You are using var myApp = angular.module('myApp', []); inside your controller. If you add an array as a second parameter in angular.module, the module is automatically created as a new one and overrides the previous one with the same name, so the config is not working anymore, because in your code it is defined on a different module.

Just change the code in the PeopleController definition from

var myApp = angular.module('myApp', []);

to

var myApp = angular.module('myApp');

and it should work

edited plunk: http://plnkr.co/edit/bK9vHSPxKmijhlLPS5C5?p=preview

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top