<html class=" js cssanimations csstransitions" ng-app="phonecatApp" >

    <head>

        <title>{{title}}</title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

        <link href="/scripts/service/css/font.css" rel="stylesheet" type="text/css">

        <link href="/scripts/service/css/style.css" rel="stylesheet" type="text/css" media="all">

        <link rel="stylesheet" type="text/css" href="/scripts/service/css/magnific-popup.css">

    </head>

<body ng-controller="controller1">
                            <div class="cart">

                                <a class="popup-with-zoom-anim" href ng-click="callNotify('message');">NOTIFY</a>

                            </div>
  <!--<div my-Directive></div>

    {{title}}-->

        <script type="text/javascript" src="/Scripts/angular.min.js"></script>

        <script type="text/javascript">

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

            phonecatApp.controller('controller1', ['$scope', 'notify', function ($scope,notify) {

                $scope.title = "Compare";

                $scope.click1 = function () { alert('abc'); };

                $scope.callNotify = function (msg) {

                    notify(msg);

                };

                $scope.phones = [

                  {

                      'name': 'Nexus S',

                      'snippet': 'Fast just got faster with Nexus S.'

                  },

                  {

                      'name': 'Motorola XOOM™ with Wi-Fi',

                      'snippet': 'The Next, Next Generation tablet.'

                  },

                  {

                      'name': 'MOTOROLA XOOM™',

                      'snippet': 'The Next, Next Generation tablet.'

                  }

                ];

            }]);

            phonecatApp.directive('myDirective', function () {

                return {

                    template: 'Name: {{phones[0].name}}'

                };

            });

            phonecatApp.factory('notify', ['$window', function (win) {

                return function (msg) {

                    console.log('function in service ' + msg);

                    return false;

                };

            }]);

        </script>

angular service/directive的更多相关文章

  1. Angular Service入门

    1.Angular内置service Angular为了方便开发者开发,本身提供了非常多的内置服务.可以通过https://docs.angularjs.org/api/ng/service查看Ang ...

  2. angular service provider

    关于  angular service factory  provider 方面有很多,我也来写一篇加深下印象 provider 是一切方法的基础,所以功能也最强,provider 用来定义一个可以被 ...

  3. [Angular 2] Directive intro and exportAs

    First, What is directive, what is the difference between component and directive. For my understandi ...

  4. 关于angular 自定义directive

    关于angular 自定义directive的小结 首先我们创建一个名为"expander"的自定义directive指令: angular.module("myApp& ...

  5. Angular service, 服务

      早上开车上班, 发现车快没油了, 于是拐进加油站. 有一辆出租车也在加油..   Angular service在一个应用里是以单例形式存在的. 这个单例的实例是由service factory( ...

  6. AngularJS学习之 ngTable 翻页 功能以及利用angular service准备测试数据

    1.官网链接  https://github.com/esvit/ng-table#4.0.0 2.安装ngTable后,一定要记得先注册到自己的项目 .module('pttengApp', [ ' ...

  7. [Angular] Custom directive Form validator

    Create a directive to check no special characters allowed: import {Directive, forwardRef} from '@ang ...

  8. [Angular] Test Directive

    directive: import { Directive, HostListener, HostBinding, ElementRef } from '@angular/core'; @Direct ...

  9. [Angular] Export directive functionalities by using 'exportAs'

    Directive ables to change component behaives and lookings. Directive can also export some APIs which ...

随机推荐

  1. [改善Java代码]慎用动态编译

    建议17: 慎用动态编译 //=========这篇博文暂时理解不透......... 动态编译一直是Java的梦想,从Java 6版本它开始支持动态编译了,可以在运行期直接编译.java文件,执行. ...

  2. 关于Eclipse插件之IWorkbench IWorkbenchWindow IWorkbenchPage |WorkbenchPart......等的总结

    1..IWorkbench: workbench是eclipse用户界面中最底层的对象,它建立在Display之上,包含一个或多个IWorkbenchWindow,用于向终端用户呈现信息 当你的wor ...

  3. poj 1469 二分图最大匹配

    就是最简单的最大匹配,没的说 #include<iostream> #include<cstdio> #include<cstring> #include<a ...

  4. Angular2 从0到1 （二）

    第一节:Angular2 从0到1 (一)第三节:Angular2 从0到1 (三)第四节:Angular2 从0到1 (四) 作者:王芃 wpcfan@gmail.com 第二节:用Form表单做一 ...

  5. Win7 32bit(x86)/64bit(x64) 完整安装版(非GHOST版本)

    Windows7 32bit 旗舰iso格式完整安装镜像 百度云盘:http://pan.baidu.com/s/1bpjLPs Windows7 64bit 旗舰iso格式完整安装镜像 百度云盘:h ...

  6. HTML5与CSS3基础教程第八版学习笔记11~15章

    第十一章,用CSS进行布局 开始布局注意事项 1.内容与显示分离 2.布局方法:固定宽度和响应式布局 固定宽度,整个页面和每一栏都有基于像素的宽度 响应式布局也称为流式页面,使用百分数定义宽度 3.浏 ...

  7. ActiveMQ(5.10.0) - Configuring the Simple Authentication Plug-in

    The easiest way to secure the broker is through the use of authentication credentials placed directl ...

  8. WM_NCCALCSIZE消息处理详解

    [前言]指定应用程序的标题高度和边框的宽度的方法有很多种.其中最普遍的方法有下面的两种:第一种:创建没有标题栏应用程序,在客户区让出一部分空间用一幅图片画一个标题栏,让人“误认为”是标题栏.第二种:处 ...

  9. ajax-典型应用-验证用户名

    用servlet实现后台:

  10. Android之帧动画2

    创建自定义对话框: // 对话框构建器 Builder builder = new AlertDialog.Builder(this); // 创建出一个空的对话框 final AlertDialog ...