Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Initialize AngularJS Model with MVC Model

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 304
    Comment on it

    Hi All,

    When we need to use AngularJS to bind controls with AngularJS Model but we have MVC Model filled through MVC Controller, we can follow below steps to do the same without using "ng-init".

    Step 1: Create two js files in Scripts Folder:

    A) AngularMain.js

    window.angularModuleDependencies.push("ngMaterial");
    window.angularModuleDependencies.push("ngMdIcons");
    window.angularModuleDependencies.push("ngSanitize");
    
    var app = angular.module('App', window.angularModuleDependencies);

    B) sample.js

    app.controller('SampleController', ['$mdMedia', '$mdDialog', '$scope', '$http', '$filter', function ($mdMedia, $mdDialog, $scope, $http, $filter) {
        $scope.model = modelJson;
    }]);

    Step 2: In Bundle Config add two new bundles:

    bundles.Add(new ScriptBundle("~/bundles/main-controller").Include("~/Scripts/AngularMain.js"));
    bundles.Add(new ScriptBundle("~/bundles/sample-controller").Include("~/Scripts/sample.js"));

    Step 3: In your Layout Page include AngularJS libraries and render main-controller bundle:

     <!-- Angular Material requires Angular.js Libraries -->
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
        <script src="//code.angularjs.org/1.2.20/angular-sanitize.min.js"></script>
    
        <!-- Angular Material Library -->
        <script src="//ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
    
        <!-- Angular Material Icons Library -->
        <!-- See https://klarsys.github.io/angular-material-icons/ -->
        <script src="//cdnjs.cloudflare.com/ajax/libs/angular-material-icons/0.6.0/angular-material-icons.min.js"></script>
    
        <script type="text/javascript">
            window.angularModuleDependencies = [];
        </script>
    
        @Scripts.Render("~/bundles/main-controller")

    Step 4: In your cshtml page where you need to use angular model from MVC model:

    NOTE: One assumption your view is strongly typed view.

    @section scripts 
    {
     @{
       var modelData = new
       {
        Id = Model.Id,
        Title = Model.Title
       };
     }
     <script type="text/javascript">
      var modelJson = @Html.Raw(Json.Encode(modelData));
     </script>
     @Scripts.Render("~/bundles/sample-controller")
    }

    And now you are free to use {{model.Id}} in your view.

     

    Happy Coding.....

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: