極客學院#9：AngularJS

時間  2021-06-19
標籤 javascript css html 前端 java angularjs apache bootstrap api 跨域 欄目 AngularJS 简体版
原文   原文鏈接

clipboard.png

AngularJS 簡介

clipboard.png

AngularJS優勢：javascript

  • 利用 依賴注入 和 雙向綁定 兩個特性，不用編寫大量代碼來實現複雜功能。css

  • 不用像jQuery操做大量DOM代碼，只須要改變數據模型，極大地提升開發效率html

clipboard.png

<!DOCTYPE html>
<html ng-app="">
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/foundation.min.css"/>
    <title></title>
</head>
<body style="padding:10px;">
<input type="text" ng-model="data.msg"/>
<div ng-show="1==1" class="{{data.msg}}">我是一個{{data.msg}}</div>
</body>
<script src="js/angular.min.js"></script>
</html>

2.開發和調試工具的使用

clipboard.png

3.第一個 AngularJS Web 應用

<!DOCTYPE html>
<html lang="en" ng-app = "todoList">
<head>
    <meta charset="UTF-8">
    <title>todoList</title>
    <link rel = "stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body style="padding: 10px;" ng-controller="TaskCtrl">
    <div class="input-group">
        <input type="text" class="form-control" ng-model="task">
        <span class="input-group-btn">
            <button class = "btn btn-default" ng-click="add()">提交</button>
        </span>
    </div>
    <h4 ng-if="tasks.length>0">任務列表</h4>
    <ul class = "list-group-item">
        <li ng-repeat="item in tasks track by $index" class="list-group-item">{{item}}
            <a ng-click = "tasks.splice($index,1)">刪除</a>
        </li>
    </ul>

</body>
<script src="js/angular.min.js"></script>
<script type="text/javascript">
    angular.module('todoList',[])
            .controller('TaskCtrl',function($scope) {
                $scope.task = "";
                $scope.tasks = [];
                $scope.add = function () {
                    $scope.tasks.push($scope.task);
                }
            })
</script>
</html>

clipboard.png

2.AngularJS進階

clipboard.png

2.1 AngularJS前端MVC的設計與搭建

MVC模式（Model–view–controller）是軟件工程中的一種軟件架構模式，把軟件系統分爲三個基本部分：模型（Model）、視圖（View）和控制器（Controller）。前端

2.2 Binding 指令實現雙向數據綁定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS進階</title>
</head>
<body style="padding: 10px;" ng-app="">
    <div>
        <h1>{{2+2}}</h1>
        <input type="text" ng-model="uname">
        <h1 ng-bind="uname">{{uname}}</h1>
        <h1 ng-clock class="ng-clock">{{uname}}</h1>
        <h1>{{uname}}</h1>
        <div class="{{uname}}">{{'用戶名:'+uname}}</div>
    </div>
</body>
<script src="js/angular.min.js"></script>
</html>

ng-bind：https://docs.angularjs.org/ap...java

（bind 綁定）angularjs

2.3 Controllers 的使用

clipboard.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS 進階</title>
</head>
<body style="padding: 10px" ng-app="app">
    <div ng-controller="FirstCtrl">
        <input type="text" ng-model="msg">
        <h1 ng-bind="msg"></h1>
    </div>
    <div ng-controller="NextCtrl">
        <input type="text" ng-model="msg">
        <h1>{{msg}}</h1>
    </div>
</body>
<script src="js/angular.min.js"></script>
<script src="js/myctrl.js"></script>
</html>

2.4 在$scope中變量和方法的使用

clipboard.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS進階</title>
    <link rel = "stylesheet" type="text/css" href="css/foundation.css">
</head>
<body style="padding: 10px" ng-app="app">
    <div ng-controller="MyCtrl">
        <input type="text" ng-model="user.uname">
        <input type="text" ng-model="user.pwd">
        <!--<h1>{{reverse()}}</h1>-->
        <div class="button" ng-click="login()">登陸</div>
        <div ng-show='errormsg.length>0' class="alert-box">{{errormsg}}</div>
    </div>
