to-do-list.html

<!doctype html>
<html ng-app='project'>
<title>Angular to-do list demo page</title>
<style type='text/css'>
body{
	font-family: arial;
	color: #555;
}

li{
	list-style: none outside none;
	display: inline-block;
	margin: 0 10px;
}


</style>


<head>
	<script type='text/javascript' src='angular.js'></script>
	<script type='text/javascript' src='angular-1.2.5/angular-resource.js'></script>
	<script type='text/javascript' src='angular-1.2.5/angular-route.js'></script>
	<script type='text/javascript'>
	angular.module('project', ['ngRoute'])

	.factory('List', function(){
		var service = {
			list:  [
				{name:'gee', age: 25}, 
				{name:'yury', age:25}
			]

		};
		return service;
	})
	
	.config(function($routeProvider){
		$routeProvider
		.when('/', {
			controller: 'listController',
			templateUrl: 'list.html'
		})
		.when('/detail/:name',{
			controller: 'detailController',
			templateUrl: 'detail.html'
		})
		.otherwise({
			redirectTo: '/'
		});
	})

	.controller('listController', function($scope, List){
			console.log('list is');
			console.log(List);

			$scope.myname = 'gee';
			$scope.age = '25';
			//$scope.inputName  = '';

			$scope.list = List.list;

		 	$scope.getCount = function(){
		 		console.log('in getting count');
		 		return this.list.length;
		 	};

		 	$scope.getName = function(){
		 		console.log('in getting name');
		 		return '123';
		 	}

		 	$scope.addPerson = function(){
		 		console.log(this === $scope);
		 		console.log($scope);
		 		this.list.push({name: this.inputName, age: 25});
		 	}
	})

	.controller('detailController', function($scope, $routeParams){
		$scope.name = 'geegeegee';
		console.log('detailController arguments');
		console.log(arguments);
	})

	.controller('testController', function($scope, List, $routeParams){
		console.log('argumetns');
		console.log(arguments);

		console.log('list is');
		console.log(List);

		$scope.name = 'test controller';
		$scope.list = List.list;

		$scope.getCount = function(){
			return $scope.list.length;
		}
	});

	</script>
	<script type='text/javascript'>
		function myController($scope){
			$scope.myname = 'gee';
			$scope.age = '25';
			//$scope.inputName  = '';

			$scope.list = [
				{name:'gee', age: 25},
				{name:'yury', age:25}
			]

			$scope.getCount = function(){
				console.log('in getting name');
				return this.list.length;
			}

			$scope.addPerson = function(){
				console.log(this === $scope);
				console.log($scope);
				this.list.push({name: this.inputName, age: 25});
			}

		}

	</script>
</head>
<body>
	<button ng-click='count = count+1' ng-init="count=0">click</button>
	count is {{click}}
	<!-- <div ng-view> -->
	<div ng-controller='testController'>
		text is {{name}}<br>
		count is {{getCount()}}
		<button ng-click="name=name+11">click</button>
	</div>

</body>
<!-- <body ng-controller='myController'>
	<p>There is <span>{{getCount()}}</span> people in the current list!<p>


	<input type='text' ng-model='inputName'><button ng-click='addPerson()'>add</button>
	hello {{inputName}}

	<ul ng-repeat='person in list'>
		<li>{{person.name}}</li>
		<li>{{person.age}}</li>
	</ul>
</body> -->
</html>