GVKun编程网logo

AngularJs 指令详解及示例代码（angularjs常用指令）

14

在本文中，我们将详细介绍AngularJs指令详解及示例代码的各个方面，并为您提供关于angularjs常用指令的相关解答，同时，我们也将为您带来关于AngularJsUsing$location详解

在本文中，我们将详细介绍AngularJs 指令详解及示例代码的各个方面，并为您提供关于angularjs常用指令的相关解答，同时，我们也将为您带来关于AngularJs Using $location详解及示例代码、AngularJS 自定义指令详解及实例代码、AngularJS Ajax详解及示例代码、AngularJs bootstrap详解及示例代码的有用知识。

本文目录一览：

AngularJs 指令详解及示例代码（angularjs常用指令）

AngularJs 指令详解及示例代码（angularjs常用指令）

对于指令，可以把它简单的理解成在特定DOM元素上运行的函数，指令可以扩展这个元素的功能。

首先来看个完整的参数示例再来详细的介绍各个参数的作用及用法：

angular.module(''myApp'', []) 
.directive(''myDirective'', function() { 
  return { 
    restrict: String, 
    priority: Number, 
    terminal: Boolean, 
    template: String or Template Function: 
  function(tElement, tAttrs) {...}, 
  templateUrl: String, 
  replace: Boolean or String, 
  scope: Boolean or Object, 
  transclude: Boolean, 
  controller: String or 
  function(scope, element, attrs, transclude, otherInjectables) { ... }, 
  controllerAs: String, 
  require: String, 
  link: function(scope, iElement, iAttrs) { ... }, 
  compile: // 返回一个对象或连接函数，如下所示：
  function(tElement, tAttrs, transclude) { 
    return { 
      pre: function(scope, iElement, iAttrs, controller) { ... }, 
      post: function(scope, iElement, iAttrs, controller) { ... } 
      } 
    return function postLink(...) { ... } 
    } 
  }; 
 });

restrict[string]

restrict是一个可选的参数。用于指定该指令在DOM中以何种形式被声明。默认值是A，即以属性的形式来进行声明。
可选值如下：

E（元素）

<my-directive></my-directive>

A（属性，默认值）

<div my-directive="expression"></div>

C（类名）

<div></div>

M（注释）

<--directive:my-directive expression-->

一般考虑到浏览器的兼容性，强烈建议使用默认的属性就可以即即以属性的形式来进行声明。最后一种方式建议再不要求逼格指数的时候千万不要用。

Code:

 angular.module(''app'',[])
  .directive(''myDirective'', function () {
      return { 
        restrict: ''E'', 
        template: ''<a href="http://www.baidu.com">百度</a>'' 
      };
    })
HtmlCode:
 <my-directive></my-directive>

 效果：

priority[int]

大多数指令会忽略这个参数，使用默认值0，但也有些场景设置高优先级是非常重要甚至是必须的。例如，ngRepeat将这个参数设置为1000，这样就可以保证在同一元素上，它总是在其他指令之前被调用。

terminal[bool]

这个参数用来停止运行当前元素上比本指令优先级低的指令。但同当前指令优先级相同的指令还是会被执行。
例如：ngIf的优先级略高于ngView（它们操控的实际就是terminal参数），如果ngIf的表达式值为true，ngView就可以被正常执行，但如果ngIf表达式的值为false，由于ngView的优先级较低就不会被执行。

template[string or function]

template参数是可选的，必须被设置为以下两种形式之一：

 一段HTML文本；

一个可以接受两个参数的函数，参数为tElement和tAttrs，并返回一个代表模板的字符串。tElement和tAttrs中的t代表template，是相对于instance的。

首先演示下第二种用法：

angular.module(''app'',[])
  .directive(''myDirective'', function () {
      return { 
        restrict: ''EAC'', 
        template: function (elem, attr) {
          return "<a href=''" + attr.value + "''>" + attr.text + "</a>";
        }
    };
  })

HtmlCode:（效果同上，不做演示了）

<my-directive value="http://www.baidu.com" text="百度"></my-directive>
    <div my-directive
       value="http://www.baidu.com"
       text="百度"></div>

templateUrl[string or function]

templateUrl是可选的参数，可以是以下类型：

一个代表外部HTML文件路径的字符串；

一个可以接受两个参数的函数，参数为tElement和tAttrs，并返回一个外部HTML文件路径的字符串。

无论哪种方式，模板的URL都将通过ng内置的安全层，特别是$getTrustedResourceUrl，这样可以保护模板不会被不信任的源加载。 默认情况下，调用指令时会在后台通过Ajax来请求HTML模板文件。加载大量的模板将严重拖慢一个客户端应用的速度。为了避免延迟，可以在部署应用之前对HTML模板进行缓存。

Code:

 angular.module(''app'',[])
  .directive(''myDirective'', function () {
      return { 
        restrict: ''AEC'', 
        templateUrl: function (elem, attr) {
          return attr.value + ".html"; //当然这里我们可以直接指定路径，同时在模板中可以包含表达式
        }
    };
  })

replace[bool]

replace是一个可选参数，如果设置了这个参数，值必须为true，因为默认值为false。默认值意味着模板会被当作子元素插入到调用此指令的元素内部,

例如上面的示例默认值情况下，生成的html代码如下：

<my-directive value="http://www.baidu.com" text="百度"><a href="http://www.baidu.com">百度</a></my-directive>

