Skip to content

Instantly share code, notes, and snippets.

@codematix
Created December 29, 2015 02:48
Show Gist options
  • Save codematix/910907b8f73d12c2fe1c to your computer and use it in GitHub Desktop.
Save codematix/910907b8f73d12c2fe1c to your computer and use it in GitHub Desktop.
Learn Angular
{
"name": "learn-ng",
"description": "",
"main": "index.js",
"authors": [
"Ranganath Kini <codematix@codematix.me>"
],
"license": "ISC",
"moduleType": [
"globals"
],
"homepage": "",
"private": true,
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"angular-animate": "~1.4.8",
"angular-resource": "~1.4.8",
"angular-mocks": "~1.4.8",
"angular-route": "~1.4.8",
"bootstrap": "~3.3.6",
"angular": "~1.4.8",
"jquery": "~2.1.4"
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Learn Directives</title>
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css"/>
<link rel="stylesheet" href="css/app.css"/>
<script src="/bower_components/angular/angular.js"></script>
<script src="js/directives.js"></script>
</head>
<body ng-app="learn-directives">
<div ng-controller="Controller">
<my-customer info="jdoe"></my-customer>
<my-customer info="asmith"></my-customer>
<div>Date Format: <input type="text" ng-model="format"></div>
<div>Current time is: <span my-current-time="format"></span>
</div>
</body>
</html>
(function (angular) {
'use strict';
var app = angular.module('learn-directives', []);
app.controller('Controller', ['$scope', function ($scope) {
$scope.jdoe = {
name: 'John Doe',
address: '1600 Amphitheatre'
};
$scope.asmith = {
name: 'Adam Smith',
address: '123 Somewhere'
};
$scope.format = 'M/d/yy h:mm:ss a';
}]);
app.directive('myCustomer', function () {
return {
restrict: 'E',
scope: {
customerInfo: '=info'
},
templateUrl: 'templates/myCustomer.html'
};
});
app.directive('myCurrentTime', ['$interval', 'dateFilter', function ($interval, dateFilter) {
function link(scope, el, attrs) {
var format, timeoutId;
function updateTime() {
el.text(dateFilter(new Date(), format));
}
scope.$watch(attrs.myCurrentTime, function (v) {
format = v;
updateTime();
});
el.on('$destroy', function () {
$interval.cancel(timeoutId);
});
timeoutId = $interval(updateTime, 1000);
}
return {
restrict: 'A',
link: link
};
}]);
})(window.angular);
Address: {{customerInfo.address}}
Name: {{customerInfo.name}}
Name: {{customerInfo.name}} Address: {{customerInfo.address}}
{
"name": "learn-ng",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"bower": "^1.7.1",
"http-server": "^0.8.5",
"jasmine-core": "^2.4.1",
"karma": "^0.13.16",
"karma-chrome-launcher": "^0.2.2",
"karma-firefox-launcher": "^0.1.7",
"karma-jasmine": "^0.3.6",
"protractor": "^3.0.0",
"shelljs": "^0.5.3",
"tmp": "0.0.28"
},
"scripts": {
"postinstall": "bower install",
"prestart": "npm install",
"start": "http-server -a 0.0.0.0 -p 8000",
"pretest": "npm install",
"test": "node node_modules/karma/bin/karma start test/karma.conf.js",
"test-single-run": "node node_modules/karma/bin/karma start test/karma.conf.js --single-run",
"preupdate-webdriver": "npm install",
"update-webdriver": "webdriver-manager update",
"preprotractor": "npm run update-webdriver",
"protractor": "protractor test/protractor-confi.js",
"update-index-async": "node -e \"require('shelljs/global'); sed('-i', /\\/\\/@@NG_LOADER_START@@[\\s\\S]*\\/\\/@@NG_LOADER_END@@/, '//@@NG_LOADER_START@@\\n' + cat('bower_components/angular-loader/angular-loader.min.js') + '\\n//@@NG_LOADER_END@@', 'app/index-async.html');\""
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment