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>