Understanding child scope

praneethkumarpidugu · Jun 22, 2016 · 50f0196 · 50f0196
1 parent ae60dbb
commit 50f0196
Show file tree

Hide file tree

Showing 142 changed files with 49,119 additions and 0 deletions.
diff --git a/section4/.bowerrc b/section4/.bowerrc
@@ -0,0 +1,3 @@
+{
+  "directory": "libs"
+}
diff --git a/section4/README.md b/section4/README.md
@@ -0,0 +1,11 @@
+# Learn Real World AngularJS Step By Step by CodeCraft
+http://codecraftpro.com
+
+## Section 4 - Deep dive into scope
+
+# Folders
+./libs/ - The required libraries for all lectures in this course.
+lesson1 - Starter template for lecture 1
+lesson2 - Starter template for lecture 2
+lesson3 - Starter template for lecture 3
+completed - The completed application for this section
diff --git a/section4/completed/index.html b/section4/completed/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html >
+<html lang="en"
+      ng-app="codecraft" >
+<head >
+	<title >Scope</title >
+	<link href="../libs/bootstrap/dist/css/bootstrap.min.css"
+	      rel="stylesheet" >
+	<link href="main.css"
+	      rel="stylesheet" >
+</head >
+
+<body >
+
+
+<div class="container" >
+
+	<div class="row" >
+		<div class="col-md-6" >
+			<div class="root" >
+				<label >
+					<input type="text"
+					       ng-model="data.name" />
+				</label >
+				<p >{{data.name}}</p >
+
+				<div class="row" >
+					<div class="" >
+						<div class="parent"
+						     ng-controller="ParentController" >
+							<label >
+								<input type="text"
+								       ng-model="data.name" />
+							</label >
+							<p >{{data.name}}</p >
+
+							<div class="child"
+							     ng-controller="ChildController" >
+								<label >
+									<input type="text"
+									       ng-model="data.name" />
+								</label >
+								<button class="btn"
+								        ng-click="reset()" >Reset
+								</button >
+								<p >{{data.name}}</p >
+							</div >
+
+						</div >
+					</div >
+				</div >
+			</div >
+		</div >
+	</div >
+</div >
+
+<script src="../libs/angular/angular.min.js" ></script >
+<script src="main.js" ></script >
+</body >
+</html >
diff --git a/section4/completed/main.css b/section4/completed/main.css
@@ -0,0 +1,46 @@
+body {
+  padding-top: 50px;
+}
+.main-content {
+  padding: 40px 15px;
+}
+
+.root, .parent, .child {
+  padding: 40px
+}
+
+.root {
+	background-color: rgba(172, 172, 172, 0.55);
+}
+
+.parent {
+	background-color: rgb(56, 126, 245);
+}
+
+.child {
+	background-color: rgba(0, 255, 10, 0.54);
+}
+
+p {
+	color: white;
+}
+
+input {
+	margin-bottom: 10px;
+	display: block;
+	width: 100%;
+	height: 34px;
+	padding: 6px 12px;
+	font-size: 14px;
+	line-height: 1.42857143;
+	color: #555;
+	background-color: #fff;
+	background-image: none;
+	border: 1px solid #ccc;
+	border-radius: 4px;
+	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+	-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
+	-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+}
diff --git a/section4/completed/main.js b/section4/completed/main.js
@@ -0,0 +1,19 @@
+var app = angular.module('codecraft', []);
+
+app.controller('ParentController', function ($scope, $rootScope) {
+	//
+	//$scope.reset = function () {
+	//	$scope.name = "Parent";
+	//};
+
+});
+
+app.controller('ChildController', function ($scope, $rootScope) {
+
+	//$scope.reset = function () {
+	//	$rootScope.name = "Reset By Child";
+	//};
+
+});
+
+
diff --git a/section4/lesson1/index.html b/section4/lesson1/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html >
+<html lang="en"
+      ng-app="codecraft" >
+<head >
+	<title >Scope</title >
+	<link href="../libs/bootstrap/dist/css/bootstrap.min.css"
+	      rel="stylesheet" >
+	<link href="main.css"
+	      rel="stylesheet" >
+</head >
+
+<body >
+
+
+<div class="container" >
+
+	<div class="row" >
+		<div class="col-md-6" >
+			<div class="parent"
+			     ng-controller="ParentController" >
+				<label >
+					<input type="text"
+					       ng-model="name" />
+				</label >
+				<p >{{name}}</p >
+			<div class="child"
+				ng-controller="ChildController">
+				<label>
+					<input type="text" ng-model="name" />
+				</label>
+				<!-- reset is on parent controller -->
+				<button class="btn" ng-click="reset()">Reset</button>
+				<p>{{name}}</p>
+
+			</div>
+			</div >
+		</div >
+	</div >
+</div >
+
+
+<script src="../libs/angular/angular.min.js" ></script >
+<script src="main.js" ></script >
+</body >
+</html >
diff --git a/section4/lesson1/main.css b/section4/lesson1/main.css
@@ -0,0 +1,46 @@
+body {
+  padding-top: 50px;
+}
+.main-content {
+  padding: 40px 15px;
+}
+
+.root, .parent, .child {
+  padding: 40px
+}
+
+.root {
+	background-color: rgba(172, 172, 172, 0.55);
+}
+
+.parent {
+	background-color: rgb(56, 126, 245);
+}
+
+.child {
+	background-color: rgba(0, 255, 10, 0.54);
+}
+
+p {
+	color: white;
+}
+
+input {
+	margin-bottom: 10px;
+	display: block;
+	width: 100%;
+	height: 34px;
+	padding: 6px 12px;
+	font-size: 14px;
+	line-height: 1.42857143;
+	color: #555;
+	background-color: #fff;
+	background-image: none;
+	border: 1px solid #ccc;
+	border-radius: 4px;
+	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+	-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
+	-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+}
diff --git a/section4/lesson1/main.js b/section4/lesson1/main.js
@@ -0,0 +1,15 @@
+var app = angular.module('codecraft', []);
+
+app.controller('ParentController', function ($scope) {
+	$scope.name = "Parent";
+
+	$scope.reset = function () {
+		$scope.name = "Parent";
+	};
+
+});
+
+app.controller('ChildController', function ($scope) {
+});
+
+
diff --git a/section4/lesson2/index.html b/section4/lesson2/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html >
+<html lang="en"
+      ng-app="codecraft" >
+<head >
+	<title >Scope</title >
+	<link href="../libs/bootstrap/dist/css/bootstrap.min.css"
+	      rel="stylesheet" >
+	<link href="main.css"
+	      rel="stylesheet" >
+</head >
+
+<body >
+
+
+<div class="container" >
+
+	<div class="row" >
+		<div class="col-md-6" >
+			<div class="parent"
+			     ng-controller="ParentController" >
+				<label >
+					<input type="text"
+					       ng-model="name" />
+				</label >
+				<p >{{name}}</p >
+
+				<div class="child"
+				     ng-controller="ChildController" >
+					<label >
+						<input type="text"
+						       ng-model="name" />
+					</label >
+					<button class="btn"
+					        ng-click="reset()" >Reset
+					</button >
+					<p >{{name}}</p >
+				</div >
+
+			</div >
+		</div >
+	</div >
+</div >
+
+
+<script src="../libs/angular/angular.min.js" ></script >
+<script src="main.js" ></script >
+</body >
+</html >
diff --git a/section4/lesson2/main.css b/section4/lesson2/main.css
@@ -0,0 +1,46 @@
+body {
+  padding-top: 50px;
+}
+.main-content {
+  padding: 40px 15px;
+}
+
+.root, .parent, .child {
+  padding: 40px
+}
+
+.root {
+	background-color: rgba(172, 172, 172, 0.55);
+}
+
+.parent {
+	background-color: rgb(56, 126, 245);
+}
+
+.child {
+	background-color: rgba(0, 255, 10, 0.54);
+}
+
+p {
+	color: white;
+}
+
+input {
+	margin-bottom: 10px;
+	display: block;
+	width: 100%;
+	height: 34px;
+	padding: 6px 12px;
+	font-size: 14px;
+	line-height: 1.42857143;
+	color: #555;
+	background-color: #fff;
+	background-image: none;
+	border: 1px solid #ccc;
+	border-radius: 4px;
+	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+	-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
+	-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+}
diff --git a/section4/lesson2/main.js b/section4/lesson2/main.js
@@ -0,0 +1,15 @@
+var app = angular.module('codecraft', []);
+
+app.controller('ParentController', function ($scope) {
+	$scope.name = "Parent";
+
+	$scope.reset = function () {
+		$scope.name = "Parent";
+	};
+
+});
+
+app.controller('ChildController', function ($scope) {
+});
+
+