CODEWITHSUNDEEP
asp.netasp.net-mvcangularjsasp.net-mvc-3
M Shoaib Sheikh
M Shoaib Sheikh

Reputation: 3

Tying up angular controller to view

I am having hard time trying to tie up angular controller 'pointofsaleController' to a view (index.cshtml).

Could you please help me figure out where I am making a mistake.It is in MVC project built using visual studio.

pointofsaleController.js

(function(ng) {

	var controllersModule = ng.module('pos.controllers');

	controllersModule.controller('pointofsaleController', ["$scope", function($scope) {
		//Why is this line not getting executed.
		alert('Here');

		$scope.myArr = ['Mango', 'Apple', 'Oranges'];

	}]);

})(angular);

posRouter.js


(function(ng) {
	// App Module Definition (relies on other modules)
	var posApp = ng.module("posApp", ['ngRoute']);

	var controllers = ng.module("pos.controllers", []);
	var directives = ng.module("pos.directives", []);

	
})(angular);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js"></script>

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "Point of Sale";
}




<script>
    function redirectTo(nameRange) {
        //window.location = '/pointofsale/tenantview?nameRange='+nameRange;
    };
</script>

<div class="name-range-screen" ng-controller="pointofsaleController">
    <div ng-view />
    
</div>

@using System.Web.Optimization

<html ng-app="posApp">
<head>
    <title></title>

    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js" ></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.js" ></script>
     @Scripts.Render("~/ViewScripts/POSScripts")
</head>
<body >
    <div id="header">
        <h1>Welcome to point of sale by SCS.</h1>
    </div>
    <div id="content">
        @RenderBody()
    </div>
    <div id="footer">
        Dashboard
    </div>
     
</body>
</html>

For some strange reason my app has modules initialized ok but the controllers fails to initialize and therefore I get the module not found error.Here it is,

This is the error that I am getting from Chrome debugger console.

Error: [ng:areq] Argument 'pointofsaleController' is not a function, got undefined http://errors.angularjs.org/1.2.26/ng/areq?p0=pointofsaleController&p1=not%20a%20function%2C%20got%20undefined at ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js:78:12 at assertArg (ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js:1509:11) at assertArgFn (ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js:1519:3) at ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js:7278:9 at ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js:6670:34 at forEach (ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js:332:20) at nodeLinkFn (ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js:6657:11) at compositeLinkFn (ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js:6105:13) at compositeLinkFn (ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js:6108:13) at compositeLinkFn (ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js:6108:13)

Thanks, BR

Upvotes: 0

Views: 127

Answers (2)

Brocco
Brocco

Reputation: 64853

In your js (pointofsaleController.js) you currently have:

var controllersModule = ng.module('pos.controllers');

Which is getting a module, not creating one, in order to create an angular module you must use:

var controllersModule = ng.module('pos.controllers', []);

UPDATE:

Since you have your controllers in a separate module you will need to inject that module into your app module which would change this:

var posApp = ng.module("posApp", ['ngRoute']);

to this:

var posApp = ng.module("posApp", ['ngRoute', 'pos.controllers', 'pos.directives']);

Upvotes: 1

chrisrzhou
chrisrzhou

Reputation: 36

Expanding on what Brocco has said, there are two ways that Angular interacts with modules:set and get

For setting a module, which is usually a one time thing, this is as simple as:

var app = ng.module("myApp", [])

where you can include other modules in the [] array if there are dependencies on other modules.

For getting a previously set module, you would refer to the module by:

var app = ng.module("myApp")

You always need to initiate an app using the set method first. You can use get on a module once you've set it somewhere else. This is useful for bigger applications where you can find applications being set and defined as a one-liner in an app.js while all the controller and directive code lives in other files that will now use the get method to refer back to the module that was set/defined earlier.

Upvotes: 0

Related Questions