Angularjs-Example-Communication-Between-Controller

dihaw-team · May 26, 2015 · 4d7b131 · 4d7b131
1 parent 37a4793
commit 4d7b131
Show file tree

Hide file tree

Showing 12 changed files with 256 additions and 0 deletions.
diff --git a/controller1.js b/controller1.js
@@ -0,0 +1,14 @@
+
+
+
+
+sampleApp.controller('FirstCtrl', function($scope,$rootScope,greetingSerive) {
+
+		var firstCtrl = this;
+		firstCtrl.valueBetweenController = greetingSerive;
+		firstCtrl.valueBetweenController.valueTo= "Value From First Controller";
+
+		$scope.valueBetweenController=firstCtrl.valueBetweenController.valueTo;
+
+});
+
diff --git a/controller2.js b/controller2.js
@@ -0,0 +1,12 @@
+
+
+
+sampleApp.controller('SecondeCtrl', function($scope,$rootScope,greetingSerive) {
+
+		var secondeCtrl = this;
+		secondeCtrl.valueBetweenController = greetingSerive;
+
+		$scope.valueBetweenController=secondeCtrl.valueBetweenController.valueTo;
+
+
+});
diff --git a/controller3.js b/controller3.js
@@ -0,0 +1,12 @@
+
+
+sampleApp.controller('thirdCtrl', function($scope,$rootScope,messageFromFunction,greetingSerive) {
+
+	$scope.messageFrom  = messageFromFunction;
+
+
+	var thirdCtrl = this;
+	thirdCtrl.valueBetweenController = greetingSerive;
+	$scope.valueBetweenController=thirdCtrl.valueBetweenController.valueTo;
+
+});
diff --git a/first.html b/first.html
@@ -0,0 +1,7 @@
+
+
+<h1>First Page</h1>
+<h2>{{valueBetweenController}}</h2>
+<p>
+	Etiam at iaculis nulla, ac posuere quam. Nulla facilisi. Curabitur rutrum turpis id rutrum lobortis. Etiam in aliquet magna, et vulputate arcu. Donec eget porta mauris. Pellentesque euismod arcu mi, ut hendrerit mi imperdiet a. Praesent tellus neque, bibendum vel lacus id, feugiat venenatis nibh. Nulla a faucibus est. Praesent ultricies cursus libero quis fringilla. Cras mattis lacinia sapien, nec laoreet lectus faucibus at. Maecenas laoreet libero ac justo ornare posuere. Aliquam mi eros, semper ac interdum et, tincidunt varius lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget lacinia augue. Cras scelerisque, sapien vel pellentesque rhoncus, magna arcu ornare felis, ac elementum magna felis ac orci.
+</p>
diff --git a/functionJs.js b/functionJs.js
@@ -0,0 +1,9 @@
+
+
+
+ var checkRouting= function () {
+
+ 	return "this value is from function, you can open file 'functionJs'. ";
+
+};
+
diff --git a/index.html b/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+
+	<head>
+		<meta charset="utf-8"/>
+		<title>Learn AngularJS</title>
+
+		<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" />
+
+		<!-- The main CSS file -->
+		<link href="style.css" rel="stylesheet" />
+
+		<!--[if lt IE 9]>
+			<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+		<![endif]-->
+	</head>
+
+	<!-- The ng-app directive tells angular that the code below should be evaluated -->
+
+	<body ng-app="sampleApp">
+
+		<!-- The navigation menu will get the value of the "active" variable as a class.
+			 The $event.preventDefault() stops the page from jumping when a link is clicked. -->
+
+		<nav class="{{active}}" ng-click="$event.preventDefault()">
+			<!-- When a link in the menu is clicked, we set the active variable -->
+
+			<a href="#/default" class="home"  >Home</a>
+			<a href="#/secondePage" >Seconde Page</a>
+			<a href="#/thirdPage" class="services" >Third Page</a>
+		</nav>
+
+		<!-- ng-show will show an element if the value in the quotes is truthful,
+			 while ng-hide does the opposite. Because the active variable is not set
+			 initially, this will cause the first paragraph to be visible. -->
+
+			<ng-view></ng-view> 
+
+		<p ng-hide="active">Please click a menu item</p>
+		<p ng-show="active">You chose <b>{{active}}</b></p>
+
+		<!-- Include AngularJS from Google's CDN -->
+		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
+		<script src="moduleAppl.js"></script>
+		<script src="functionJs.js"></script>
+		<script src="service1.js"></script>
+		<script src="controller1.js"></script>
+		<script src="controller2.js"></script>
+		<script src="controller3.js"></script>
+		<script src="routerAppl.js"></script>
+
+	</body>
+</html>
diff --git a/moduleAppl.js b/moduleAppl.js
@@ -0,0 +1,7 @@
+
+'user strict';
+
+//Define an angular module for our app
+var sampleApp = angular.module('sampleApp', []);
+
+
diff --git a/routerAppl.js b/routerAppl.js
@@ -0,0 +1,26 @@
+
+
+
+sampleApp.config(['$routeProvider',
+  function($routeProvider) {
+    $routeProvider.
+      when('/default', {
+        templateUrl: 'first.html',
+        controller: 'FirstCtrl'
+    }).      
+      when('/secondePage', {
+        templateUrl: 'seconde.html',
+        controller: 'SecondeCtrl' 
+      }).
+      when('/thirdPage', {
+        templateUrl: 'third.html',
+        controller: 'thirdCtrl' ,
+        resolve: {
+                    messageFromFunction: checkRouting
+                }        
+    }).      
+      otherwise({
+        redirectTo: '/'
+      });
+}]);
+
diff --git a/seconde.html b/seconde.html
@@ -0,0 +1,4 @@
+
+<h1>Page 2 </h1>
+<h2>{{valueBetweenController}}</h2>
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rhoncus, tortor id pharetra suscipit, eros mauris facilisis ipsum, a porta nibh nibh et sem. Proin semper, lorem a laoreet lacinia, magna libero laoreet est, ut efficitur nunc risus in ante. Pellentesque malesuada commodo elementum. Nam varius nunc vel lectus semper, nec tincidunt orci fermentum. Mauris maximus tincidunt ultrices. Donec id dui porttitor, tristique lacus eget, faucibus lectus. Pellentesque ornare augue quis egestas varius. Aliquam tincidunt faucibus ex vel luctus. Donec vitae pellentesque risus, sit amet auctor elit. In tincidunt dolor id blandit pretium.</p>
diff --git a/service1.js b/service1.js
@@ -0,0 +1,11 @@
+
+
+
+sampleApp.service("greetingSerive",function greeting(){
+
+
+         var greeting = this;
+         greeting.valueTo = "Default";
+
+
+}); 
diff --git a/style.css b/style.css
@@ -0,0 +1,95 @@
+/*-------------------------
+	Simple reset
+--------------------------*/
+
+
+*{
+	margin:0;
+	padding:0;
+}
+
+
+/*-------------------------
+	General Styles
+--------------------------*/
+
+
+body{
+	font:15px/1.3 'Open Sans', sans-serif;
+	color: #5e5b64;
+	text-align:center;
+}
+
+a, a:visited {
+	outline:none;
+	color:#389dc1;
+}
+
+a:hover{
+	text-decoration:none;
+}
+
+section, footer, header, aside, nav{
+	display: block;
+}
+
+
+/*-------------------------
+	The menu
+--------------------------*/
+
+
+nav{
+	display:inline-block;
+	margin:60px auto 45px;
+	background-color:#5597b4;
+	box-shadow:0 1px 1px #ccc;
+	border-radius:2px;
+}
+
+nav a{
+	display:inline-block;
+	padding: 18px 30px;
+	color:#fff !important;
+	font-weight:bold;
+	font-size:16px;
+	text-decoration:none !important;
+	line-height:1;
+	text-transform: uppercase;
+	background-color:transparent;
+
+	-webkit-transition:background-color 0.25s;
+	-moz-transition:background-color 0.25s;
+	transition:background-color 0.25s;
+}
+
+nav a:first-child{
+	border-radius:2px 0 0 2px;
+}
+
+nav a:last-child{
+	border-radius:0 2px 2px 0;
+}
+
+nav.home .home,
+nav.projects .projects,
+nav.services .services,
+nav.contact .contact{
+	background-color:#e35885;
+}
+
+p{
+	font-size:22px;
+	font-weight:bold;
+	color:#7d9098;
+}
+
+p b{
+	color:#ffffff;
+	display:inline-block;
+	padding:5px 10px;
+	background-color:#c4d7e0;
+	border-radius:2px;
+	text-transform:uppercase;
+	font-size:18px;
+}
diff --git a/third.html b/third.html
@@ -0,0 +1,6 @@
+
+<h1>Page 3</h1>
+<h2>{{valueBetweenController}}</h2>
+<h4>{{messageFrom}}</h4>
+<br>
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quam erat, tempor commodo quam sit amet, semper suscipit orci. Ut vel ultricies sapien. Vivamus et lorem ut urna condimentum mattis a fringilla sapien. Nunc dictum accumsan nisl, ac dignissim leo pharetra id. Aliquam malesuada felis ipsum, nec tempor tortor vulputate sed. Aliquam nibh orci, porta non dapibus dictum, scelerisque ac ipsum. Vestibulum ut enim a sapien varius luctus. Aliquam tincidunt justo vehicula, consectetur sapien a, eleifend augue. Cras a dapibus libero. Vivamus eleifend molestie nunc nec sagittis. Phasellus congue leo quis arcu consectetur laoreet. Aliquam id nisi massa. Nunc ornare odio pellentesque accumsan dignissim. In rhoncus diam in convallis tristique. Duis id accumsan arcu.</p>