如果设置replace=true

<a href="http://www.baidu.com" value="http://www.baidu.com" text="百度">百度</a>

据我观察，这种效果只有设置restrict="E"的情况下，才会表现出实际效果。

介绍完基本的指令参数后，就要涉及到更重要的作用域参数了...

scope参数[bool or object]

 scope参数是可选的，可以被设置为true或一个对象。默认值是false。

如果一个元素上有多个指令使用了隔离作用域，其中只有一个可以生效。只有指令模板中的根元素可以获得一个新的作用域。因此，对于这些对象来说scope默认被设置为true。内置指令ng-controller的作用，就是从父级作用域继承并创建一个新的子作用域。它会创建一个新的从父作用域继承而来的子作用域。这里的继承就不在赘述，和面向对象中的继承基本是一直的。

 首先我们来分析一段代码：

    <div ng-app="app" ng-init="name= ''祖父''">
      <div ng-init="name=''父亲''">
        第一代：{{ name }}
        <div ng-init="name= ''儿子''" ng-controller="SomeController">
          第二代： {{ name }}
          <div ng-init="name=''孙子''">
            第三代： {{ name }}
          </div>
        </div>
      </div>
    </div>

我们发现第一代，我们初始化name为父亲,但是第二代和第三代其实是一个作用域，那么他们的name其实是一个对象，因此出现的效果如下：

第一代：父亲
第二代： 孙子
第三代： 孙子

我们在修改一下代码，把第三代隔离开来再看看效果：

 <div ng-app="app"ng-init="name= ''祖父''">
      <div ng-init="name=''父亲''">
        第一代：{{ name }}
        <div ng-init="name= ''儿子''" ng-controller="SomeController">
          第二代： {{ name }}
          <div ng-init="name=''孙子''" ng-controller="SecondController">
            第三代： {{ name }}
          </div>
        </div>
      </div>
    </div>


angular.module(''app'', [])
    .controller(''SomeController'',function($scope) {
      
    })
    .controller(''SecondController'', function ($scope) {
    
  })

效果如下：

         第一代：父亲
         第二代： 儿子
         第三代： 孙子

在修改下代码来看看继承：

    <div ng-app="app"ng-init="name= ''祖父的吻''">
      <div>
        第一代：{{ name }}
        <div ng-controller="SomeController">
          第二代： {{ name }}
          <div ng-controller="SecondController">
            第三代： {{ name }}
          </div>
        </div>
      </div>
    </div>

效果如下：

第一代：祖父的吻
第二代： 祖父的吻
第三代： 祖父的吻

如果要创建一个能够从外部原型继承作用域的指令，将scope属性设置为true，简单来说就是可继承的隔离，即不能反向影响父作用域。

 再来看个例子：

angular.module(''myApp'', [])
    .controller(''MainController'', function ($scope) {
    })
    .directive(''myDirective'', function () {
      return {
        restrict: ''A'',
        scope:false,//切换为{}，true测试
        priority: 100,
        template: ''<div>内部:{{ myProperty }}<input ng-model="myProperty"/></div>''
      };
    });

Html代码：

 <div ng-controller=''MainController'' ng-init="myProperty=''Hello World!''">
    外部: {{ myProperty}}
    <input ng-model="myProperty" />
    <div my-directive></div>
  </div>

 当我们改变scope的值我们会发现

false:继承但不隔离

true:继承并隔离

{}：隔离且不继承

 transclude

transclude是一个可选的参数。默认值是false。嵌入通常用来创建可复用的组件，典型的例子是模态对话框或导航栏。我们可以将整个模板，包括其中的指令通过嵌入全部传入一个指令中。指令的内部可以访问外部指令的作用域，并且模板也可以访问外部的作用域对象。为了将作用域传递进去，scope参数的值必须通过{}或true设置成隔离作用域。如果没有设置scope参数，那么指令内部的作用域将被设置为传入模板的作用域。

只有当你希望创建一个可以包含任意内容的指令时，才使用transclude: true。

 我们来看两个例子-导航栏：

  <div side-box title="TagCloud">
    <div>
      <a href="">Graphics</a>
      <a href="">ng</a>
      <a href="">D3</a>
      <a href="">Front-end</a>
      <a href="">Startup</a>
    </div>
  </div>

JsCode:

 angular.module(''myApp'', []) 
 .directive(''sideBox'', function() { 
   return { 
     restrict: ''EA'', 
     scope: { 
       title: ''@'' 
     }, 
     transclude: true, 
     template: ''<div><div><h2>'' +
       ''{{ title }}</h2><spanng-transclude></span></div></div>'' 
     }; 
  });

这段代码告诉ng编译器，将它从DOM元素中获取的内容放到它发现ng-transclude指令的地方。

再来你看个官网的例子：

angular.module(''docsIsoFnBindExample'', [])
 .controller(''Controller'', [''$scope'', ''$timeout'', function($scope, $timeout) {
  $scope.name = ''Tobias'';
  $scope.hideDialog = function () {
   $scope.dialogIsHidden = true;
   $timeout(function () {
    $scope.dialogIsHidden = false;
   }, 2000);
  };
 }])
 .directive(''myDialog'', function() {
  return {
   restrict: ''E'',
   transclude: true,
   scope: {
    ''close'': ''&onClose''
   },
   templateUrl: ''my-dialog-close.html''
  };
 });

