Angular (JS Class)

In this example below you will see how to do a Angular (JS Class) with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 01fade, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 01fade ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Angular (JS Class)</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html>
	<head></head>
	<body ng-app="myApp">
		<h2>{{title}}</h2>
		<!-- 	Controller is a bubble	 -->
		<div ng-controller="HomeCtrl">
			<h4>Home Page - {{title}}</h4>
			<p>Welcome back {{user}}</p>
		<!-- 		inputMsg will change whenever I type new char	 -->
			<input type="text" ng-model="inputMsg"/>
			<p ng-class="{'red': inputMsg.length>6, 'green': inputMsg.length > 10 }">{{inputMsg}}</p>
			<!--???-->
			<p ng-style="{'font-size': inputMsg.length*5 + 'px', color: 'rgba(' + Math.floor(Math.random()*255) + ',0,0,1)'}">{{inputMsg}}</p>
			<button ng-click="sayHello(inputMsg)">Hello</button>
		</div>
		<div ng-controller="BlogCtrl">
			<h4>Blog Page - {{title}}</h4>
			<p>{{greeting}}</p>
			<div>{{array}}</div>
			<button ng-click="addNumber()">Add Number to Array</button><br>
			
			<span ng-repeat="(key, value) in objects">{{value.data}} </span><br>
			<button ng-click="addObject()">Add Objects to Array</button>
			
			<div ng-repeat="(name, age) in {'adam':10, 'amalie':12}">{{name}}: {{age}}</div>
			{{start | date:'yyyy-MM-dd'}}
			<button ng-click="end()">End</button>
		{{time}}
		</div>
	</body>
</html>
  <script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/01fade/angular-js-class-jEjBWR */
.red {
	color: red;
}

.green {
	color: green;
}

/*Downloaded from https://www.codeseek.co/01fade/angular-js-class-jEjBWR */
angular.module('myApp', [])
.run(function($rootScope) {
	console.log('App Init');
	$rootScope.title = 'My Awesome Site';
})
// methods are chained
//Binding Controller
.controller('HomeCtrl', function($scope, $rootScope){
	//scope only available in HomeCtrl
	$scope.user = 'You';
	$scope.sayHello = function(msg){
		//need to inject in controller
		$rootScope.greeting = msg;
	};
})
.controller('BlogCtrl', function($scope, $rootScope){
	$scope.array = [3, 5, 7];	
	$scope.addNumber = function () {
		var num = Math.floor(Math.random()*10);
		$scope.array.push(num);
	};
	
	$scope.objects = [{data: 3}, {data:5}, {data:7}];
	$scope.addObject = function () {
		var num = Math.floor(Math.random()*10);
		var obj = { data: num };
		$scope.objects.push(obj);
	};
	
	$scope.start = new Date();
	
	$scope.end = function () {
		$scope.end = new Date();
		$scope.time = ($scope.end - $scope.start)/1000;
	};
})

Comments