AngularJSの概要
AngularJSの利点:

は、複雑な機能を実現するために大量のコードを記述することなく、依存注入と双方向バインドの2つの特性を利用する.

jQueryのように大量のDOMコードを操作する必要はなく、データモデルを変更するだけで開発効率が大幅に向上する

.

    
    
    
    


    

        
        
              
        
    
    
    
    

        
{{item}}
              
        
    




    angular.module('todoList',[])
            .controller('TaskCtrl',function($scope) {
                $scope.task = "";
                $scope.tasks = [];
                $scope.add = function () {
                    $scope.tasks.push($scope.task);
                }
            })

2.AngularJS昇格
2.1 AngularJSフロントエンドMVCの設計と構築
MVCモード(Model–view–controller)はソフトウェアエンジニアリングにおけるソフトウェアアーキテクチャモードであり、ソフトウェアシステムをモデル(Model)、ビュー(View)、コントローラの3つの基本部分に分ける.
2.2 Binding命令による双方向データバインディングの実現

    
    


    

        
{{2+2}}
        
        
{{uname}}
        
{{uname}}
        
{{uname}}
        
{{'   :'+uname}}
    

ng-bind:https://docs.angularjs.org/ap...
(bindバインド)
2.3 Controllersの

    
    


    

        
        

    
    

        
        
{{msg}}
    

2.4$scopeでの とメソッドの

    
    
    


    

        
        
        
        
  
        
{{errormsg}}
    

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と の
3.1カスタムサービス

    
    
    


    

        
{{msg}}
        
{{realname}}
        
{{http}}
        
{{data.msg}}
        
{{uname}}
    

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

3.2 Servicesの

    
    


    

        
        
{{data.msg}}
    
    

        
        
{{data.msg}}
    

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

3.3 の 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の

    
    
    


    
    
    

        

            
{{$index + 1 + '.' + a.address + $first + ' ' + $last}}

        
    
    

    

        

        
{{$index+1+'.'+a.address}}
        
    
    

    

        

            
{{$index + 1 + '.' + a.address}}
        
    
    

    

        

            
{{$index + 1 + '.' + a.address}}

        
    

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の
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データの を

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 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ユーザーロール の
6.AngularJSのモバイルアプリ
6.1 Ionic
ドキュメント:http://ionicframework.com/docs/
サイトhttp://www.ionic.wang/
6.2 Cordovaの
https://cordova.apache.org/http://ngcordova.com/
6.3 の
http://ionicons.com/
ブラウザのドメイン http://www.cnblogs.com/rainma...
6.4 アプリの