my-dialog-close.html

my-dialog-close.html
<div>
 <a hrefng-click="close()">&times;</a>
 <div ng-transclude></div>
</div>

indext.html

<div ng-controller="Controller">
 <my-dialog ng-hide="dialogIsHidden" on-close="hideDialog()">
  Check out the contents, {{name}}!
 </my-dialog>
</div>

如果指令使用了transclude参数，那么在控制器无法正常监听数据模型的变化了。建议在链接函数里使用$watch服务。

 controller[string or function]

 controller参数可以是一个字符串或一个函数。当设置为字符串时，会以字符串的值为名字，来查找注册在应用中的控制器的构造函数.

angular.module(''myApp'', []) 
.directive(''myDirective'', function() { 
restrict: ''A'', 
controller: ''SomeController'' 
})

可以在指令内部通过匿名构造函数的方式来定义一个内联的控制器

angular.module(''myApp'',[]) 
.directive(''myDirective'', function() { 
restrict: ''A'', 
controller: 
function($scope, $element, $attrs, $transclude) { 
// 控制器逻辑放在这里
} 
});

我们可以将任意可以被注入的ng服务注入到控制器中，便可以在指令中使用它了。控制器中也有一些特殊的服务可以被注入到指令当中。这些服务有：

1. $scope

与指令元素相关联的当前作用域。

2. $element

当前指令对应的元素。

3. $attrs

由当前元素的属性组成的对象。

<div id="aDiv"></div>
具有如下的属性对象：
{ 
id: "aDiv", 
class: "box" 
}

4. $transclude

嵌入链接函数会与对应的嵌入作用域进行预绑定。transclude链接函数是实际被执行用来克隆元素和操作DOM的函数。

angular.module(''myApp'',[])
 .directive(''myLink'', function () {
   return {
     restrict: ''EA'',
     transclude: true,
     controller:
     function ($scope, $element,$attrs,$transclude) {
       $transclude(function (clone) {       
         var a = angular.element(''<a>'');
         a.attr(''href'', $attrs.value);
         a.text(clone.text());
         $element.append(a);
       });
     }
   };
 });

html

    <my-link value="http://www.baidu.com">百度</my-link>
    <div my-link value="http://www.google.com">谷歌</div>

仅在compile参数中使用transcludeFn是推荐的做法。link函数可以将指令互相隔离开来，而controller则定义可复用的行为。如果我们希望将当前指令的API暴露给其他指令使用，可以使用controller参数，否则可以使用link来构造当前指令元素的功能性（即内部功能）。如果我们使用了scope.$watch()或者想要与DOM元素做实时的交互，使用链接会是更好的选择。使用了嵌入，控制器中的作用域所反映的作用域可能与我们所期望的不一样，这种情况下，$scope对象无法保证可以被正常更新。当想要同当前屏幕上的作用域交互时，可以使用传入到link函数中的scope参数。

controllerAs[string]

controllerAs参数用来设置控制器的别名，这样就可以在视图中引用控制器甚至无需注入$scope。

<div ng-controller="MainController as main">
    <input type="text" ng-model="main.name" />
    <span>{{ main.name }}</span>
  </div>

JsCode:

angular.module(''myApp'',[])
  .controller(''MainController'', function () {
    this.name = "Halower";
  });

控制器的别名使路由和指令具有创建匿名控制器的强大能力。这种能力可以将动态的对象创建成为控制器，并且这个对象是隔离的、易于测试。

 require[string or string[]]

 require为字符串代表另外一个指令的名字。require会将控制器注入到其所指定的指令中，并作为当前指令的链接函数的第四个参数。字符串或数组元素的值是会在当前指令的作用域中使用的指令名称。在任何情况下，ng编译器在查找子控制器时都会参考当前指令的模板。

  1. 如果不使用^前缀，指令只会在自身的元素上查找控制器。指令定义只会查找定义在指令作当前用域中的ng-model=""
  2. 如果使用?前缀,在当前指令中没有找到所需要的控制器，会将null作为传给link函数的第四个参数。
  3. 如果添加了^前缀，指令会在上游的指令链中查找require参数所指定的控制器。
  4.  如果添加了?^ 将前面两个选项的行为组合起来，我们可选择地加载需要的指令并在父指令链中进行查找
  5. 如果没有任何前缀，指令将会在自身所提供的控制器中进行查找，如果没有找到任何控制器（或具有指定名字的指令）就抛出一个错误

compile【object or function】

compile选项本身并不会被频繁使用，但是link函数则会被经常使用。本质上，当我们设置了link选项，实际上是创建了一个postLink() 链接函数，以便compile() 函数可以定义链接函数。通常情况下，如果设置了compile函数，说明我们希望在指令和实时数据被放到DOM中之前进行DOM操作，在这个函数中进行诸如添加和删除节点等DOM操作是安全的。

compile和link选项是互斥的。如果同时设置了这两个选项，那么会把compile所返回的函数当作链接函数，而link选项本身则会被忽略。

编译函数负责对模板DOM进行转换。链接函数负责将作用域和DOM进行链接。 在作用域同DOM链接之前可以手动操作DOM。在实践中，编写自定义指令时这种操作是非常罕见的，但有几个内置指令提供了这样的功能。

link

