Player directive example

WebApplication1/WebApplication1/Controllers/HomeController.cs

@@ -23,5 +23,10 @@ public ActionResult Services()
         {
             return View();
         }
+
+        public ActionResult ComponentExample()
+        {
+            return View();
+        }
     }
 }

WebApplication1/WebApplication1/Jasmine/spec/ComponentExampleControllerSpec.js

@@ -0,0 +1,44 @@
+/// <reference path="_tests_references.js"/>
+
+describe("controller: componentExampleController", function () {
+    var model = {
+        players: [
+            { Name: "Player1", Age: 20, Hits: 0 },
+            { Name: "Player2", Age: 30, Hits: 0 }
+        ]
+    };
+
+    beforeEach(function() {
+        module("myApp");
+
+        module(function ($provide) {
+            $provide.factory("dataService", function () {
+                var data = model;
+                return data;
+            });
+        });
+    });
+
+    beforeEach(inject(function ($controller, $rootScope) {
+        this.scope = $rootScope.$new();
+        $controller("componentExampleController", {
+            $scope: this.scope
+        });
+    }));
+
+    describe("check componentExampleController", function () {
+        it("should contain players", function () {
+            expect(this.scope.model).toEqual(model);
+        });
+
+        it("should hit player", function () {
+            var player = { Name: "PlayerX", Age: 1, Hits: 0 };
+
+            this.scope.hitFn(player);
+            expect(player.Hits).toBe(1);
+
+            this.scope.hitFn(player);
+            expect(player.Hits).toBe(2);
+        });
+    });
+});

WebApplication1/WebApplication1/Jasmine/spec/ComponentExamplePlayerSpec.js

@@ -0,0 +1,43 @@
+/// <reference path="_tests_references.js"/>
+
+describe("module: componentExamplePlayer", function () {
+    beforeEach(function() {
+        module("myApp");
+    });
+
+    beforeEach(inject(function ($controller, $rootScope) {
+        this.scope = $rootScope.$new();
+        $controller("componentExampleController", {
+            $scope: this.scope
+        });
+        spyOn(this.scope, "hitFn");
+    }));
+
+    beforeEach(inject(function ($compile) {
+        this.scope.myPlayer = { Name: "Player1", Age: 20, Hits: 0 };
+
+        this.element =
+            "<div class=\"playerDirective\" player=\"myPlayer\" hit=\"hitFn(player)\">" +
+                "<h4>Player Info</h4>" + 
+                "<p>Name: {{player.Name}}</p>" +
+                "<p>Age: {{player.Age}}</p>" +
+                "<p>Hits: {{player.Hits}}</p>" +
+                "<button ng-click=\"hit({player: player})\">Hit {{player.Name}}</button>" +
+            "</div>";
+        this.element = $compile(this.element)(this.scope);
+        this.scope.$digest();
+    }));
+
+    describe("check componentExampleController", function () {
+        it("should contain myPlayer", function () {
+            var isolated = this.element.isolateScope();
+            expect(isolated.player).toEqual(this.scope.myPlayer);
+        });
+
+        it("should hit myPlayer", function () {
+            var isolated = this.element.isolateScope();
+            isolated.hit({player: isolated.player});
+            expect(this.scope.hitFn).toHaveBeenCalledWith(isolated.player);
+        });
+    });
+});

WebApplication1/WebApplication1/Jasmine/spec/SimpleControllerSpec.js

