极客学院#9：AngularJS

头像
黄奋斗
    阅读 13 分钟

    clipboard.png

    AngularJS 简介

    clipboard.png

    AngularJS优点：

    • 利用 依赖注入 和 双向绑定 两个特性，不用编写大量代码来实现复杂功能。

    • 不用像jQuery操作大量DOM代码，只需要改变数据模型，极大地提高开发效率

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

    （bind 绑定）

    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不会。

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

    中文网站 http://www.ionic.wang/

    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

    angularjs
    黄奋斗
    163 声望19 粉丝
    « 上一篇
    Canvas学习笔记
    下一篇 »
    极客学院#1：走进前端工程师的世界

    引用和评论

    推荐阅读
    头像
    JavaScript数据结构描述

    黄奋斗阅读 1.9k

    0 条评论
    得票最新