compile: function(tEle, tAttrs, transcludeFn) {
 //todo:
 return function(scope, ele, attrs) {
 // 链接函数
 };

链接函数是可选的。如果定义了编译函数，它会返回链接函数，因此当两个函数都定义时，编译函数会重载链接函数。如果我们的指令很简单，并且不需要额外的设置，可以从工厂函数（回调函数）返回一个函数来代替对象。如果这样做了，这个函数就是链接函数。

ngModel

它提供更底层的API来处理控制器内的数据,这个API用来处理数据绑定、验证、 CSS更新等不实际操作DOM的事情,ngModel 控制器会随 ngModel 被一直注入到指令中，其中包含了一些方法。为了访问ngModelController必须使用require设置.

ngModelController常用的元素如下：

 1.为了设置作用域中的视图值，需要调用 ngModel.$setViewValue() 函数。
$setViewValue() 方法适合于在自定义指令中监听自定义事件（比如使用具有回调函数的jQuery插件），我们会希望在回调时设置$viewValue并执行digest循环。

angular.module(''myApp'')
    .directive(''myDirective'', function() {
      return {
        require: ''?ngModel'',
        link: function(scope, ele, attrs, ngModel) {
          if (!ngModel) return;
          $(function() {
            ele.datepicker({
               //回调函数
              onSelect: function(date) {
                // 设置视图和调用 apply
                scope.$apply(function() {
                  ngModel.$setViewValue(date);
                });
              }
            });
          });
        }
      };
    });

2.$render方法可以定义视图具体的渲染方式

3.属性

1. $viewValue

$viewValue属性保存着更新视图所需的实际字符串。

2. $modelValue

$modelValue由数据模型持有。 $modelValue和$viewValue可能是不同的，取决于$parser流水线是否对其进行了操作。

3. $parsers

$parsers 的值是一个由函数组成的数组，其中的函数会以流水线的形式被逐一调用。ngModel 从DOM中读取的值会被传入$parsers中的函数，并依次被其中的解析器处理。

4. $formatters

$formatters的值是一个由函数组成的数组，其中的函数会以流水线的形式在数据模型的值发生变化时被逐一调用。它和$parser流水线互不影响，用来对值进行格式化和转换，以便在绑定了这个值的控件中显示。

5. $viewChangeListeners

$viewChangeListeners的值是一个由函数组成的数组，其中的函数会以流水线的形式在视图中的值发生变化时被逐一调用。通过$viewChangeListeners，可以在无需使用$watch的情况下实现类似的行为。由于返回值会被忽略，因此这些函数不需要返回值。

6. $error

$error对象中保存着没有通过验证的验证器名称以及对应的错误信息。

7. $pristine

$pristine的值是布尔型的，可以告诉我们用户是否对控件进行了修改。

8. $dirty

$dirty的值和$pristine相反，可以告诉我们用户是否和控件进行过交互。

9. $valid

$valid值可以告诉我们当前的控件中是否有错误。当有错误时值为false， 没有错误时值为true。

10. $invalid

$invalid值可以告诉我们当前控件中是否存在至少一个错误，它的值和$valid相反。

以上就是关于AngularJS的指令知识资料整理，后续继续补充，谢谢大家对本站的支持！

您可能感兴趣的文章:
  • AngularJs Scope详解及示例代码
  • angularjs 源码解析之scope
  • angularJS 中$scope方法使用指南
  • 浅谈AngularJs指令之scope属性详解

AngularJs Using $location详解及示例代码

AngularJs Using $location详解及示例代码

一、What does it do?

　　$location服务分析浏览器地址栏中的URL（基于window.location），让我们可以在应用中较为方便地使用URL里面的东东。在地址栏中更改URL，会响应到$location服务中，而在$location中修改URL，也会响应到地址栏中。

　　$location服务：

暴露当前浏览器地址栏的URL，所以我们可以

1.注意和观察URL
2.改变URL

当用户做以下操作时，与浏览器一起同步URL：

1.改变地址栏
2.单击后退或者前进按钮（或者点击一个历史链接）。
3.单击一个链接

将URL对象描绘为一系列的方法（protocol，host，path，search，hash）。

1. 比较$location和window.location

　　1) 目的：window.location和$location服务，都允许对当前浏览器的location进行读写访问。

　　2) API：window.location暴露一个未经加工的对象，附带一些可以直接修改的属性；而$location服务则是暴露一些jQuery风格的getter/setter方法。

　　3) 与angular应用声明周期的整合：$location知道关于所有内部声明周期的阶段，与$watch等整合；而window.location则不行。

　　4) 与HTML5 API无缝结合：是（with a fallback for legacy browsers，对于低版本的浏览器有兼容手段？）；而window.location则没有。

　　5) 知道应用加载的文档根目录(docroot)或者上下文(context)：window.location不行，wnidow.location.path会返回”/docroot/子路径”；而$location.path()返回真实的docroot。

2. When should I use $location?

　　在应用中，任何需要对当前URL的改变作出响应，或者想去改变当前浏览器的URL的时候。

3. What does it not do?

　　当浏览器URL改变的时候，不会导致页面重新加载(page reload)。如果需要做这件事情（更改地址，实现page reload），请使用较低级别的API,$window.location.href。

二、General overview of the API（API的总体概述）

　　$location 服务可以根据它初始化时的配置而有不同的表现。默认配置是适合大多数应用的，其他配置定制，可以开启一些新特性。