</body>
<script src="js/angular.min.js"></script>
<script src="js/myctrl.js"></script>
</html>
angular.module('app',[])
.controller('FirstCtrl',function($scope){
   $scope.msg="hello angular";
})

.controller('NextCtrl',function($scope) {
    $scope.msg="hello angular";
})

.controller('MyCtrl',function($scope) {
    $scope.msg='ddd';

    $scope.errormsg='';

    $scope.reverse=function () {
        return $scope.msg.split("").reverse().join("");
    }

    $scope.login=function () {
        if($scope.user.uname=="admin" && $scope.user.pwd=="123"){
            alert("登錄成功");
        }
        else{
            $scope.errormsg="用戶名或密碼錯誤"
        }
    }
})

3. AngularJS進階-Services與指令的運用

clipboard.png

3.1 自定義Sevices服務

clipboard.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS 進階</title>
    <link rel="stylesheet" href="css/foundation.css">
</head>
<body style="padding: 10px;" ng-app="app">
    <div ng-controller="Myctrl">
        <h1>{{msg}}</h1>
        <h1>{{realname}}</h1>
        <h1>{{http}}</h1>
        <h2>{{data.msg}}</h2>
        <h2>{{uname}}</h2>
    </div>
<script src="js/angular.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
angular.module('app',[])
.value('realname','zhaoliu') // 是能夠改變值的
.constant('http','www.baidu.com')
.factory('Data',function () {
     return{
         msg: '你好啊',
         setMsg:function () {
             this.msg="我很差";
         }
     }
})
    .service('User',function () {
        this.firstname="上官";
        this.lastname="飛燕";
        this.getName=function () {
            return this.firstname+this.lastname;
        }
    })

.controller('Myctrl',function ($scope,realname,http,Data,User) {
    $scope.msg="你好";
    $scope.realname=realname;
    $scope.http=http;
    $scope.data=Data;
    Data.setMsg();
    $scope.uname=User.getName();
});

clipboard.png

3.2 Services的應用

clipboard.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS 進階</title>
</head>
<body style="padding:10px;" ng-app="app">
    <div ng-controller="Fctrl">
        <input type="text" ng-model="data.msg">
        <h2>{{data.msg}}</h2>
    </div>
    <div ng-controller="Sctrl">
        <input type="text" ng-model="data.msg">
        <h2>{{data.msg}}</h2>
    </div>
</body>
<script src="js/angular.min.js"></script>
<script src="js/app.js"></script>
</html>
angular.module('app',[])
.factory('Data',function () {
    return {
        msg:'我來自factory';
        shopcart:['1','2']
    }
}) // 公共容器

.controller('Fctrl',function ($scope,Data) { //下單ctrl
    $scope.data=Data
})

.controller('Sctrl',function ($scope,Data) { // 購物車
    $scope.data=Data
})

clipboard.png

3.3 經常使用指令的使用

clipboard.png

ng-if會把元素從dom中移除，ng-show/hide不會。apache

// ng-bind,{{}},ng-model,ng-show/hide,ng-if
// ng-checked,ng-src,ng-href,ng-class,ng-selected,ng-submit,ng-disabled

angular.module('app',[])
.controller('UserCtrl',function ($scope) {
        $scope.user={
        isShowImg:true,
        showicon: true,
        icon: 'image/logo.jpg',
        uname: '',
        pwd: '',
        zw: '1',
        sex: '0',
        aihao: [1]
    };

    $scope.isChecked=function (n) {
        var isok = false;
        for(var i = 0;i< $scope.user.aihao.lrngth;i++){
            if(n == $scope.user.aihao[i]){
                isok=true;
                break;
            }
        }
        return isok;
    }

    $scope.register=function (u) {
        console.log(u);
    }
})

3.4 經常使用指令ng-repeat的使用

clipboard.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngualrJS</title>
    <link rel = "stylesheet" type="text/css" href="css/foundation.min.css">
