标签：应用 现在 官方库 严格 ons span app mit 控制器
开坑，一直喜欢口袋妖怪，想着能写点有关的程序。
最近项目要改写管理系统，所以用Angular1.x搭建一个口袋妖怪管理系统试试。
巩固Ng1.x的知识+学习库的用法，然后算是记录一个系统从零开始到成型的过程吧哈哈~
暂时计划比较简单，该网站是一个SPA即单页面管理系统应用，暂时分为五个页面：
在完成管理界面之后尝试设计一个主界面，类似宝可梦图鉴的页面，用来练习界面设计&展示口袋妖怪列表
搭建最简AngularJS环境, 然后慢慢完善环境，最好能把我没用过的打包工具试一次（逃
跑起最简单的pokemon列表展示小程序
安装Nodejs，开启命令行安装Yarn:
npm i -g yarn创建工程pokemon-website, 开启命令行进入工程目录，初始化工程配置,然后一路回车就行
yarn init界面编写
<!DOCTYPE html>
<html lang="en" ng-app="pokemon-app">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>口袋妖怪</title>
<script src="libs/angular.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="app.css"/>
</head>
<body ng-controller="AppController">
<h1>口袋妖怪管理系统</h1>
<table>
<tr>
<th>名称</th>
<th>数量</th>
<th>重量</th>
<th>总计</th>
<th>操作</th>
</tr>
<tr ng-repeat="pokemon in pokemons">
<td>{{pokemon.name}}</td>
<td><input type="text" ng-model="pokemon.count"></td>
<td>{{pokemon.weight}}</td>
<td>{{pokemon.weight * pokemon.count}}</td>
<td><button ng-click="remove($index)">删除</button></td>
</tr>
</table>
</body>
</html>脚本逻辑编写
(function () {
‘use strict‘;
angular.module(‘pokemon-app‘, [])
.controller(‘AppController‘, AppController);
var pokemons = [
{no:‘001‘, name:‘妙蛙种子‘, count: 1, weight: 6.9},
{no:‘002‘, name:‘妙蛙草‘, count: 1, weight: 13.0},
{no:‘003‘, name:‘妙蛙花‘, count: 1, weight: 100},
{no:‘004‘, name:‘小火龙‘, count: 1, weight: 8.5},
];
AppController.$inject = [‘$scope‘];
function AppController ($scope) {
$scope.pokemons = pokemons;
$scope.remove = function (index) {
$scope.pokemons.splice(index, 1);
}
}
})();此时工程已经基本完成，可以双击index.html，在浏览器上应该就能够看到如下界面了~如果不行的话可以参考一下源码的第一次提交
用现在的方法本地运行，说实话有点原始，如果我要分享给盆友看怎么办，难道整个源代码给他运行？当然不，更优雅的解决方案http-server了解一下.
只要在命令进入项目,输入yarn add http-server --dev，完成安装后输入http-server并回车，就可以简单开启本地服务器，这个时候你的盆友就可以超方便的根据地址+端口访问刚刚的作品啦（当然要让盆友先连上和电脑相同网段的WiFi啦）
从零开始搭建口袋妖怪管理系统(1)-从Angular1.x开始
标签：应用 现在 官方库 严格 ons span app mit 控制器
原文地址：https://www.cnblogs.com/qixi233/p/8900741.html