　　当$location服务初始化完毕，我们可以以jQuery风格的getter、setter方法来使用它，允许我们获得或者改变当前浏览器的URl。

1. $location service configuration

　　想配置$location服务，需要获得$locationProvider（http://code.angularjs.org/1.0.2/docs/api/ng.$locationProvider），并设置以下参数：

html5Mode(mode)：{boolean}，true - see HTML5 mode；false - see Hashbang mode，默认: false。（下面的章节会解释各种mode）

hashPrefix(prefix):{string}，hashbang使用的前缀（html5Mode为false时，使用hashbang mode，以适应不支持HTML5 mode的浏览器），默认:''!''

2. Getter and setter methods

　　$location 服务为只读的URL部分（absUrl，protocol，host，port）提供getter方法，也提供url，path，search，hash的getter、setter方法。

 // get the current path
  $location.path();

  // change the path
  $location.path(''/newValue'')

　　所有setter方法都返回同一个$location对象，以实现链式语法。例如，在一句里面修改多个属性，链式setter方法类似：

　　$location.path(‘/newValue'').search({key:value});

　　有一个特别的replace方法，可以用作告诉$location服务，在下一次与浏览器同步时，使用某个路径代替最新的历史记录，而不是创建一个新的历史记录。当我们想实现重定向（redirection）而又不想使后退按钮（后退按钮回重新触发重定向）失效时，replace方法就很有用了。想改变当前URL而不创建新的历史记录的话，我们可以这样做：

          $location.path(‘/someNewPath'').replace();

　　注意，setter方法不会马上更新window.location。相反，$location服务会知道scope生命周期以及合并多个$location变化为一个，并在scope的$digest阶段一并提交到window.location对象中。正因为$location多个状态的变化会合并为一个变化，到浏览器中，只调用一次replace()方法，让整个commit只有一个replace()，这样不会使浏览器创建额外的历史记录。一旦浏览器更新了，$location服务会通过replace()方法重置标志位，将来的变化将会创建一个新的历史记录，除非replace()被再次调用。

           Setter and character encoding

　　我们可以传入特殊字符到$location服务中，服务会按照RFC3986标准，自动对它们进行编码。当我们访问这些方法时：

  1. 所有传入$location的setter方法的值，path()、search()、hash()，都会被编码。
  2. getter方法（没参数）返回的值都是经过解码的，如path()，search()，hash()。
  3. 当我们调用absUrl()方法时，返回的值是包含已编码部分的完整url。
  4. 当我们调用url()方法时，返回的是包含path、search和hash部分的已经编码的url，如/path?search=1&b=c#hash。 

三、Hashbang and HTML5 Modes

$location服务有两个配置模式，可以控制浏览器地址栏的URL格式：Hashbang mode（默认）与基于使用HTML5 History API的HTML5 mode。在两种模式下，应用都使用相同的API，$location服务会与正确的URL片段、浏览器API一起协作，帮助我们进行浏览器URL变更以及历史管理。

 

 

1. Hashbang mode (default mode)

　　在这个模式中,$location在所有浏览器中都使用Hashbang URL。查看下面的代码片段，可以了解更多：

it(''should show example'', inject(
  function($locationProvider) {
    $locationProvider.html5mode = false;
    $locationProvider.hashPrefix = ''!'';
  },
  function($location) {
  // open http://host.com/base/index.html#!/a
  $location.absUrl() == ''http://host.com/base/index.html#!/a'';
  $location.path() == ''/a'';
  $location.path(''/foo'');
  $location.absUrl() == ''http://host.com/base/index.html#!/foo'';
  $location.search() == {};//search没东东的时候，返回空对象
  $location.search({a: ''b'', c: true});
  $location.absUrl() == ''http://host.com/base/index.html#!/foo?a=b&c'';
  $location.path(''/new'').search(''x=y'');//可以用字符串的方式更改search，每次设置search，都会覆盖之前的search
  $location.absUrl() == ''http://host.com/base/index.html#!/new?x=y'';
  }
));

　　Crawling your app(让google能够对我们的应用进行索引)

　　如果我们想让我们的Ajax应用能够被索引，我们需要在head中增加一个特殊的meta标签：

                <meta name="fragment" content="!" />

　　这样做，将让爬虫机器人使用_escaped_fragment_参数请求当前的链接，让我们的服务器认识爬虫机器人，并提供对应的HTML快照。想了解更多关于这个技术的信息，可以查看https://developers.google.com/webmasters/ajax-crawling/docs/specification?hl=zh-CN

四、HTML5 mode

　　在HTML5模式中，$location服务的getter、setter通过HTML5的History API与浏览器URL进行交互，允许使用正规的path、search模块，代替hashbang的模式。如果部分浏览器不支持HTML5 History API，$location服务会自动退回到使用hashbang URL的模式。为了让我们能够从不清楚显示我们的应用的浏览器是否支持history API的担心中解脱出来，使用$location服务是一个正确的、最佳的选择。

　　在旧版浏览器中打开一个正规的URL会转换为hashbangURL。

　　在现代浏览器中打开一个hashbangURL，会重写为一个正规的URL。

1. 向前兼容旧版浏览器

　　对于支持HTML5 history API的浏览器，$location回使用它们去写path和search。如果浏览器不支持history API，$location会转为提供Hashbang URL。这是$location服务自动转换的。

2. HTML link rewriting

