文档章节

angularjs学习(二)

忘川-hsm
 忘川-hsm
发布于 2017/08/29 21:32
字数 651
阅读 7
收藏 0

继续深入学习菜鸟教程 代码地址

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

© 著作权归作者所有

共有 人打赏支持
上一篇: 1232123
下一篇: redis初步使用
忘川-hsm
粉丝 8
博文 83
码字总数 50420
作品 0
深圳
程序员
私信 提问
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
11/09
0
0
[Angular Material完全攻略] Day 01 - 开始 & 简介

转载 从Angular第2版正式release后,根据全球最大工程师讨论区StackOverflow的统计,从2016开始的Angular讨论度就不断窜升,甚至超越了React,直到了2017年,甚至摆脱了前一代Angularjs的阴影...

readilen
05/21
0
0
Angular中ui-grid的使用详解

Angular中ui-grid的使用   在项目开发的过程中,产品经理往往会提出各种需求,以提高用户体验。最近,项目中用到的表格特别多,而且表格的列数和行数也超多。为了让用户浏览更爽,产品经理...

半指温柔乐
08/05
0
0
AngularJS 中文资料+工具+库+Demo 大搜集

中文学习资料: 中文资料且成系统的就这么多,优酷上有个中文视频。 http://www.cnblogs.com/lcllao/archive/2012/10/18/2728787.html 翻译的官方的Guide http://www.ituring.com.cn/miniboo...

liaolzy2
2015/05/31
0
0
高手问答第 143 期 — 重新认识前端开发利器 Angular

OSCHINA 本期高手问答(2017 年 2 月 28 日 — 3 月 6 日)我们请来了 @大漠穷秋 为大家解答 Angular 相关的问题。 @大漠穷秋 章小飞,Google Angular developers PM,目前负责 Angular 在国...

局长
2017/02/27
6.8K
54

没有更多内容

加载失败,请刷新页面

加载更多

http协议请求头的意义

GET /day31_Http_306/index.jsp HTTP/1.1: GET请求,请求服务器路径为/hello/index.jsp,协议为1.1 请求头 1.Host:localhost:请求的主机名为localhost2.User-Agent:Mozilla/5.0(Windows NT......

潇潇程序缘
23分钟前
4
0
Netty 简单服务器 (三)

经过对Netty的基础认识,设计模型的初步了解,来写个测试,试试手感 上篇也说到官方推荐我们使用主从线程池模型,那就选择这个模型进行操作 需要操作的步骤: 需要构建两个主从线程组 写一个服务器...

_大侠__
34分钟前
5
0
day02:管道符、shell及环境变量

1、管道符:"|" 用于将前一个指令的输出作为后一个指令的输入,且管道符后面跟的是命令(针对文档的操作):cat less head tail grep cut sort wc uniq tee tr split sed awk等) [root@localho...

芬野de博客
44分钟前
11
0
Kubernetes系列——Kubernetes 组件、对象(二)

一、Kubernetes 组件 介绍了Kubernetes集群所需的各种二进制组件。 Master 组件 Master组件提供集群的管理控制中心。Master组件可以在集群中任何节点上运行。但是为了简单起见,通常在一...

吴伟祥
54分钟前
15
0
Flink-数据流编程模型

1、抽象等级 Flink提供了不同级别的抽象来开发流/批处理应用程序。 1) 低层级的抽象 最低层次的抽象仅仅提供有状态流。它通过Process函数嵌入到DataStream API中。它允许用户自由地处理来自一...

liwei2000
今天
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部