title: AngularJs : Error: [ng:areq]
body: <p>I'm more or less completely new to AngularJs, and I have an issue. I'm trying to add routing into my angular application but it's not going so well. </p>
  
  <p>I have a template that essentially loads the js in this order:</p>
  
  <pre><code>&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.2.3/js/foundation.min.js"&gt;&lt;/script&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular-route.min.js"&gt;&lt;/script&gt;     
  &lt;script src="js/app.js"&gt;&lt;/script&gt;
  &lt;script src="js/controllers/mainCtrl.js"&gt;&lt;/script&gt; &lt;!-- load our controller --&gt;
  &lt;script src="js/services/userService.js"&gt;&lt;/script&gt; &lt;!-- load our service --&gt;
  &lt;script src="js/routes/routes.js"&gt;&lt;/script&gt; 
  </code></pre>
  
  <p>It seems to be loaded fine and the order seems good, but I'm getting <code>Error: [ng:areq]</code>.
  This seems to to mean that I'm calling angular.module() twice. </p>
  
  <p>Where the view gets loaded into looks like :</p>
  
  <pre><code>&lt;body ng-app='blogApp'&gt;
          &lt;header&gt;&lt;/header&gt;
          &lt;section&gt;
              &lt;div ng-view&gt;&lt;/div&gt;
          &lt;/section&gt;
  
          &lt;footer&gt;&lt;/footer&gt;
      &lt;/body&gt;
  </code></pre>
  
  <p>app.js looks like: </p>
  
  <pre><code>var blogApp = angular.module('blogApp', 
  [
      'ngRoute'
  ]);
  </code></pre>
  
  <p>mainCtrl looks like: </p>
  
  <pre><code>blogApp.controller('mainController', function($scope, $http, User){
              $scope.formData = {};
              $scope.login = function(){
                User.login($scope.formData)
                        .success(function(){
                            console.log("logged in");
                        })
                        .error(function(){
                            console.log("Unable to log in!");
                        });
              };
              $scope.register = function(){
                  console.log("clicked!");
                User.register($scope.formData)
                        .success(function(){
                            console.log("registered");
                        })
                        .error(function(){
                            console.log("Unable to register!!");
                        });
              };
              $scope.logout = function(){
                  User.logout().success( function(){
                                  console.log("logged out!");
                                  }   
                          )
              }
          });
  </code></pre>
  
  <p>userService looks like:</p>
  
  <pre><code>blogApp.factory('User', function($http){
             return {
                 login : function(formData){
                     return $http({
                              method: 'POST',
                              url: '/angularBlog/public/users/login',
                              headers: { 'Content-Type' : 'application/x-www-form-urlencoded' },
                              data: $.param(formData)
                      });                   
                 },
                 register : function(formData) {
                     return $http({
                              method: 'POST',
                              url: '/angularBlog/public/users/register',
                              headers: { 'Content-Type' : 'application/x-www-form-urlencoded' },
                              data: $.param(formData)
                      });                        
                 },
                 logout : function(){
                     return $http({
                              method: 'POST',
                              url: '/angularBlog/public/users/logout',
                              headers: { 'Content-Type' : 'application/x-www-form-urlencoded' }
                      });                    
                 }
             } 
          });
  </code></pre>
  
  <p>and the routes.js looks like:</p>
  
  <pre><code>blogApp.config(function($routeProvider) {
          $routeProvider
              // route for the home page
              .when('/', {
                  templateUrl : 'home',
                  controller  : 'mainCtrl'
              });
      });
  </code></pre>
  
  <p>Before I added routing, it was all working fine, so I'm not sure what went wrong? Any help would be appreciated! lso if you need any more information just let me know and I'll get it to you!</p>