<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body ng-app="myApp"  ng-controller="myCtrl">

    <div >

        <p>名字 : <input type="text" ng-model="firstName" ng-bind="firstName"></p>

        <p>名字 : <input type="text" ng-model="lastName" ng-bind="lastName"></p>

        <p>输入过滤 : <input type="text" ng-model="text" ng-bind="text"></p>

        <p>当前页面地址 : <span>{{pageUrl}}</span></p>

        <p>Get请求返回 : <span>{{response}}</span></p>

        <span>延迟执行:{{timeOutState}}</span>

        <span>当前时间:{{dateTime}}</span>

        <span>{{(firstName|lowercase)+" "+lastName}}</span>

        <span>{{5|currency}} </span>

    </div>

    <ul>

        <li ng-repeat="x in names |filter: text |orderBy:country">

            {{x.name+','+(x.country|reverse)}}

        </li>

    </ul>

    <script>

       //angular使用内置服务展示 服务对象需要传递参数接收 只要参数名称对的上就行

        var app = angular.module('myApp', []);

        app.controller('myCtrl', function ($scope, $location, $http, $timeout, $interval) {

            //执行一个请求 回调在then中执行 延续了jq风格将异步操作线性编写完成

            $http.get("Handler1.ashx").then(function (response) {

                $scope.response = response.data;

            });

            $scope.firstName = "firstName";

            $scope.lastName = "lastName";

            $scope.names = [

                { 'name': 's1', 'country': 'china' },

                { 'name': 's2', 'country': 'america' },

                { 'name': 5, 'country': 'america' },

            ];

            //$location服务使用 获取当前页面的完整url

            $scope.pageUrl = $location.absUrl();

            //执行一个延迟执行函数

            $timeout(function () {

                $scope.timeOutState = '执行成功';

            }, 3000);

            //执行一个定时器

            $interval(function () {

                $scope.timeOutState = (new Date());

            }, 1000)

        });

        //自定义一个过滤器反转字符顺序的过滤器

        app.filter('reverse', function () {

            return function (text) {

                return text.split("").reverse().join("");

            }

        })

    </script>

</body>

</html>

　　

angularJS使用内置服务的更多相关文章

  1. AngularJS复习-----内置过滤器和内置服务

    AngularJS中的内置服务(共30多个): $http 发送http请求,主要用于进行异步数据请求的功能实现,这个服务主要封装了XMLHttpRequest对象和JSONP数据访问模式来完成远程请 ...

  2. Angular 基本内置服务和筛选器

    AngularJS中的内置服务(共30多个): $http 发送http请求,主要用于进行异步数据请求的功能实现,这个服务主要封装了XMLHttpRequest对象和JSONP数据访问模式来完成远程请 ...

  3. Hive基础（4）---Hive的内置服务

    版权声明:<—— 本文为作者呕心沥血打造,若要转载,请注明出处@http://blog.csdn.net/gamer_gyt <——   目录(?)[+]   一:Hive的几种内置服务 ...

  4. Hive 学习笔记（启动方式，内置服务）

    一.Hive介绍 Hive是基于Hadoop的一个数据仓库,Hive能够将SQL语句转化为MapReduce任务进行运行. Hive架构图分为以下四部分. 1.用户接口 Hive有三个用户接口: 命令 ...

  5. 学习angularjs的内置API函数

    angularjs的内置API函数有很多,如isString()判断给定的对象是否为字符串,如果是返回 true,反之返回false:isNumber()判断给定的对象是否为数字,如果是返回 true ...

  6. 夺命雷公狗—angularjs—15—内置封装好的计时器$interval和$timeout

    这里其实和js源生的效果是一样的,但是源生的在angularjs里面不能直接正常执行代码如下所示: <!DOCTYPE html> <html lang="en" ...

  7. ASP.NET Core MVC内置服务的使用

    ASP.NET Core中的依赖注入可以说是无处不在,其通过创建一个ServiceCollection对象并将服务注册信息以ServiceDescriptor对象的形式添加在其中,其次针对Servic ...

  8. Angular——内置服务

    $location <!DOCTYPE html> <html lang="en" ng-app="App"> <head> ...

  9. 前端MVC学习总结（三）——AngularJS服务、路由、内置API、jQueryLite

    一.服务 AngularJS功能最基本的组件之一是服务(Service).服务为你的应用提供基于任务的功能.服务可以被视为重复使用的执行一个或多个相关任务的代码块. AngularJS服务是单例对象, ...

随机推荐

  1. 【构造】【贪心】hdu6090 Rikka with Graph

    给你n个点,让你连m条边,使得任意两两点对之间的最短路的和最小(两点若不可达,最短路记作n). 初始时ans=n*n*(n-1). 先尽量连成菊花图,每连一次让答案减小2*((n-2)*(i-1)+( ...

  2. SOCKET类型定义及应用

    读代码时看到此处,摘记下来. 流套接字(SOCK_STREAM):流套接字用于提供面向连接.可靠的数据传输服务.该服务将保证数据能够实现无差错.无重复发送,并按顺序接收.流套接字之所以能够实现可靠的数 ...

  3. js作用域对象与运用技巧

    1. JS作用域 1.1 全局作用域和局部作用域 函数外面声明的就是 全局作用域 函数内是局部作用域 全局变量可以直接在函数内修改和使用 变量,使用var是声明,没有var是使用变量. 如果在函数内使 ...

  4. 十二. 网络与数据库编程1.IP地址和InetAddress类

    Java语言的优势之一是Java程序能访问网络资源.Java提供一系列的类支持Java程序访问网络资源. TCP/IP协议和IP地址 为了进行网络通信,通信双方必须遵守通信协议.目前最广泛使用的是TC ...

  5. 102.愤怒的LJF

    2841 愤怒的LJF  时间限制: 1 s  空间限制: 32000 KB  题目等级 : 黄金 Gold 题解 查看运行结果 题目描述 Description LJF发现ZPC的积分比他高,他很愤 ...

  6. MFC绘制棋盘格

    (1)新建立一个MFC空白的基于视类的工程 (2)在View类中重写OnPaint消息 void CMy005View::OnPaint() { CPaintDC dc(this); // devic ...

  7. countdownlatch用法

    public void await() throws InterruptedException { };   //调用await()方法的线程会被挂起,它会等待直到count值为0才继续执行 publ ...

  8. StatefulSet在ZooKeeper和Kafka的实践

    K8s的版本是1.7.6 采用nfs的nas存储模式 NFS的问题 建立zk集群的时候总是发现myid绑定一个id,先describe pod确认每个绑定不同的pvc,然后就确认是pv创建的问题,pv ...

  9. React个人学习笔记

    元素渲染 通过 ReactDOM.render() 方法渲染页面, 可以使用 ES6 class 来定义一个组件: 如何解析HTMl里面的空格: 1. 使用空格的 unicod 编码 : \u0020 ...

  10. 剖析ASP.NET Core（Part 3）- UseMvc（译）

    原文:https://www.stevejgordon.co.uk/asp-net-core-anatomy-part-3-addmvc 发布于:2017年4月环境:ASP.NET Core 1.1 ...