文档章节

angularjs学习(二)

忘川-hsm
 忘川-hsm
发布于 2017/08/29 21:32
字数 651
阅读 6
收藏 0
点赞 0
评论 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>

© 著作权归作者所有

共有 人打赏支持
忘川-hsm
粉丝 7
博文 80
码字总数 49165
作品 0
深圳
程序员
[Angular Material完全攻略] Day 01 - 开始 & 简介

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

readilen ⋅ 05/21 ⋅ 0

Angular 6.0正式版发布,都有哪些新功能

点击关注异步图书,置顶公众号 每天与你分享IT好书 技术干货 职场知识 在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在...

异步社区 ⋅ 05/08 ⋅ 0

Angular 6正式版发布,都有哪些新功能

在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。除此之外,这次更新还包括框架包(@angu...

code_xzh ⋅ 05/05 ⋅ 0

【前端】—聊聊我认识的Angular

前言 最近接触的项目前端用到了Angular框架,之前略有耳闻,从vue换到Angular,感觉东西差不多,还是要系统学习的,先来了解下。 正文 1、Angular 的发展 AngularJS 是一款来自Google的前端J...

zt15732625878 ⋅ 05/19 ⋅ 0

【Angular】之Angular环境搭建

前言 小编最近在学习angular的内容,万事开头难,完成了开头也便成功了一半。这句话小编在这次的学习实践之旅中,深有体会,下面小编就来讲一讲,angular环境搭建之旅吧! 一、环境搭建 1.下...

m18633778874 ⋅ 05/08 ⋅ 0

[Angular Material完全攻略] Day 02 - 环境设定 & 安装 & Hello World

今天我们将开始正式迈入Angular Material的世界,要学习使用Angular Material打造高品质及高质感的网页,当然要从安装Angular Material套件开始,本篇文章就来介绍基本的Angular Material安装...

readilen ⋅ 05/21 ⋅ 0

JavaScript MVW 框架 - AngularJS

Angular JS (Angular.JS) 是一组用来开发 Web 页面的框架、模板以及数据绑定和丰富 UI 组件。它支持整个开发进程,提供 Web 应用的架构,无需进行手工 DOM 操作。 AngularJS 很小,只有 60K,...

匿名 ⋅ 2011/01/20 ⋅ 44

初学angular 看到网上有angular js 也有angular2 ,到angular官网发现最近版本是6了,那么现在大家说的angular js到底是什么啊?

初学angular 看到网上有angular js 也有angular2 ,到angular官网发现最近版本是6了,那么现在大家说的angular js到底是什么啊? angular2和现在官网的angular6 就是 angular js 只是版本不同...

Jordan裔 ⋅ 05/19 ⋅ 0

AngularJS 的 Material Design 风格框架 - AngularJS Material

AngularJS Material 是 AngularJS 框架的谷歌 Material Design 标准的实现。AngularJS Material 包含一组丰富的、可重用、经过充分测试并可访问的 UI 组件。 针对 Angular 2 或更高版本的实现...

匿名 ⋅ 05/15 ⋅ 0

Angular 6 服务端渲染之 udao 终章

先介绍下小朋友 udao,首先是一个开源项目,代码足够简单,其次是跟随 Angular 大小版本一起成长的项目,会定期更新所有依赖包以及兼容最新版本的写法 Github 地址也贴出来好多次了:github....

orangexc ⋅ 05/10 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

从零开始搭建Risc-v Rocket环境---(1)

为了搭建Rocke环境,我买了一个2T的移动硬盘,安装的ubuntu-16.04 LTS版。没有java8,gcc是5.4.0 joe@joe-Inspiron-7460:~$ java -version程序 'java' 已包含在下列软件包中: * default-...

whoisliang ⋅ 14分钟前 ⋅ 0

大数据学习路线(自己制定的,从零开始学习大数据)

大数据已经火了很久了,一直想了解它学习它结果没时间,过年后终于有时间了,了解了一些资料,结合我自己的情况,初步整理了一个学习路线,有问题的希望大神指点。 学习路线 Linux(shell,高并...

董黎明 ⋅ 20分钟前 ⋅ 0

systemd编写服务

一、开机启动 对于那些支持 Systemd 的软件,安装的时候,会自动在/usr/lib/systemd/system目录添加一个配置文件。 如果你想让该软件开机启动,就执行下面的命令(以httpd.service为例)。 ...

勇敢的飞石 ⋅ 22分钟前 ⋅ 0

mysql 基本sql

CREATE TABLE `BBB_build_info` ( `community_id` varchar(50) NOT NULL COMMENT '小区ID', `layer` int(11) NOT NULL COMMENT '地址层数', `id` int(11) NOT NULL COMMENT '地址id', `full_......

zaolonglei ⋅ 31分钟前 ⋅ 0

安装chrome的vue插件

参看文档:https://www.cnblogs.com/yulingjia/p/7904138.html

xiaoge2016 ⋅ 34分钟前 ⋅ 0

用SQL命令查看Mysql数据库大小

要想知道每个数据库的大小的话,步骤如下: 1、进入information_schema 数据库(存放了其他的数据库的信息) use information_schema; 2、查询所有数据的大小: select concat(round(sum(da...

源哥L ⋅ 56分钟前 ⋅ 0

两个小实验简单介绍@Scope("prototype")

实验一 首先有如下代码(其中@RestController的作用相当于@Controller+@Responsebody,可忽略) @RestController//@Scope("prototype")public class TestController { @RequestMap...

kalnkaya ⋅ 今天 ⋅ 0

php-fpm的pool&php-fpm慢执行日志&open_basedir&php-fpm进程管理

12.21 php-fpm的pool pool是PHP-fpm的资源池,如果多个站点共用一个pool,则可能造成资源池中的资源耗尽,最终访问网站时出现502。 为了解决上述问题,我们可以配置多个pool,不同的站点使用...

影夜Linux ⋅ 今天 ⋅ 0

微服务 WildFly Swarm 管理

Expose Application Metrics and Information 要公开关于我们的微服务的有用信息,我们需要做的就是将监视器模块添加到我们的pom.xml中: 这将使在管理和监视功能得到实现。从监控角度来看,...

woshixin ⋅ 今天 ⋅ 0

java连接 mongo伪集群部署遇到的坑

部署mongo伪集群 #创建mongo数据存放文件地址mkdir -p /usr/local/config1/datamkdir -p /usr/local/config2/data mkdir -p /usr/local/config3/data mkdir -p /usr/local/config1/l......

努力爬坑人 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部