I am creating a plugin for a dedicated ecommerce solution. In this plugin I want to start an Angular JS app.
The plugin is responsible for loading the scripts and stylesheets using hook. There is a shortcode which I use in some page that inserts the HTML. In this HTML, lives the AngularJS app.

But there keeps appearing an error n my console, which I cannot resolve.
And maybe this is not the best way to create an app within a WordPress page, I am not sure.

Here’s part of the code:

Plugin template file:

<div ng-app="app"><div class="container" ng-view></div></div>

Loading in Angular and angular-route

wp_enqueue_script( 'angular.min.js', plugin_dir_url( dirname( __FILE__ ) ) . 'app/lib/angular.min.js', array('jquery'), '1.6.4', false );
    wp_enqueue_script( 'angular-route.min.js', plugin_dir_url( dirname( __FILE__ ) ) . 'app/lib/angular-route.min.js', array('angular.min.js'), '1.6.4', false );
    wp_enqueue_script( 'app.js', plugin_dir_url( dirname( __FILE__ ) ) . 'app/app.js', array('angular.min.js'), '1.0', false );

App.js:

var app = angular.module('app',['ngRoute'])

 /* Config */
.config('$routeProvider',function($routeProvider){
    $routeProvider
        .when('/login', {
            templateUrl     : 'app/login.html',
            controller      : 'LoginController'
        })
        .when('/collection', {
            templateUrl     : 'app/collection.html',
            controller      : 'LoginController'
        })
        .otherwise({
            redirectTo      : '/login'
        })
})

/* LoginController */
.controller( 'LoginController', ['$scope', '$http', function( $scope, $http ){

    $scope.resultCount = 6;
    $scope.resultCountIncrement = 6;

    $http.get(pluginUrl + 'api/designs.php').then(function(DesignsData){
        $scope.designs = DesignsData.data;

    });

    /*$http.get(pluginUrl + 'assets/js/designs.json').then(function(DesignsData){
     $scope.designs = DesignsData.data;

     });*/

    $scope.searchFilter = function(){
        if(!$scope.filter){ return true; }
    }

    $scope.imageProperties = function(designId){
        $http.post(pluginUrl + 'api/image.php', {id: designId}).then(function(ImageData){
            return ImageData.data;
        });
    }

}]);

Now, I keep getting an error in my console, saying:

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.4/$injector/modulerr?p0=app&p1=Error%3A%20%

Seems that there is a problem loading some extension. Since I only load angular-route, this seems to be a problem. But I can’t see what’s wrong with my code. Hope someone can help me with this one…

Read more here: AngularJS app within WordPress page by shortcode


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: