私はangularjsを使用しています..
mainhtml.html
<!DOCTYPE html>
<html data-ng-app="demoapp">
<head>
<script src="scripts/angular.min.js"></script>
<title>Angular js</title>
</head>
<body> <div data-ng-controller="SimpleController">
<div data-ng-view=""></div>
<div class="ng-view"></div>
Name:<input type="text" data-ng-model="name" />{{name}}
<br />
<ul>
<li data-ng-repeat="cust in customers|filter:name|orderBy:'city'">{{cust.name|uppercase}}-{{cust.city|lowercase}}</li>
</ul>
<script>
var demoapp = angular.module('demoapp', []);
demoapp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'view1.html',
controller: 'SimpleController'
}).
when('/partial2', {
templateUrl: 'view2.html',
controller: 'SimpleController'
}).
otherwise({
redirectTo: '/'
});
}]);
demoapp.controller('SimpleController', function ($scope) {
$scope.customers = [{ name: 'aman', city: 'boom' },
{ name: 'ajay', city: 'reem dee' },
{ name: 'hood', city: 'meen' }
];
});
</script>
</div>
</body>
</html>
ビュー1
<div class="container">
<h2>View1</h2>
Name:
<input type="text" data-ng-model="filter.name" />
<br />
<ul>
<li data-ng-repeat="cust in customers|filter :filter.name|orderby"></li>
</ul>
<br />
Customer name:
<input type="text" data-ng-model="newCustomer.name"/>
<br />
<br />
Customer city:
<input type="text" data-ng-model="newCustomer.city"/>
<br />
<br />
<button data-ng-click="addCustomer()">Add customer</button>
<br />
<a href="#/view2">View2</a>
</div>
config（$ routeprovider）関数を追加する前にうまく機能します、、、、routeprovider関数がプログラムを破壊しています...正しく動作させるのに役立ちます