Thursday, July 2, 2015

Angular Js Routing with multiple controllers

Posted by at 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example - example-$route-service-production</title>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular-route.js"></script>
    <script>


        angular.module('ngRouteExample', ['ngRoute'])

         .controller('RootControllerCreate', function ($scope) {

             $scope.title = "Create";
            
         })

         .controller('RootControllerDetail', function ($scope) {
 
             $scope.title = "Detail";
            
         })

         .controller('RootControllerUpdate', function ($scope) {
   
             $scope.title = "Update";
            
         })

        .config(function ($routeProvider, $locationProvider) {
            $routeProvider
             .when('/Routing/Detail', {
                 templateUrl: 'Routing/Detail',
                 controller: 'RootControllerDetail'
             })
            .when('/Routing/Create', {
                templateUrl: 'Routing/Create',
                controller: 'RootControllerCreate'
            })
           .when('/Routing/Update', {
               templateUrl: 'Routing/Update',
               controller: 'RootControllerUpdate'
           })
            .otherwise({
                redirectTo: 'Routing/Index'
            });

            // configure html5 to get links working on jsfiddle
            // $locationProvider.html5Mode(true);
        });

    </script>

</head>
<body ng-app="ngRouteExample">
    Choose:
    <a href="/#/Routing/Create">Create</a> |
    <a href="/#/Routing/Detail">Detail</a> |
    <a href="/#/Routing/Update">Update</a> |
    <div ng-view></div>

</body>
</html>


c#

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcAngularJs.Controllers
{
    public class RoutingController : Controller
    {
        // GET: Routing
        public ActionResult Index()
        {
            return View();
        }
        public ActionResult Create()
        {
            return View();
        }
        public ActionResult Detail()
        {
            return View();
        }
        public ActionResult Update()
        {
            return View();
        }

       
    }
}

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)