Skip to content

Instantly share code, notes, and snippets.

@Fahrek

Fahrek/index.html

Created October 16, 2017 09:58
Show Gist options
  • Save Fahrek/767520e503cca024a44c22f06fa42b4f to your computer and use it in GitHub Desktop.
Save Fahrek/767520e503cca024a44c22f06fa42b4f to your computer and use it in GitHub Desktop.
Download ZIP
pWxQMw
Raw
index.html
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>AngularJS Example</title>
<script>src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js'</script>
</head>
<body>
<!-- <h1 ng-app='' ng-init="greeting='Hello World!'">{{greeting}}</h1>
{{greeting}} -->
<!-- <div ng-app=''>
<p>Name : <input type="text" ng-model='name'></p>
<h1>Hello {{name}} (llaves)</h1>
<h1>Hello <span ng-bind='name'></span> (bind)</h1>
</div> -->
<!-- <div ng-app='' ng-init='firstname="John"'>
<h1 class={{firstname}}>Hello my name is <span ng-bind='firstname'></span> (bind)</h1>
<h1>Hello my name is {{firstname}}</h1>
</div> -->
<!-- <div ng-app=''>
<p>My second expression: {{5/4}}</p>
<p>{{946757880 | date:'dd-MM-yyyy'}}</p>
</div> -->
<!-- <p>Try to change the names.</p>
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div> -->
<!-- <div ng-app="" ng-init="quantity=8;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>
</div> -->
<!-- <div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The full name is: {{ firstName + " " + lastName }}</p>
<p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p>
</div> -->
<!-- <div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is {{ person.lastName }}</p>
<p>The name is <span ng-bind="person.firstName"></span></p>
</div> -->
<!-- <div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is {{ points[2] }}</p>
<p>The third result is <span ng-bind="points[4]"></span></p>
</div> -->
<!-- <div data-ng-app="" data-ng-init="quantity=1;price=5">
<h2>Cost Calculator</h2>
Quantity: <input type="number" ng-model="quantity">
Price: <input type="number" ng-model="price">
<p><b>Total in dollar:</b> {{quantity * price}}</p>
</div> -->
<!-- <div data-ng-app="" data-ng-init="names=['Jani','Hege','Kai']">
<p>Looping with ng-repeat:</p>
<ul>
<li data-ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div> -->
<!-- <div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<p>Looping with objects:</p>
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}</li>
</ul>
</div> -->
<div ng-app="myApp" ng-controller="personCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}
</div>
</body >
</html>
Raw
script.js
// var app = angular.module('myApp', []);
// app.controller('myCtrl', function($scope) {
// $scope.firstName= "John";
// $scope.lastName= "Doe";
// });
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
};
});
Raw
scripts
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment