Directives

GruntFile.js

@@ -7,8 +7,8 @@ module.exports = function (grunt)
 				separator: "\n\n"
 			},
 			dist: {
-				src: [],
-				dest: 'src/resources/js/<%= pkg.name %>.js'
+				src: ['src/resources/js/MyApp.js', 'src/resources/js/isolateScope.js'],
+				dest: 'src/<%= pkg.name %>.js'
 			},
 			deps: {
 				src: [
@@ -17,13 +17,17 @@ module.exports = function (grunt)
 					'bower_components/bootstrap/dist/js/bootstrap.js',
 					'bower_components/angularjs/angular.min.js',
 				],
-				dest: 'src/resources/js/<%= pkg.name %>-deps.js'
+				dest: 'src/<%= pkg.name %>-deps.js'
 			},
 			css: {
 				src: ['bower_components/bootstrap/dist/css/bootstrap.min.css',
 						'src/resources/css/styles.css'
 				],
-				dest: 'src/resources/css/<%= pkg.name %>.css'
+				dest: 'src/<%= pkg.name %>.css'
+			},
+			angularMap: {
+				src: ['bower_components/angularjs/angular.min.js.map'],
+				dest: 'src/angular.min.js.map'
 			}
 		},
 
@@ -42,7 +46,7 @@ module.exports = function (grunt)
 			},
 			styles: {
 				files: ['src/resources/css/*.scss'],
-				tasks: ['sass']
+				tasks: ['sass', 'concat']
 			}
 		}
 	});

README.md

@@ -1,6 +1,6 @@
 # Accio Code Tutorials: AngularJS#
 
-***Updated: 11-11-14***
+***Updated: 11-13-14***
 
 This tutorial series for [AccioCode](https://www.youtube.com/user/CDPAdvertising "Accio Code on YouTube") will show how to use the basics of AngularJS. You will learn how to make a simple web page and a simple web application.
 
@@ -9,7 +9,11 @@ AngularJS is an open-source framework in JavaScript. It was created and maintain
 
 It is an MVC (Model-View-Controller) framework so a brief understanding of MVC is suggested, but not required, to use this tutorial.
 
-## Course Videos ##
-1. [Setting up AngularJS Workspace](https://www.youtube.com/watch?v=ofASsumsf7E "Setting up AngularJS Workspace on YouTube")
-2. [Simple Data Binding with AngularJS](https://www.youtube.com/watch?v=ia_vAGm_PCQ "Simple Data Binding with AngularJS")
-3. [An Introduction to Controllers](https://www.youtube.com/watch?v=IGy2c-XwXgI "An Introduction to Controllers")
+## Directives Videos ##
+1. [Writing Our First Directive](http://youtu.be/QwaVgz-GSXY "Writing our First Directive")
+2. [Scope, Element and Attributes](http://youtu.be/utKtjxLako4 "Scope, Element and Attributes")
+3. [Directive Element Binding](http://youtu.be/7vgvBffpSbs "Directive Element Binding")
+4. [Directive to Directive Communication](http://youtu.be/aG8VD0KvUw4 "Directive to Directive Communication")
+5. [Directive Restrictions Explained](http://youtu.be/mkEJDWneiPg "Directive Restrictions Explained")
+6. [Isolate Scope Part 1](https://www.youtube.com/watch?v=-a4E2eRHHVY "Isolate Scope Part 1")
+7. [Isolate Scope Part 2](http://youtu.be/UMoDVY8HAVk "Isolate Scope Part 2")

src/angularjstutorial.js

@@ -0,0 +1,183 @@
+/* use strict */
+var app = angular.module('MyApp', []);
+
+app.directive('restrictions', function ()
+{
+	return {
+		restrict: 'A',
+		link: function ()
+		{
+			console.log('I am an attribute');
+		}
+	}
+})
+
+.directive('elementrest', function ()
+{
+	return {
+		restrict: 'E',
+		link: function ()
+		{
+			console.log('I am an element');
+		}
+	}
+})
+
+.directive('classrest', function ()
+{
+	return {
+		restrict: 'C',
+		link: function ()
+		{
+			console.log('I am a class');
+		}
+	}
+})
+
+.directive('commentsrest', function ()
+{
+	return {
+		restrict: 'M',
+		link: function ()
+		{
+			console.log('I am a comment restriction');
+		}
+	}
+})
+
+.controller('ShieldCtrl', function ($scope)
+{
+	$scope.shieldNames = [];
+
+	this.addReigns = function ()
+	{
+		$scope.shieldNames.push("Roman Reigns: Juggernaut");
+	};
+
+	this.addRollins = function ()
+	{
+		$scope.shieldNames.push("Seth Rollins: Architect");
+	};
+
+	this.addAmbrose = function ()
+	{
+		$scope.shieldNames.push("Dean Ambrose: Lunatic Fringe");
+	};
+})
+
+.directive('theshield', function ()
+{
+	return {
+		restrict: 'E',
+		scope: {},
+		controller: 'ShieldCtrl',
+		link: function (scope, element, attrs)
+		{
+			element.bind('mouseenter', function ()
+			{
+				console.log(scope.shieldNames);
+			});
+		}
+	}
+})
+
+.directive('reigns', function ()
+{
+	return {
+		require: 'theshield',
+		link: function (scope, element, attrs, ShieldCtrl)
+		{
+			ShieldCtrl.addReigns();
+		}
+	}
+})
+
+.directive('rollins', function ()
+{
+	return {
+		require: 'theshield',
+		link: function (scope, element, attrs, ShieldCtrl)
+		{
+			ShieldCtrl.addRollins();
+		}
+	}
+})
+
+.directive('ambrose', function ()
+{
+	return {
+		require: 'theshield',
+		link: function (scope, element, attrs, ShieldCtrl)
+		{
+			ShieldCtrl.addAmbrose();
+		}
+	}
+})
+
+.directive('interactiveBtn', function ()
+{
+	return {
+		restrict: 'A',
+		link: function (scope, element, attrs)
+		{
+			element.bind('mouseenter', function ()
+			{
+				element[0].innerText = "Rolled Over";
+			});
+
+			element.bind('mouseleave', function ()
+			{
+				element[0].innerText = "Rolled Out";
+			});
+		}
+	}
+})
+
+.directive('walterwhite', function () 
+{
+	return {
+		restrict: 'E',
+		transclude: true,
+		link: function (scope, element, attrs)
+		{
+			console.log(scope);
+			console.log(element);
+			console.log(attrs);
+		}
+	}
+	/*return {
+		restrict: 'E',
+		transclude: true,
+		template: '<h2>I am Heisenberg</h2>'
+	}*/
+})
+
+/* use strict */
+var app = angular.module("isolateApp", []);
+
+app.controller("AppCtrl", function ($scope, $element)
+{
+	$scope.getMove = function (name, movetype, move)
+	{
+		console.log('' + name + ' performed a ' + movetype +
+			' ' + move );
+	}
+
+	$scope.movetypes 	= ['Finisher', 'Offensive Move', 'Defensive Move'];
+	$scope.movetype 	= $scope.movetypes[0];
+})
+
+.directive("character", function ()
+{
+	return {
+		restrict: 'E',
+		scope: {
+			name: "@",
+			image: "@",
+			movetype: "=",
+			useMove: '&'
+		},
+		templateUrl: 'partials/shield_isolate.html',
+		controller: 'AppCtrl'
+	}
+})

src/index.html

@@ -1,20 +1,55 @@
 <!doctype html>
 <html lang="en">
 <head>
-	<title>AccioCode AngularJS Tutorial</title>
+	<title>AccioCode AngularJS Tutorial - Directives</title>
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge,chrome=1">
 	<meta name="viewport" content="width=device-width, user-scalable=no">
-	<script src="resources/js/angularjstutorial-deps.js"></script>
-	<script src="resources/js/angularjstutorial.js"></script>
+	<script src="angularjstutorial-deps.js"></script>
+	<script src="angularjstutorial.js"></script>
 
-	<link rel="stylesheet" href="resources/css/angularjstutorial.css">
+	<link rel="stylesheet" href="angularjstutorial.css">
 </head>
 <body>
 
-	<div class="mainContainer">
-		<h1>AngularJS Tutorial</h1>
-		<button class="btn btn-default">Here we go</button>
+	<div class="mainContainer" data-ng-app="MyApp">
+
+		<div restrictions>Attribute Restriction</div>
+
+		<elementrest>Element Restriction</elementrest>
+
+		<div class="classrest">Class Restriction</div>
+
+		<!-- directive:commentsrest -->
+		<div></div>
+
+
+		<walterwhite message="I am Heisenberg" class="btn btn-default">
+
+		</walterwhite>
+		<br>
+
+		<div interactive-btn class="btn btn-default">
+			Button
+		</div>
+		<br>
+
+		<theshield reigns rollins ambrose class="btn btn-default">
+			Access The Shield
+		</theshield>
+
+		<theshield reigns class="btn btn-default">
+			Click Reigns
+		</theshield>
+
+		<theshield rollins class="btn btn-default">
+			Click Rollins
+		</theshield>
+
+		<theshield ambrose class="btn btn-default">
+			Click Ambrose
+		</theshield>
+
 	</div>
 
 </body>

src/isolate_scope.html

@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<title>AccioCode AngularJS Tutorial - Directives - Isolate Scope</title>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge,chrome=1">
+	<meta name="viewport" content="width=device-width, user-scalable=no">
+	<script src="angularjstutorial-deps.js"></script>
+	<script src="angularjstutorial.js"></script>
+
+	<link rel="stylesheet" href="angularjstutorial.css">
+</head>
+<body>
+
+	<div class="mainContainer" data-ng-app="isolateApp">
+		<div data-ng-controller="AppCtrl">
+			<div class="row">
+				<character name="Roman Reigns"
+					image="resources/img/reigns.png"
+					movetype="movetype"
+					use-move="getMove(name, movetype, move)"
+					class="col-xs-4"></character>
+				<character name="Seth Rollins"
+					image="resources/img/rollins.png"
+					movetype="movetype"
+					use-move="getMove(name, movetype, move)"
+					class="col-xs-4"></character>
+				<character name="Dean Ambrose"
+					image="resources/img/ambrose.png"
+					movetype="movetype"
+					use-move="getMove(name, movetype, move)"
+					class="col-xs-4"></character>
+			</div>
+		</div>
+	</div>
+
+
+</body>
+</html>

src/partials/shield_isolate.html

@@ -0,0 +1,27 @@
+<div class="panel panel-default">
+	<div class="panel-body">
+		<div>
+			<figure>
+				<img src="{{image}}">
+				<figcaption>{{name}}</figcaption>
+			</figure>
+		</div>
+	</div>
+	<div>Select Move Type:
+		<select data-ng-model="movetype"
+			data-ng-options="movetype for movetype in movetypes">
+		</select>
+	</div>
+	<div>Move: 
+		<input type="text" 
+			data-ng-model="value" 
+			class="form-control">
+	</div>
+	<div class="panel-footer clearfix">
+		<div class="btn btn-primary"
+			data-ng-click="useMove({name:name, movetype:movetype, move:value})">
+				Action!
+		</div>
+	</div>
+
+</div>