　　当我们使用history API mode的时候，我们对于不同的浏览器，需要不同的链接，但我们只需要提供正规的URL即可，例如<a href=”/some?foo=bar”>link</a>

当用户单击这个超链接时：

在旧的浏览器中，URL会改为/index.html#!/some?foo=bar

在现代浏览器中，URL会改为/some?foo=bar

　　在下面的情况中，链接不会被重写，而是会使页面加载到对应Url中：

包含target的超链接：<a href="/ext/link?a=b" target="_self">link</a>

到不同domain的绝对链接：<a href="http://angularjs.org/">link</a>

设置了base路径后，通过” /”开头的链接到不同base路径的超链接：<a href="/not-my-base/link">link</a>

3. server side

　　使用这个方式，在服务端请求URL重定向，通常，我们需要重定向我们所有的链接到我们的应用中。（例如index.html）。

4. Crawling your app

　　与之前相同

5. Relative links

　　确保检查所有相对链接、图片、脚本等。我们必须在<head>中指定base url（<base href="/my-base">），并在所有地方使用绝对url（以/开头）。因为相对URL会根据document的初始路径（通常与应用的root有所不同），转化为绝对url。（relative urls will be resolved to absolute urls using the initial absolute url of the document, which is often different from the root of the application）。

　　我们十分鼓励在document root中运行允许使用History API的angular应用，因为这很好地照顾到相对链接的问题。

6. Sending links among different browsers

　　（这里讲解了两种模式的地址可以适应不同浏览器，自动转换，又重复讲一次……）

7. 例子

　　在这例子中，可以看到两个$location实例，两个都是html5 mode，但在不同的浏览器上，所以我们可以看到两者之间的不同点。这些$location服务与两个假的“浏览器”连接。每一个input代表浏览器的地址栏。

　　注意，当我们输入hashbang地址到第一个“浏览器”（或者第二个？），它不会重写或重定向另外的Url，这个转换过程只会发生在page reload的时候。

<!DOCTYPE html>
<html ng-app>
<head>
  <base href=""/>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>fake-browser</title>
  <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
  <style type="text/css">
    .ng-cloak {
      display: none;
    }
  </style>
</head>
<body>
<div ng-non-bindable>
  <div id="html5-mode" ng-controller="Html5Cntl">
    <h4>Browser with History API</h4>
    <div ng-address-bar browser="html5"></div><br><br>
    $location.protocol() = {{$location.protocol()}}<br>
    $location.host() = {{$location.host()}}<br>
    $location.port() = {{$location.port()}}<br>
    $location.path() = {{$location.path()}}<br>
    $location.search() = {{$location.search()}}<br>
    $location.hash() = {{$location.hash()}}<br>
    <a href="http://www.host.com/base/first?a=b">/base/first?a=b</a> |
    <a href="http://www.host.com/base/sec/ond?flag#hash">sec/ond?flag#hash</a> |
    <a href="/other-base/another?search">external</a>
  </div>
  <div id="hashbang-mode" ng-controller="HashbangCntl">
    <h4>Browser without History API</h4>
    <div ng-address-bar browser="hashbang"></div><br><br>
    $location.protocol() = {{$location.protocol()}}<br>
    $location.host() = {{$location.host()}}<br>
    $location.port() = {{$location.port()}}<br>
    $location.path() = {{$location.path()}}<br>
    $location.search() = {{$location.search()}}<br>
    $location.hash() = {{$location.hash()}}<br>
    <a href="http://www.host.com/base/first?a=b">/base/first?a=b</a> |
    <a href="http://www.host.com/base/sec/ond?flag#hash">sec/ond?flag#hash</a> |
    <a href="/other-base/another?search">external</a>
  </div>
