Skip to content

Instantly share code, notes, and snippets.

@huynj316

huynj316/index.html

Created April 27, 2015 01:32
Show Gist options
  • Save huynj316/2af2ddc523035be2c8f7 to your computer and use it in GitHub Desktop.
Save huynj316/2af2ddc523035be2c8f7 to your computer and use it in GitHub Desktop.
Download ZIP
jPEBwY
Raw
index.html
<html>
<head></head>
<body ng-app="myApp">
<h2> {{title}} </h2>
<div ng-controller="HomeCtrl"> <!--specify controller-->
<h4>This is home page</h4>
<h5>Welcome back {{user}}</h5>
<input type="text" ng-model="inputMsg">
<p ng-class="{'red': inputMsg.length > 6, 'green': inputMsg.length >10}">You just typed:{{inputMsg}} </p>
<p ng-style= "{'font-size': inputMsg.length*2 + 'px', opacity: inputMsg.length*.1, color: rgb( '+ inputMsg.length, 100, 100)}">{{inputMsg}}</p>
<button ng-click="sayHello(inputMsg)">Say Hello</button>
</div>
<div ng-controller="BlogCtrl">
<h4>This is blog page</h4>
<!-- <h5>{{greeting}}</h5>-->
</div>
</body>
</html>
Raw
script.js
angular.module('myApp', []) // keep dependencies
.run(function($rootScope) { //what gets called first
console.log('App Init');
$rootScope.title = 'My Awesome Website';
})
//Binding Controller
.controller("HomeCtrl", function($scope, $rootScope) {
$scope.user = 'Apon';
$scope.sayHello = function(msg) {
$rootScope.greeting = msg;
};
})
.controller("BlogCtrl", function($scope, $rootScope) {
})
Raw
style.css
.red {
color: red;
}
.green {
color: green;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment