angularjs學習（二）

時間 2019-12-01
原文原文鏈接
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>angularjs</title>
		<script type="text/javascript" src="js/angular.min.js"></script>
	</head>
	<body ng-app="myapp" ng-controller="myCon">
        
        <mydir></mydir>
        <div>{{hex}}</div>
        <div>{{k.id}}</div>
        <div>{{name}}</div>
        <my-Dir></my-Dir>
        <table >
            <h1>表格</h1></a>
            <tr>
                <td>id</td>
                <td>&nbsp;&nbsp;內容glary</td>
                <td>&nbsp;&nbsp;內容mark</td>
                <td>&nbsp;&nbsp;內容name</td>
                <td>&nbsp;&nbsp;內容sex</td>
            </tr>
            <tr ng-repeat="x in data">
                <td>{{x.id}}</td>
                <td>{{x.glary}}</td>
                <td>{{x.mark}}</td>
                <td>{{x.name}}</td>
                <td>{{x.sex}}</td>
            </tr>
        </table>
        <script>
            var app=angular.module("myapp",[]);
            //工廠---這裏支持跨域請求 ---來自  博客園老牛大講堂
            app.factory("myFac",function($http){
                function tongxin(){//這個方法會返回一個對象
                    return $http({
                        method:"post",
                        url:"http://127.0.0.1:8080/A/B",
                        data:{id:"1",name:"博客園老牛大講堂"},
                        headers:{"Content-Type":"application/x-www-form-urlencoded"},
                        transformRequest:function(obj){
                            var str=[];
                            for(var p in obj){
                                str.push(encodeURIComponent(p)+"="+encodeURIComponent(obj[p]));
                            }
                            return str.join("&");
                        },
                        responseType:"text"
                    });
                }
                return{
                    getter:tongxin//返回這個方法
                };
            });
            app.directive("myDir", function() {

                return {
                    restrict: "AE",
                    replace: true,
                    template: '<button ng-click="dianji()">點擊</button>',
                    link: function(scope, elem, attr) {
                        scope.dianji=function(){//從新爲data數據賦值，由於是雙向綁定，因此當爲data賦值，頁面內容就會發生變化。
                            scope.data = [{
                                "glary": "a",
                                "id": 1,
                                "mark": "a",
                                "name": "a",
                                "sex": "a"
                            }, {
                                "glary": "b",
                                "id": 2,
                                "mark": "b",
                                "name": "b",
                                "sex": "b"
                            }];
                        }
                    }
                }
            });
            
            //工廠層   主要是爲了編寫初始數據----博客園老牛大講堂
            app.factory("myFac2", function() {

                function getmodo() {//爲初始頁面進行賦值，方便頁面的測試

                    return [{
                        "glary": "a",
                        "id": 1,
                        "mark": "1",
                        "name": "1",
                        "sex": "1"
                    }, {
                        "glary": "v",
                        "id": 2,
                        "mark": "1",
                        "name": "1",
                        "sex": "1"
                    }, {
                        "glary": "s",
                        "id": 3,
                        "mark": "1",
                        "name": "1",
                        "sex": "1"
                    }, {
                        "glary": "df",
                        "id": 4,
                        "mark": "1",
                        "name": "1",
                        "sex": "1"
                    }, {
                        "glary": "h",
                        "id": 5,
                        "mark": "1",
                        "name": "1",
                        "sex": "1"
                    }, {
                        "glary": "k",
                        "id": 6,
                        "mark": "1",
                        "name": "1",
                        "sex": "1"
                    }, {
                        "glary": "v",
                        "id": 7,
                        "mark": "1",
                        "name": "1",
                        "sex": "1"
                    }, {
                        "glary": "x",
                        "id": 8,
                        "mark": "1",
                        "name": "1",
                        "sex": "1"
                    }, {
                        "glary": "n",
                        "id": 9,
                        "mark": "1",
                        "name": "1",
                        "sex": "1"
                    }, {
                        "glary": "m",
                        "id": 10,
                        "mark": "1",
                        "name": "1",
                        "sex": "1"
                    }];
                }

                return {
                    getmodo: getmodo
                };
            });
            //指令---來自  博客園老牛大講堂
            app.directive("mydir",function(){//這裏菜鳥有介紹
                return {
                    restrict:"AE",
                    replace:true,
                    template:
                        '<div>這裏是博客園老牛大講堂</div>',
                    link:function(scope,elem,attr){
                        console.log("這裏是處理相關的按鈕，事件操做的");
                    }
                }
            });
            
            
            //建立服務----單例模式，只進行一次new
            app.service("myser",function(){
                this.firstServer=function(){
                    return "第一個服務";
                }
                this.erServer=function(){
                    return "第二個服務";
                }
            });
            
            
            //一些值，值能夠進行改變---來自  博客園老牛大講堂
            app.value("myVal",{
                id:1,
                name:"名字"
            });
            
            //provider提供
            app.provider("myPro",function(){
                var f=function(name){
                    return "你好"+name;
                };
                this.$get=function(){//必須有
                    return f;
                };
            });
            
            //控制器---來自  博客園老牛大講堂   
　　　　　　　　
　　　　　　//　
            app.controller("myCon",function($scope,myFac,myFac2,myser,myVal,myPro){//引入各個模塊
                
                //controller調用factory方法
                myFac.getter().success(function(data){
                    console.log(data);//輸出數據
                });
                //controller調用Server方法
                 $scope.hex = myser.firstServer();
                //controller調用value裏面的信息
                $scope.k=myVal;
                $scope.data = myFac2.getmodo();
                //controller調用provider方法
                $scope.name=myPro("張三");
                
            });
            
        </script>
    </body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。