</head>
<body ng-app="app" ng-controller="AddressCtrl">
    <div style="padding:10px;font-weight:bold">地址管理</div>
    <ul class="ui-list ui-list-link ui-list-text ul-list-active ui-border-tb">
        <li ng-repeat="a in list" class="ui-border-t">
            <h4>{{$index + 1 + '.' + a.address + $first + ' ' + $last}}</h4>

        </li>
    </ul>
    <br>
    <ul>
        <li ng-repeat="a in list" class="ui-border-t">
        <h4 ng-if="!$last">{{$index+1+'.'+a.address}}</h4>
        </li>
    </ul>
    <br>
    <ul>
        <li ng-repeat="a in list" class="ui-border-t" ng-if="!$last">
            <h4>{{$index + 1 + '.' + a.address}}</h4>
        </li>
    </ul>
    <br>
    <ul class="ui-list ui-list-link ui-list-text ul-list-active ui-border-tb">
        <li ng-repeat="a in list" ng-class="{'selected':$first}">
            <h4>{{$index + 1 + '.' + a.address}}</h4>

        </li>
    </ul>
</body>
<script src="js/angular.min.js"></script>
<script src="js/app.js"></script>
</html>
angular.module('app',[])
.controller('AddressCtrl',function ($scope) {
    $scope.list = [
        {id:1,address:'蓮湖小區14棟2層'},
        {id:2,address:'建設小區14棟2層'},
        {id:3,address:'興化路89號'},
        {id:4,address:'北京鳥巢好遠的地方'}
    ];
})

4.AngularJS內置服務$http的使用

clipboard.png

4.1 使用$http查詢MySQL數據

angular.module('app',[])
.config(function ($httpProvider) {
        
})
.controller('MyCtrl',function ($scope,$http) {
    $http.get('http://127.0.0.0.1:80/user/getUsers')
        .success(function (resp) {
            console.log(resp);
        })
})

4.2 $http實現對數據的增刪改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS 進階$http</title>
    <link rel="stylesheet" href="css/foundation.min.css">
    <style type="text/css">
        html,body{font-size: 14px;}
    </style>
</head>
<body style="padding: 10px;" ng-app="app">
    <div ng-controller="Myctrl"></div>
    <input type="text" ng-model="id">
    <input type="text" ng-model="name">
    <button class="button" ng-click="adduser()">添加</button>
    <button class="button" ng-click="deluser()">刪除</button>
</body>
<script src="js/angular.min.js"></script>
<script src="js/app.js"></script>
</html>
angular.module('app',[])
.config(function ($httpProvider) {
        
})
.controller('MyCtrl',function ($scope,$http) {
    $scope.id = "";
    $scope.name="";
    $scope.adduser = function(){
        $http.get('http://127.0.0.0.1:80/user/getUsers',{id:$scope.id,name:$scope.name})
            .success(function (resp) {
                if (resp.success) {
                    alert("添加成功");
                }
            })
    }
    $scope.deluser=function () {
        $http.post('http://127.0.0.1:80/user/delUser',{id:$scope.id})
            .success(function () {
                if(resp.success){
                    alert('刪除成功');
                }
            })
    }
})
// UserController.java

import java.util.List;
import com.jfinal.core.Controller;
import com.model.User;

public class UserController extends Controller{
    public void getUser(){
        List<User> Users = User.dao.find("select * from t_user");
        renderJson(users);
    }

    public void addusers(){
        String name = getPara("name");
        User user = new User();
        boolean isok = user.set("name",name).save();
        renderJson("success",isok);
    }

    public void delUser(){
        String id = getPara("id");
        boolean isok = User.dao.deleteById(id);
        renderJson("success",isok); 
    }
}

4.3 用戶角色權限實例

clipboard.png

6.AngularJS之移動APP開發

clipboard.png

6.1 Ionic簡介

英文文檔：http://ionicframework.com/docs/bootstrap

中文網站 http://www.ionic.wang/api

6.2 Cordova簡介

clipboard.png

https://cordova.apache.org/
http://ngcordova.com/跨域

6.3 開發環境的搭建

clipboard.png

http://ionicons.com/

瀏覽器跨域 http://www.cnblogs.com/rainma...

6.4 聯繫人APP的開發

clipboard.png

clipboard.png

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程