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

阿新 • • 發佈：2018-04-21

style ppc href rip initial 官方庫從零開始 table 技術分享

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

最近項目要改寫管理系統，所以用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);
        }
    }
})();

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

此時工程已經基本完成，可以雙擊index.html，在瀏覽器上應該就能夠看到如下界面了~如果不行的話可以參考一下源碼的第一次提交

擴展學習：

用現在的方法本地運行，說實話有點原始，如果我要分享給盆友看怎麽辦，難道整個源代碼給他運行？當然不，更優雅的解決方案http-server了解一下.
技術分享圖片

只要在命令進入項目,輸入yarn add http-server --dev，完成安裝後輸入http-server並回車，就可以簡單開啟本地服務器，這個時候你的盆友就可以超方便的根據地址+端口訪問剛剛的作品啦（當然要讓盆友先連上和電腦相同網段的WiFi啦）
技術分享圖片

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

style ppc href rip initial 官方庫從零開始 table 技術分享開坑，一直喜歡口袋妖怪，想著能寫點有關的程序。最近項目要改寫管理系統，所以用Angular1.x搭建一個口袋妖怪管理系統試試。鞏固Ng1.x的知識+學習庫的用法，然後算是記錄一

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