tomoh1r · December 25, 2015 03:51
diff --git a/index.html b/index.html
 <!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>
	<!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/"><<<</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>