All geek questions in one place

How to solve angularjs Unprepared error: [$ injector: modulerr]?

I am developing a one-page web application using the AngularJS ng-view and ng-template directives. But when I run it, my browser shows this type of [1]: http://i.stack.imgur.com/TPuPo.png error.

Here is my script block with the main module and routing configuration.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>AngularJS - Views</title>
    
    <!--AngularJs Library-->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.min.js"></script>
  </head>
  <body>
      <h2 style="text-align: center;">Simple Application using AngularJS - Views</h2><hr><br>

      <!--Start AngularJS App-->
      <div ng-app="myApp">

        <p><a href="#addStudent">Add Student</a></p>
        <p><a href="#viewStudent">View Students</a></p>
        <div ng-view></div>

        <!--Script for Add Student-->
        <script type="text/ng-template" id="addStudent.htm">
          <h2>This is the view of Add Student</h2>
          {{message}}
        </script>

        <!--Script for View Students-->
        <script type="text/ng-template" id="viewStudent.htm">
          <h2>This is the view of all students</h2>
          {{message}}
        </script>

      </div>
      <!--End AngularJS App-->

      <!--App Necessary Scripts-->
      <script>
        
        var myApp = angular.module("myApp", ['ngRoute']);

        myApp.config(['routeProvider',function ($routeProvider) {
          $routeProvider.

          when('/addStudent', {
            templateUrl: 'addStudent.htm', 
            controller: 'AddStudentController'
          }).

          when('/viewStudent', {
            templateUrl: 'viewStudent.htm',
            controller: 'ViewStudentController'
          }).

          otherwise({

            redirectTo: '/addStudent'

          });
        }]);

        myApp.controller('AddStudentController', function ($scope) {
          
          $scope.message = "This page will be used to display add student form!!";

        });

        myApp.controller('ViewStudentController', function($scope){

          $scope.message = "This page will be used to display   all students!!";

        });

      </script>
  </body>
</html>
Run codeHide result

what can i do to fix this?

+4
source share
3 answers

. CodePen, , , , . http://codepen.io/alex06/pen/rrzRbE?editors=1010

<html ng-app="mainApp">
   <head>
      <title>Angular JS Views</title>
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.min.js"></script>
   </head>

   <body>
      <h2>AngularJS Sample Application</h2>
      <div>
         <p><a href = "#addStudent">Add Student</a></p>
         <p><a href = "#viewStudents">View Students</a></p>
         <div ng-view></div>
      </div>
         <script type = "text/ng-template" id = "addStudent.htm">
            <h2> Add Student </h2>
            {{message}}
         </script>
         <script type = "text/ng-template" id = "viewStudents.htm">
            <h2> View Students </h2>
            {{message}}
         </script>
      <script>
         (function(){
            'use strict'
            angular
              .module('mainApp', ['ngRoute'])
              .config(['$routeProvider', function($routeProvider) {
                  $routeProvider
                      .when('/addStudent', {
                         templateUrl: 'addStudent.htm',
                         controller: 'AddStudentController'
                      })
                      .when('/viewStudents', {
                         templateUrl: 'viewStudents.htm',
                         controller: 'ViewStudentsController'
                      })
                      .otherwise({
                         redirectTo: '/addStudent'
                      });
                   }])
              .controller('AddStudentController', function($scope) {
                      $scope.message = "This page will be used to display add student form";
                   })
              .controller('ViewStudentsController', function($scope) {
                      $scope.message = "This page will be used to display all the students";
                   });
              })();   
        </script>
   </body>
</html>
+1

:

   myApp.config(['routeProvider',function ($routeProvider) {


    myApp.config(['$routeProvider',function ($routeProvider) {

, , .

+1

Define the configuration as follows: myApp.config (function ($ routeProvider) {$ routeProvider

Instead: - myApp.config (['routeProvider', function ($ routeProvider) {$ RouteProvider.

0
source

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

More articles:


All Articles