MillRunner MillRunner - 4 months ago 108x
AngularJS Question

Angular not rendering templates what is main and common

I was trying to get some angular code to work and it seems that i am not quite understanding some of the syntax.

var mainModule = angular.module('main', ['common']);

  1. What is the importance of "main" is that specific to something?

  2. What is "common"?

I DO reference the angular latest js and app.js in layout.cshtml
I do not get any errors in chrome console.
My index.cshtml looks like

<div data-ng-controller="indexViewModel">

<h1>{{ topic }}</h1>

here is my app.js

var mainModule = angular.module('main', ['common']);

mainModule.controller("indexViewModel", function (
$scope, $http, $q, $routeParams, $window, $location, viewModelHelper) {

var self = this;

$scope.topic = "Tasks";
$ = "Tom";



(function (myApp) {

var viewModelHelper = function (
$http, $q, $window, $location) {

var self = this;

return this;

myApp.viewModelHelper = viewModelHelper;


Yes, my body tag was missing ng-app

<body data-ng-app="main">

Now i get the error with angular 1.5.6

angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module main due to:
Error: [$injector:modulerr] Failed to instantiate module common due to:
Error: [$injector:nomod] Module 'common' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

Update 2:

OK , i see I NEEDED to have common defined since i called it that:

var commonModule = angular.module('common', ['ngRoute']);
var mainModule = angular.module('main', ['common']);

HOWEVER, getting this error now

angular.js:13642 Error: [$injector:unpr] Unknown provider: viewModelHelperProvider <- viewModelHelper <- indexViewModel$injector/unpr?p0=viewModelHelperProvider%20%3C-%20viewModelHelper%20%3C-%20indexViewModel
at angular.js:68

Update 3 FIXED

I needed to add in this factory code

function ($http, $q, $window, $location) {
return MyApp.viewModelHelper(
$http, $q, $window, $location);


The ng-app directive tells AngularJS that this is the root element of the AngularJS application.

You can only have one ng-app directive in your HTML document. If more than one ng-app directive appears, the first appearance will be used.

So, in angular.module('main', ['common']), main is the value of ng-app directive and common is the dependency on which your module main depends.

Take an example of routing, we inject the dependency ngRoute in the angular.module for routing of application.

Syntax : angular.module('main', ['ngRoute'])

Here, main is depends on ngRoute because without ngRoute module angular can not perform routing.