文档章节

angularjs学习(二)

忘川-hsm
 忘川-hsm
发布于 2017/08/29 21:32
字数 651
阅读 8
收藏 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
博文 84
码字总数 50675
作品 0
深圳
程序员
私信 提问
《AngularJS学习整理》系列分享专栏

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

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

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

readilen
2018/05/21
0
0
高手问答第 143 期 — 重新认识前端开发利器 Angular

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

局长
2017/02/27
6.8K
54
angular.js 1.3.17/1.4.2 发布

其中:1.3.17 更新内容如下: Bug Fixes +- **$browser:** prevent infinite digest if changing hash when there is no hashPrefix + ([61a3fb67](https://github.com/angular/angular.js/......

oschina
2015/07/07
2.6K
9
学习 AngularJS (一)

进一步看入 kityminder-editor 部分了, 打开示例文件 index.html, 开头就是引入三个著名 js 开源库: jQuery.js, bootstrap.js, angular.js 这意味着我又得学习了解这些库都是干什么的了. 略知...

刘军兴
2015/12/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

mysql免安装版,服务无法启动没有抱任何错误

1.解压 2.新建my.ini [mysqld]# Remove leading # and set to the amount of RAM for the most important data# cache in MySQL. Start at 70% of total RAM for dedicated server, e......

榴莲黑芝麻糊
33分钟前
0
0
Qt编写安防视频监控系统3-通道交换

一、前言 最开始写通道交换的功能的时候,走了很多弯路,比如最开始用最初级的办法,触发交换的时候,先关闭视频,然后设置新的url重新打开视频,这样处理非常低级而且耗内存还卡还很慢,毕竟...

飞扬青云
34分钟前
0
0
如何远程调试部署在CloudFoundry平台上的nodejs应用

网络上关于如何本地调试nodejs应用的教程已经很多了,工具有Chrome开发者工具,Visual Studio Code,和nodejs周边的一些小工具等等。 在实际情况中,我们可能遇到本地运行良好,但是部署到C...

JerryWang_SAP
55分钟前
5
0
微信扫码访问网站调用默认浏览器打开如何实现?

我们在微信内分享链接或二维码的时候,我们会发现我们的网站是可以在浏览器里正常打开的,但就是不能在微信里打开,提示 “ 已停止访问该网页 ”,无论是聊天框也一样。说是系统检测到您的网...

明尼苏达哈士奇
今天
3
0
一份Java程序员进阶架构师的秘籍,你离架构师还差多远

一、如何定义架构师 Java架构师,首先要是一个Java程序员,熟练使用各种框架,并知道它们实现的原理。jvm虚拟机原理、调优,懂得jvm能让你写出性能更好的代码;池技术,什么对象池,怎么解决并...

我最喜欢三大框架
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部