从零开始搭建口袋妖怪管理系统(1)-从Angular1.x开始

作者: Nodreame | 来源:发表于2018-04-18 20:31 被阅读62次

从零开始搭建口袋妖怪管理系统(1)-从Angular1.x开始
从零开始搭建口袋妖怪管理系统(2)-借助ngRoute实现详情页
双拼练习小系统
跟永澄老师学做小系统：外部环境变化下的体重管理系统
从零到壹——打造专属博客
从零开始搭建口袋妖怪管理系统(4)-借助webpack4.6工程
后台管理系统学习链接
从零开始搭建口袋妖怪管理系统(3)-实现一个简单的SPA管理系统
用管理者思维模型构建你自己的学习系统
Win10下安装Anaconda+CUDA+cudnn+Tens

开坑，一直喜欢口袋妖怪，想着能写点有关的程序。

最近项目要改写管理系统，所以用Angular1.x搭建一个口袋妖怪管理系统试试。

巩固Ng1.x的知识+学习库的用法，然后算是记录一个系统从零开始到成型的过程吧哈哈~

总计划

暂时计划比较简单，该网站是一个SPA即单页面管理系统应用，暂时分为五个页面：

[ ] 口袋妖怪
[ ] 技能
[ ] 树果
[ ] 道具
[ ] 训练师

在完成管理界面之后尝试设计一个主界面，类似宝可梦图鉴的页面，用来练习界面设计&展示口袋妖怪列表

多说无益，开工先

一、目标

搭建最简AngularJS环境, 然后慢慢完善环境，最好能把我没用过的打包工具试一次（逃
跑起最简单的pokemon列表展示小程序

二、环境搭建

安装Nodejs，开启命令行安装Yarn:
```
npm i -g yarn
```
由于不用现成环境，所以只能自己下载AngularJS的库了😭，打开AngularJS1.6.9, 下载angular-1.6.9.zip，全部相关的AngularJS官方库都在里面了，用到直接加引用就好了超方便
创建工程pokemon-website, 开启命令行进入工程目录，初始化工程配置,然后一路回车就行
```
yarn init
```
那我们先来设计我们的项目文件构成
- libs 存放angular库
- node_modules 存放工具及第三方库
- index.html 主界面
- app.css 主样式文件
- app.js 主js文件
- package.json 配置文件
- yarn.lock yarn锁定安装库的版本
- CommitRules.md 提交规范
- README.md 工程说明
- .gitignore 工程提交忽略文件列表

三、代码编写

界面编写

<!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>

首先将angular.js从刚才下载的包中复制黏贴工程中新建的libs文件夹下，并在html中引入
然后引入app.js作为主JS文件
在html标签中加入ng-app="pokemon-app",即html中都是'pokemon-app'模块的管理区域
在body标签中加入ng-controller="AppController"，即body下都是'AppController'控制器的控制区域
table中第二个tr使用了AngularJS1.x的语法ng-repeat，意思就是遍历pokemons并取出每个pokemon作为列表项渲染

脚本逻辑编写

(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);
        }
    }
})();