Slip 6 - D) Using AngularJS Create a SPA that show Syllabus content of all subjects of SYBBA (CA)(use ng-view)

Solution:

<html>

   <head>

      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

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

      </script>

   </head>

   <h1> SYBCA Syllabus</H1>

<div ng-view></div>

   <body>

      <div ng-app = "mainApp">

         <p><a href ="#dm">301.Digital Marketing</a></p>

         <p><a href ="#ds">302.Data Structure</a></p>

                         <p><a href ="#ajs">303.AngularJS</a></p>

      <div ng-view></div>

             <script type ="text/ng-template" id ="Digital Marketing.html">

            <h2> Digital Marketing </h2>

                                    <p>

                                    Unit 1.Introduction of Digital Marketing <br>

                                    Unit 2.<br>

                                    Unit 3.<br>

                                    </p>

            {{message}}

         </script>

             <script type ="text/ng-template" id ="Data Structure.html">

            <h2> Data Structure </h2>

                                    <p>

                                    Unit 1.Introduction of Data Structure<br>

                                    Unit 2. <br>

                                    Unit 3.<br>

                                    </p>

            {{message}}

         </script>

                         <script type ="text/ng-template" id ="AngularJS.html">

            <h2> AngularJS </h2>

                                    <p>

                                    Unit 1.Introduction of AngularJS<br>

                                    Unit 2.<br>

                                    Unit 3.<br>

                                    </p>

            {{message}}

         </script>

            </div>

      <script>

         var mainApp = angular.module("mainApp", ['ngRoute']);

         mainApp.config(['$routeProvider', function($routeProvider) {

            $routeProvider

                .when('/dm', {

               templateUrl: 'Digital Marketing.html',

               controller: 'dmController'

            })

               .when('/ds', {

               templateUrl: 'Data Structure.html',

               controller: 'dsController'

            })

            .when('/ajs', {

               templateUrl: 'AngularJS.html',

               controller: 'ajsController'

            })                                                        

         }]);

         mainApp.controller('dmController', function($scope) {

            $scope.message = "This page will be used to disply Digital Marketing";

         });                      

              mainApp.controller('dsController', function($scope) {

            $scope.message = "This page will be used to disply Data Structure";

         });

             mainApp.controller('ajsController', function($scope) {

            $scope.message = "This page will be used to disply AngularJS";

         });                     

      </script>

        </body>

</html>

Post a Comment

0 Comments