Skip to content

Instantly share code, notes, and snippets.

@tomoh1r
Last active Dec 25, 2015
Embed
What would you like to do?
angular simple example
<!doctype html>
<html lang="en" ng-app="front">
<head>
<meta charset="utf-8">
<title>angular simple example</title>
</head>
<body>
<!-- update this div -->
<div ng-view></div>
<!-- use google cdn -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
<!-- use html template see: https://docs.angularjs.org/api/ng/directive/script -->
<script type="text/ng-template" id="/top.html">
<div>
<dl>
<dt>key<dd><input type="text" ng-model="itemKey">
<dt>value<dd><input type="text" ng-model="itemValue">
<dl/>
<button ng-click="addItem(itemKey, itemValue)">add item</button>
<p>hello {{ message }}</p>
<ul ng-repeat="item in items">
<li><a href="#top/some/{{ item.id }}">{{ item.value | tohage }}</a></li>
</ul>
</div>
</script>
<script type="text/ng-template" id="/detail.html">
<p><a href="#top/">&lt;&lt;&lt;</a></p>
<p><a ng-click="someClick(someValue)">{{ someValue }}</span></p>
</script>
<!-- angular script -->
<script>
(function() {
'use strict';
var source_data = [
{"id":"some",
"value":"some-some-some"},
{"id":"any",
"value":"any-any-any"},
{"id":"alt",
"value":"alt-alt-alt"},
];
var config = angular.module('front', ['ngRoute', 'ctls', 'filters']),
ctls = angular.module('ctls', []),
filters = angular.module('filters', []);
config.config([
'$routeProvider',
function($routeProvider) {
$routeProvider
.when('/top', {
controller: 'TopController',
templateUrl: '/top.html'
})
.when('/top/some/:someId', {
controller: 'DetailController',
templateUrl: '/detail.html'
})
.otherwise({
redirectTo: '/top'
});
}]);
ctls.controller('TopController', [
'$scope',
function($scope) {
$scope.message = 'ほげほげ';
$scope.items = source_data;
$scope.addItem = function(itemKey, itemValue) {
$scope.items.push({'id': itemKey, 'value': itemValue});
};
}]);
ctls.controller('DetailController', [
'$scope', '$routeParams',
function($scope, $routeParams) {
$scope.someId = $routeParams.someId;
$scope.someValue = '';
for (var i = 0; i < source_data.length; i++) {
if (source_data[i].id === $scope.someId) {
$scope.someValue = source_data[i].value;
break;
}
}
$scope.someClick = function(msg) {
alert(msg);
};
}]);
filters.filter(
'tohage',
function() {
return function(input) {
return input === 'some-some-some' ? 'hage-hage-hage' : input;
};
});
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment