0

I got a MVC Site that uses a layout, in the layout page i use an Angular App, Models and Controllers and everything works like it supposed to, in one of my pages (that is shown inside the layout) i want to use another Angular App & Controller with some really basic functions, you can see the main idea here: Plunker for example.

Some more info:

  • I refer to both of the .js files in the layout <head> tag:

    <script src="~/Scripts/AdminVM.js"></script>
<script src="~/Scripts/ShopVM.js"></script>

  • All the code in my layout page that uses the first App is between two <div> tags, first one with ng-app = "FirstApp", second with ng-controller = "FirstController".

  • I tried both:

    1. Putting the two <div> tags with ng-app = "SecondApp", and ng-controller = "SecondController" inside my .cshtml file and in between putt my code.
    2. Putting the two <div> tags inside my layout page's body and between them putt the @RenderBody() tag.

I have no idea what am i doing wrong here, even the most simple thing isn't working:

ShopVM.js

var app = angular.module("ShopApp", []);
app.controller("ShopViewModel", function ($scope, $http) {
    $scope.test = "Test123";
});

Shop.cshtml (Not the layout file)

<div ng-app="ShopApp">
    <div ng-controller="ShopViewModel">
        <ul class="nav nav-tabs nav-justified">
            <li role="presentation" class="active"><a href="#">Home</a></li>
            <li role="presentation"><a href="#">Cat1</a></li>
            <li role="presentation"><a href="#">Cat2</a></li>
        </ul>
        <div>{{test}}</div>

        <input id="Text1" type="text" ng-model="Shop.Test"/>

    </div>
</div>

And what i see is a simple test: {{test}}

What is wrong with my code?

argamanza
  • 1,122
  • 3
  • 14
  • 36
  • 1
    open your browser console and see what error you are getting. Your plunker works fine. – Shyju Jan 11 '16 at 01:45

1 Answers1

2

in one of my pages (that is shown inside the layout) i want to use another Angular App & Controller

angular does not support nested apps (since you include first one in layout page the second one is nested inside the first one)

Low Flying Pelican
  • 5,974
  • 1
  • 32
  • 43
  • Like i said, I tried it in a non nested way, with two different `div` tags that each uses a different app. – argamanza Jan 11 '16 at 02:36
  • Even if you do that angular will only initialize the first ng-app, it will not run the second one see http://stackoverflow.com/questions/18571301/angularjs-multiple-ng-app-within-a-page – Low Flying Pelican Jan 11 '16 at 02:39
  • So instead of two apps i used one app with two controller, works like char. Had no idea that even when it's not "Physically" nested it's still called nested apps. Thank you! – argamanza Jan 11 '16 at 02:47