從零開始搭建口袋妖怪管理系統(1)-從Angular1.x開始

時間 2019-11-10

標籤開始搭建口袋妖怪管理系統 angular1.x angular 欄目 AngularJS 简体版

原文原文鏈接

開坑，一直喜歡口袋妖怪，想着能寫點有關的程序。css

最近項目要改寫管理系統，因此用Angular1.x搭建一個口袋妖怪管理系統試試。html

鞏固Ng1.x的知識+學習庫的用法，而後算是記錄一個系統從零開始到成型的過程吧哈哈~node

總計劃

暫時計劃比較簡單，該網站是一個SPA即單頁面管理系統應用，暫時分爲五個頁面：webpack

[ ] 口袋妖怪
[ ] 技能
[ ] 樹果
[ ] 道具
[ ] 訓練師

在完成管理界面以後嘗試設計一個主界面，相似寶可夢圖鑑的頁面，用來練習界面設計&展現口袋妖怪列表git

多說無益，開工先

1、目標

搭建最簡AngularJS環境, 而後慢慢完善環境，最好能把我沒用過的打包工具試一次（逃
跑起最簡單的pokemon列表展現小程序

2、環境搭建

安裝Nodejs，開啓命令行安裝Yarn:

npm i -g yarn

因爲不用現成環境，因此只能本身下載AngularJS的庫了😭，打開AngularJS1.6.9, 下載angular-1.6.9.zip，所有相關的AngularJS官方庫都在裏面了，用到直接加引用就行了超方便
建立工程pokemon-website, 開啓命令行進入工程目錄，初始化工程配置,而後一路回車就行

yarn init

那咱們先來設計咱們的項目文件構成angularjs
- libs 存放angular庫
- node_modules 存放工具及第三方庫
- index.html 主界面
- app.css 主樣式文件
- app.js 主js文件
- package.json 配置文件
- yarn.lock yarn鎖定安裝庫的版本
- CommitRules.md 提交規範
- README.md 工程說明
- .gitignore 工程提交忽略文件列表

3、代碼編寫

1. 界面編寫

<!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做爲列表項渲染

2. 腳本邏輯編寫

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

- 這裏使用了'use strict'即嚴格模式，不作詳細解釋，可自信百度
- 先用**angular.module('pockmon-app', [])**聲明模塊，再爲模塊添加控制器AppController
- 中間手擼了一個pokemons數據數組，在AppController中引用，並編寫對象pokemons和remove方法