AngularJS登录注册页[$injector:unpr]及[$injector:modulerr]错误求助

Hey there, let's work through the errors you're hitting with your AngularJS login/registration page. I'll break down each issue and show you exactly how to fix them.

First Error: [$injector:unpr] #

This error pops up because your AppLoginCtrl controller depends on the $resource service, but your Angular module wasn't configured to include the ngResource module (which provides $resource). Your initial fix—adding ['ngResource'] to your module definition—was on the right track, but you ran into a new problem because of incorrect script loading order.

Second Error: Cannot read property '$$minErr' of undefined & [$injector:modulerr] #

These errors happen because you loaded angular-resource.js before the core angular.min.js file. The ngResource module is a plugin that relies entirely on the core AngularJS library being already loaded. If you load it first, it can't find the base Angular functions it needs, hence the "undefined" error.

Step-by-Step Fix #

1. Fix the script loading order
   Always load the core AngularJS library first, followed by any Angular plugins like angular-resource, then your custom app code:

   <!-- Load core AngularJS first -->
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
   <!-- Then load the angular-resource plugin -->
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular-resource.js"></script>
   <!-- Finally load your custom application script -->
   <script src="your-app-code.js"></script>
   

2. Confirm your module includes ngResource
   Make sure your module is defined with the ngResource dependency so Angular's injector knows to load the service:

   angular.module('myApp', ['ngResource'])
     .controller('AppLoginCtrl', function($scope, $resource) {
       // Example login/registration logic using $resource
       const AuthService = $resource('/api/auth/:action', { action: '@action' });
       
       $scope.login = function(credentials) {
         AuthService.save({ action: 'login' }, credentials, 
           (response) => { /* Handle successful login */ },
           (error) => { /* Handle login error */ }
         );
       };
     });
   

3. Use minification-safe dependency injection (optional but recommended)
   If you plan to minify your code later, use the array syntax to explicitly define dependencies:

   angular.module('myApp', ['ngResource'])
     .controller('AppLoginCtrl', ['$scope', '$resource', function($scope, $resource) {
       // Your login/registration logic here
     }]);
   

Why This Works #

• Loading core Angular first ensures all base functions (like $$minErr) are available when angular-resource loads.
• Adding ngResource to your module's dependencies tells Angular's injector to make the $resource service available to your controllers, resolving the initial [$injector:unpr] error.

内容的提问来源于stack exchange，提问作者TWOcvfan