Friday, July 3, 2015

Angular Js Scope and rootScope

Posted by at 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example - scope and rootscope</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'])
            .run(function ($rootScope) {
                $rootScope.test = "from on execute run";
            })
         .controller('RootControllerCreate', function ($scope, $rootScope) {
           
             $scope.test = "from create control";
            
         })

         .controller('RootControllerDetail', function ($scope, $rootScope) {
 
             $rootScope.test = "from detail control";
            
         })

         .controller('RootControllerUpdate', function ($scope, $rootScope) {
   
             //$rootScope.test = "from update control";
            
         })

        .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> |
    <h3>{{test}}</h3>
    <div ng-view></div>

</body>
</html>

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)