@@ -1,12 +1,7 @@
-///<reference path="~/Jasmine/lib/jasmine-2.3.4/jasmine.js"/>
-///<reference path="~/Scripts/angular.js"/> 
-///<reference path="~/Scripts/angular-mocks.js"/> 
-
-///<reference path="~/dist/App.js"/>
-///<reference path="~/dist/ControllersView.js"/>
+/// <reference path="_tests_references.js"/>
 
 describe("controller: simple", function () {
-    beforeEach(function() {
+    beforeEach(function () {
         module("myApp"); // angular.mock.module("app");
     });
 

WebApplication1/WebApplication1/Jasmine/spec/SubControllerSpec.js

@@ -1,9 +1,4 @@
-///<reference path="~/Jasmine/lib/jasmine-2.3.4/jasmine.js"/>
-///<reference path="~/Scripts/angular.js"/> 
-///<reference path="~/Scripts/angular-mocks.js"/> 
-
-///<reference path="~/dist/App.js"/>
-///<reference path="~/dist/ControllersView.js"/> 
+/// <reference path="_tests_references.js"/>
 
 describe("controller: sub", function () {
     beforeEach(function() {

WebApplication1/WebApplication1/Views/Home/ComponentExample.cshtml

@@ -0,0 +1,18 @@
+@{
+    ViewBag.Title = "Component Example";
+}
+
+<h3>@ViewBag.Title</h3>
+
+<br/>
+
+<div ng-controller="componentExampleController">
+    <div class="playerDirective" ng-repeat="myPlayer in model.players" player="myPlayer" hit="hitFn(player)">
+        <h4>Player Info</h4>
+        <p>Name: {{player.Name}}</p>
+        <p>Age: {{player.Age}}</p>
+        <p>Hits: {{player.Hits}}</p>
+
+        <button ng-click="hit({player: player})">Hit {{player.Name}}</button>
+    </div>
+</div>

WebApplication1/WebApplication1/Views/Shared/_Layout.cshtml

@@ -23,6 +23,7 @@
                     <li>@Html.ActionLink("2", "Controllers", "Home")</li>
                     <li>@Html.ActionLink("3", "DataBindings", "Home")</li>
                     <li>@Html.ActionLink("4", "Services", "Home")</li>
+                    <li>@Html.ActionLink("5", "ComponentExample", "Home")</li>
                 </ul>
                 @Html.Partial("_LoginPartial")
             </div>

WebApplication1/WebApplication1/WebApplication1.csproj

@@ -183,6 +183,8 @@
     <Content Include="Content\bootstrap.css" />
     <Content Include="Content\bootstrap.min.css" />
     <Content Include="dist\App.js" />
+    <Content Include="dist\ComponentExamplePlayerModule.js" />
+    <Content Include="dist\ComponentExampleView.js" />
     <Content Include="dist\ControllersView.js" />
     <Content Include="favicon.ico" />
     <Content Include="fonts\glyphicons-halflings-regular.svg" />
@@ -194,9 +196,11 @@
     <Content Include="Jasmine\lib\jasmine-2.3.4\jasmine.css" />
     <Content Include="Jasmine\lib\jasmine-2.3.4\jasmine.js" />
     <Content Include="Jasmine\lib\jasmine-2.3.4\jasmine_favicon.png" />
-    <Content Include="Jasmine\SpecRunner.html" />
+    <Content Include="Jasmine\spec\ComponentExamplePlayerSpec.js" />
+    <Content Include="Jasmine\spec\ComponentExampleControllerSpec.js" />
     <Content Include="Jasmine\spec\SubControllerSpec.js" />
     <Content Include="Jasmine\spec\SimpleControllerSpec.js" />
+    <None Include="Jasmine\spec\_tests_references.js" />
     <Content Include="Scripts\angular-animate.js" />
     <Content Include="Scripts\angular-animate.min.js" />
     <Content Include="Scripts\angular-aria.js" />
@@ -1029,6 +1033,7 @@
     <Content Include="Views\Shared\_LoginPartial.cshtml" />
     <Content Include="Scripts\version.json" />
     <Content Include="Views\Home\Services.cshtml" />
+    <Content Include="Views\Home\ComponentExample.cshtml" />
   </ItemGroup>
   <ItemGroup>
     <Folder Include="App_Data\" />

WebApplication1/WebApplication1/dist/App.js

@@ -1,5 +1,5 @@
 (function () {
     "use strict";
 
-    angular.module("myApp", []);
+    angular.module("myApp", ["myApp.player"]);
 })();

WebApplication1/WebApplication1/dist/ComponentExamplePlayerModule.js

@@ -0,0 +1,32 @@
+(function () {
+    "use strict";
+
+    function playerDirective() {
+        function linkFn(scope, element, attrs, ctrls, transclude) {
+            transclude(scope, function (clone) {
+                element.append(clone);
+            });
+        }
+
+        function controllerFn($scope) {
+            $scope.defaultAttribute = $scope.defaultAttribute || "defaultAttributeValue";
+        }
+        controllerFn.$inject = ["$scope"];
+
+        return {
+            restrict: "C",
+            scope: {
+                player: "=",
+                defaultAttribute: "=",
+                undefinedAttribute: "=",
+                hit: "&"
+            },
+            transclude: true,
+            link: linkFn,
+            controller: controllerFn
+        };
+    }
+
+    angular.module("myApp.player", [])
+        .directive("playerDirective", playerDirective);
+})();

WebApplication1/WebApplication1/dist/ComponentExampleView.js

@@ -0,0 +1,34 @@
+(function () {
+    "use strict";
+
+    function dataService() {
+        var data = {
+            players: [
+                {
+                    Name: "Player1",
+                    Age: 20,
+                    Hits: 0
+                },
+                {
+                    Name: "Player2",
+                    Age: 30,
+                    Hits: 0
+                }
+            ]
+        };
+        return data;
+    }
+
+    function componentExampleController($scope, dataService) {
+        $scope.model = dataService;
+
+        $scope.hitFn = function (player) {
+            player.Hits++;
+        };
+    }
+    componentExampleController.$inject = ["$scope", "dataService"];
+
+    angular.module("myApp")
+        .controller("componentExampleController", componentExampleController)
+        .factory("dataService", dataService);
+})();