dimanche 10 janvier 2016

Can't get an Angular App to work inside a MVC Layout

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?

Aucun commentaire:

Enregistrer un commentaire