</div>
<script src="../angular.js" type="text/javascript"></script>
<script type="text/javascript">
  function FakeBrowser(initUrl, baseHref) {
    this.onUrlChange = function(fn) {
      this.urlChange = fn;
    };

    this.url = function() {
      return initUrl;
    };

    this.defer = function(fn, delay) {
      setTimeout(function() { fn(); }, delay || 0);
    };

    this.baseHref = function() {
      return baseHref;
    };

    this.notifyWhenOutstandingRequests = angular.noop;
  }
  var browsers = {
    html5: new FakeBrowser(''http://www.host.com/base/path?a=b#h'', ''/base/index.html''),
    hashbang: new FakeBrowser(''http://www.host.com/base/index.html#!/path?a=b#h'', ''/base/index.html'')
  };

  function Html5Cntl($scope, $location) {
    $scope.$location = $location;
  }

  function HashbangCntl($scope, $location) {
    $scope.$location = $location;
  }

  function initEnv(name) {
    var root = angular.element(document.getElementById(name + ''-mode''));
    angular.bootstrap(root, [
      function ($compileProvider, $locationProvider, $provide) {
        debugger;
      $locationProvider.html5Mode(true).hashPrefix(''!'');

      $provide.value(''$browser'', browsers[name]);
      $provide.value(''$document'', root);
      $provide.value(''$sniffer'', {history:name == ''html5''});

      $compileProvider.directive(''ngAddressBar'', function () {
        return function (scope, elm, attrs) {
          var browser = browsers[attrs.browser],
              input = angular.element(''<input type="text">'').val(browser.url()),
              delay;

          input.bind(''keypress keyup keydown'', function () {
            if (!delay) {
              delay = setTimeout(fireUrlChange, 250);
            }
          });

          browser.url = function (url) {
            return input.val(url);
          };

          elm.append(''Address: '').append(input);

          function fireUrlChange() {
            delay = null;
            browser.urlChange(input.val());
          }
        };
      });
    }
    ]);
    root.bind(''click'', function (e) {
      e.stopPropagation();
    });
  }

  initEnv(''html5'');
  initEnv(''hashbang'');
</script>
</body>
</html>

五、附加说明

1. Page reload navigation

　　$location服务仅仅允许我们改变URl；它不允许我们重新加载页面（reload the page）。当我们需要改变URL且reload page或者跳转到其他页面时，我们需要使用低级点得API，$window.location.href。

2. Using $location outside of the scope life-cycle

　　$location知道angular的scope life-cycle。当浏览器的URL发生改变时，它会更新$location，并且调用$apply，所以所有$watcher和$observer都会得到通知。当我们再$digest阶段中修改$location，不会出现任何问题；$location会将这次修改传播到浏览器中，并且通知所有$watcher、$observer。当我们需要在angular外面改变$location时（例如在DOM事件中或者在测试中），我们必须调用$apply，以传播这个变化。

3. $location.path() and ! or / prefixes

　　path可以直接使用”/”开始；$location.path()setter会在value没有以”/”开头时自动补上。

　　注意”!”前缀，在Hashbang mode中，不属于$location.path()的一部分。它仅仅是hashPrefix。

六、Testing with the $location service

　　在测试中使用$location服务的时候，是处于angular scope life-cycle外面的。这意味着我们需要负责调用scope.apply()。  

describe(''serviceUnderTest'', function() {
  beforeEach(module(function($provide) {
  　　$provide.factory(''serviceUnderTest'', function($location){
  　　// whatever it does...
  　　});
  });
  it(''should...'', inject(function($location, $rootScope, serviceUnderTest) {
  　　$location.path(''/new/path'');
  　　$rootScope.$apply();
  　　// test whatever the service should do...
  }));
});
 

七、Migrating from earlier AngularJS releases

　　在早期的angular中，$location使用hashPath或者hashSearch去处理path和search方法。在这个release中，当有需要的时候，$location服务处理path和search方法，然后使用那些获得得信息去构成hashbang URL（例如http://server.com/#!/path?search=a）。

八、Two-way binding to $location

　　angular compiler当前不支持方法的双向绑定（https://github.com/angular/angular.js/issues/404）。如果我们希望对$location对象实现双向绑定（在input中使用ngModel directive），我们需要指定一个额外的model属性（例如：locationPath），并加入两个$watch，监听两个方向上的$location更新，例如：

<input type="text" ng-model="locationPath" />

// js - controller
$scope.$watch(''locationPath'', function(path) {
  $location.path(path);
);
$scope.$watch(''$location.path()'', function(path) {
  scope.locationPath = path;
});

以上就是关于AngularJs Using $location的资料整理，后续继续补充相关资料，谢谢大家对本站的支持！

您可能感兴趣的文章:
  • AngularJS通过$location获取及改变当前页面的URL
  • AngularJS内建服务$location及其功能详解
  • AngularJS的$location使用方法详解

AngularJS 自定义指令详解及实例代码

AngularJS 自定义指令详解及实例代码

AngularJS支持用户自定义标签属性，在不需要使用DOM节点操作的情况下，添加自定义的内容。

前面提到AngularJS的四大特性：

　　1 MVC

　　2 模块化

　　3 指令

　　4 双向数据绑定

下面将会介绍如下的内容：

　　1 如何自定义指令

　　2 自定义指令的使用

　　3 自定义指令的内嵌使用

　　如何自定义指令：

　　Angular是基于模块的框架，因此上来肯定要创建一个自己的模块：

var myAppModule = angular.module("myApp",[]);

　　然后在此模块基础上创建指令directive      

 myAppModule.directive("xingoo",function(){
    return{
     restrict:''AECM'',
     template:''<div>hello my directive</div>'',
     repalce:true
    }
   });

　　其中，xingoo是我们自定义标签的名字，后面跟着它的方法函数。

　　函数return了一个键值对组合，其中定义了标签的使用方法、属性等等内容。

　　那么看看它都定义了哪些内容吧：

　　1 restrict：定义了标签的使用方法，一共四种，分别是AECM

　　2 template：定义标签的模板。里面是用于替换自定义标签的字符串

　　3 repalce：是否支持替换

　　4 transclude：是否支持内嵌

　　如何使用指令：

　　上面提到了标签的四种使用方法，即AECM。

　　A attribute属性：当做属性来使用

<div xingoo></div>

　　E element元素：当做标签元素来使用

<xingoo></xingoo>

　　C class类：当做CSS样式来使用

<div></div>

　　M comments注释：当做注释使用（这种方式在1.2版本下亲测不可用！）

<!-- directive:xingoo -->
<div></div>

　　一般来说推荐，当做属性和元素来使用。

　　当想要在现有的html标签上扩展属性时，采用属性的方式。

　　当想要自定义标签时，采用标签的形式。

　　想要使用那种方式，必须要在定义directive中的restrict里面声明对应的字母。 

　　指令的内嵌使用：

　　因为标签内部可以嵌套其他的标签，因此想要在自定义标签中嵌套其他的元素标签，则需要：

　　1 使用transclude属性，设置为true。

　　2 并使用ng-transclude属性，定义内部嵌套的位置。

　　代码如下：      

  myAppModule.directive("test",function(){
    return{
     restrict:''AECM'',
     transclude:true,
     template:"<div>haha! <div ng-transclude></div> wuwu!</div>"
    }
   });
 

　　全部代码

<!doctype html>
<html ng-app="myApp">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
 </head>
 <body>
  
  <xingoo></xingoo>
  <div xingoo></div>
  <div></div>
  <!-- directive:xingoo -->
  <div></div>
  <hr>
  <xingoo>3333</xingoo>
  <hr>
  <test>4444</test>


  <script type="text/javascript">
   var myAppModule = angular.module("myApp",[]);

   myAppModule.directive("xingoo",function(){
    return{
     restrict:''AECM'',
     template:''<div>hello my directive</div>'',
     repalce:true
    }
   });

   myAppModule.directive("test",function(){
    return{
     restrict:''AECM'',
     transclude:true,
     template:"<div>haha! <div ng-transclude></div> wuwu!</div>"
    }
   });
  </script>
 </body>
</html>

　　运行结果

以上就是对AngularJS 自定义指令的资料整理，后续继续补充相关资料，谢谢大家对本站的支持！

您可能感兴趣的文章:
  • 深入讲解AngularJS中的自定义指令的使用
  • AngularJS创建自定义指令的方法详解
  • AngularJS优雅的自定义指令
  • AngularJS使用自定义指令替代ng-repeat的方法
  • AngularJS自定义指令实现面包屑功能完整实例
  • AngularJS实现自定义指令与控制器数据交互的方法示例
  • AngularJS 自定义指令详解及示例代码
  • AngularJS自定义指令之复制指令实现方法
  • AngularJS自定义指令详解（有分页插件代码）
  • 详解angularJS自定义指令间的相互交互
  • AngularJS实现自定义指令及指令配置项的方法

AngularJS Ajax详解及示例代码

AngularJS Ajax详解及示例代码

AngularJS提供$http控制，可以作为一项服务从服务器读取数据。服务器可以使一个数据库调用来获取记录。 AngularJS需要JSON格式的数据。一旦数据准备好，$http可以用以下面的方式从服务器得到数据。

function studentController($scope,$http) {
var url="data.txt";
  $http.get(url).success( function(response) {
              $scope.students = response; 
            });
}

在这里，data.txt中包含的学生记录。 $http服务使Ajax调用和设置针对其学生的属性。 “学生”模型可以用来用来绘制 HTML 表格。

例子

data.txt

[
{
"Name" : "Mahesh Parashar",
"RollNo" : 101,
"Percentage" : "80%"
},
{
"Name" : "Dinkar Kad",
"RollNo" : 201,
"Percentage" : "70%"
},
{
"Name" : "Robert",
"RollNo" : 191,
"Percentage" : "75%"
},
{
"Name" : "Julian Joe",
"RollNo" : 111,
"Percentage" : "77%"
}
]

testAngularJS.html

<html>
<head>
<title>Angular JS Includes</title>
<style>
table, th , td {
 border: 1px solid grey;
 border-collapse: collapse;
 padding: 5px;
}
table tr:nth-child(odd) {
 background-color: #f2f2f2;
}
table tr:nth-child(even) {
 background-color: #ffffff;
}
</style>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="" ng-controller="studentController">
<table>
  <tr>
   <th>Name</th>
   <th>Roll No</th>
	 <th>Percentage</th>
  </tr>
  <tr ng-repeat="student in students">
   <td>{{ student.Name }}</td>
   <td>{{ student.RollNo }}</td>
	 <td>{{ student.Percentage }}</td>
  </tr>
</table>
</div>
<script>
function studentController($scope,$http) {
var url="data.txt";
  $http.get(url).success( function(response) {
              $scope.students = response;
            });
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

输出

要运行这个例子，需要部署textAngularJS.html，data.txt到一个网络服务器。使用URL在Web浏览器中打开textAngularJS.html请求服务器。看到结果如下：

以上就是AngularJS Ajax的基础资料整理，后续继续整理相关资料，谢谢大家对本站的支持！

您可能感兴趣的文章:
  • AngularJS实现ajax请求的方法
  • AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
  • 实例详解angularjs和ajax的结合使用
  • 在AngularJS中使用AJAX的方法
  • Angular的$http的ajax的请求操作（推荐）

AngularJs bootstrap详解及示例代码

AngularJs bootstrap详解及示例代码

AngularJs学习笔记系列第一篇，希望我可以坚持写下去。本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容，但也加入些许自己的理解与尝试结果。

一、总括

本文用于解释Angular初始化的过程，以及如何在你有需要的时候对Angular进行手工初始化。

二、Angular

关于AngularJs 指令详解及示例代码和angularjs常用指令的问题我们已经讲解完毕，感谢您的阅读，如果还想了解更多关于AngularJs Using $location详解及示例代码、AngularJS 自定义指令详解及实例代码、AngularJS Ajax详解及示例代码、AngularJs bootstrap详解及示例代码等相关内容，可以在本站寻找。

本文标签：

上一篇Ubuntu系统下Angularjs开发环境安装（ubuntu安装json）

下一篇AngularJs bootstrap详解及示例代码（angular.bootstrap）

相关文章