1、根入口文件index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AngularJS 路由实例 </title>
<script src="https://cdn.staticfile.org/angular.js/1.7.0/angular.min.js"></script>
<script src="https://cdn.staticfile.org/angular.js/1.7.0/angular-route.min.js"></script>
<script src="js/test.js"></script> <!--引入外部逻辑文件-->
</head>
<body>
<div ng-app="ngRouteExample">
<br><br>
<br>
<div ng-view="" class="ng-scope">
</div>
</div>
</body>
</html>
2、home.index文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="searchbar">
<ul class="entity-tabular-fields">
<li>
<label>搜索：</label>
<span class="field-control">
<input type="text" ng-model="filter.productName" value=" " />
</span>
<label></label>
</li>
</ul>
</div>
<h2><a href="#!/about">新增产品</a></h2>
<table class="items-listing">
<thead>
<tr>
<th>代码</th>
<th>名称</th>
<th>描述</th>
<th>类别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="product in products|filter:filter.productName">
<td><a href="#!/about?code={{product.code}}">{{product.code}}</a></td>
<td>{{product.name}}</td>
<td>{{product.description}}</td>
<td>{{product.category}}</td>
<td><a href="#!/?code={{product.code}}">删除{{product.code}}</a></td>
</tr>
</tbody>
</table>
</body>
</html>
3、about.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>编辑页面</title>
</head>
<body>
<div class="container">
<h2 class="page-title">产品编辑</h2>
<br/>
<ul class="entity-tabular-fields">
<li class="entity-field-row">
<label>产品代码：</label>
<span class="field-control">
<input type="text" ng-model="currentProduct.code"/>
<label></label>
</span>
</li>
<li class="entity-field-row">
<label>产品名称：</label>
<span class="field-control">
<input type="text" ng-model="currentProduct.name" />
<label></label>
</span>
</li>
<li class="entity-field-row">
<label>产品描述：</label>
<span class="field-control">
<input type="text" ng-model="currentProduct.description"/>
</span>
<label></label>
</li>
<li class="entity-field-row">
<label>产品种类：</label>
<span class="field-control">
<input type="text" ng-model="currentProduct.category"/>
</span>
<label></label>
</li>
<li class="entity-field-row">
<span class="field-control">
<button ng-click="saveProduct()">保存</button>
</span>
</li>
</ul>
</div>
</body>
</html>
4、test.js
var listApp = angular.module('ngRouteExample', ['ngRoute']);
listApp.config(function ($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'embedded/home.html',
controller: 'AboutController'
}).
when('/about', {
templateUrl: 'embedded/about.html',
controller: 'AboutController'
}).
otherwise({
redirectTo: '/'
});
});
listApp.controller('AboutController', function ($scope, $route, $routeParams, $location, ProductFactory) {
var code = $location.search().code;
$routeParams.code = code;
// $scope.$route = $route;
$scope.products = [];
var init = function () {
$scope.products = ProductFactory.getProducts();
}
var initProductEdit = function () {
if (code == undefined) {
$scope.currentProduct = {};
} else {
$scope.currentProduct = ProductFactory.loadProductByCode(code);
}
}
$scope.$on('$viewContentLoaded', function () {
var tempalteUrl = $route.current.templateUrl;
if (tempalteUrl == "embedded/about.html") {
initProductEdit();
} else if (tempalteUrl == "embedded/home.html") {//大小写要和temlateUrl中的大小写保持一致
var code = $routeParams.code;
if (code != undefined) {
$scope.deleteProduct(code);
}
}
});
init();
$scope.saveProduct = function () {
ProductFactory.saveProduct($scope.currentProduct);
$location.search('code', null);
$location.path('/');
}
$scope.deleteProduct = function (code) {
ProductFactory.deleteProduct(code);
$location.search('code', null);
$location.path('/');
}
});
listApp.factory('ProductFactory', function () {
//初始化产品数组
var products = [
{code: 'P001', name: 'Lumia 950XL', description: 'win10系统最好的手机，带有黑科技色彩', category: 'mobile'},
{code: 'P002', name: 'Lumia 950', description: 'win10系统次好的手机，相比XL低个档次', category: 'mobile'},
{code: 'P003', name: 'Surface Pro Book', description: '微软最具创新的笔记本', category: 'Notebook'},
{code: 'P004', name: 'Surface Pro 4', description: '微软最好的PC/平板二合一产品', category: 'Surface'},
{code: 'P005', name: 'Surface 4', description: '微软次好的PC/平板二合一产品', category: 'Surface'},
{code: 'P006', name: 'Surface Phone', description: '传说中微软下一代win10系统超旗舰手机', category: 'mobile'}
];
var factory = {};
factory.getProducts = function () {
return products;
}
factory.loadProductByCode = function (code) {
var productFound = {};
for (var i = 0; i < products.length; i++) {
if (products[i].code == code) {
productFound = products[i];
break;
}
}
return productFound;
}
factory.saveProduct = function (product) {
var tempProduct = factory.loadProductByCode(product.code);
if (tempProduct == null || tempProduct == undefined) {
tempProduct = {};
tempProduct.code = product.code;
tempProduct.name = product.name;
tempProduct.description = product.description;
tempProduct.category = product.category;
} else {
tempProduct.code = product.code;
tempProduct.name = product.name;
tempProduct.description = product.description;
tempProduct.category = product.category;
products.push(tempProduct);
}
}
factory.deleteProduct = function (code) {
var tempProduct = factory.loadProductByCode(code);
if (tempProduct != null) {
products.remove(tempProduct);
}
}
return factory;
});
