对于ng-系列的指令，每篇文章写2-5个吧，不然显得文章好短....

ngApp

使用这个指令自动启动一个AngularJS应用。ngApp指令指定了应用程序的根节点，通常会将ngApp放置在网页的根节点如<body>或<html >标签的。

格式：ng-app=”value”

value：当前应用程序模块的名称。

使用代码：

  <div ng-app="Demo"></div>

需要注意的是：1.3版本以前的是可以不设置值的，1.3只后就是必需的了，而且该模块还得被定义，网上很多部分的教程是1.3版本之前的，所以大家在用的时候注意下版本问题。

这个指令野兽的理解其实他就是告诉Angular，应用程序的根节点在我这，并且在1.3版本后告诉Angular你该执行的模块的名称是什么。

ngBind

ngBind告诉Angular去用指定的表达式的值去替换指定元素内的文本内容，并且当表达式的值变化时让文本内容也跟着变化。

格式：ng-bind=”value”   class="ng-bind:value;"

value：表达式/值

使用代码：

  <div ng-app="Demo">

     <div ng-controller="testCtrl as ctrl">

        <span ng-bind="ctrl.hello"></span>&nbsp;<span class="ng-bind:ctrl.world"></span><br />

        <span ng-bind="ctrl.hi()"></span>

     </div>

  </div>
  (function () {

    angular.module("Demo", [])

    .controller("testCtrl", testCtrl);

    function testCtrl() {

        var vm = this;

        vm.hello = "Hello";

        vm.world = "World";

        vm.hi = function () {

            return "Hi!";

        };

    };

  }());

ngBind相对于{{}}形式绑定的好处就是当你快速刷新或者打开页面那瞬间，不会将绑定代码暴露。

这个不用过多说明，直接就能看得出这是个绑定数据的指令。

ngBindHtml

创建一个将innerHTML函数所执行的结果绑定到页面指定元素的绑定方式。

格式: ng-bind-html=”value”

value: 将会被html转义并且绑定的字符串。

配合$sce使用：

  .hello { width: 300px; height: 300px; background: #ccc; color: red; }
  <div ng-app="Demo">

      <div ng-controller="demoCtrl as ctrl">

          <div ng-bind-html="ctrl.htmlText"></div>

      </div>

  </div>
  (function () {

    angular.module("Demo", [])

    .controller("testCtrl", ["$sce",testCtrl]);

    function testCtrl($sce) {

      var vm = this;

      vm.htmlText = '<div class="hello">Hello Wrold</div>';// Error: [$sce:unsafe]Attempting to use an unsafe value in a safe context.

      vm.htmlText = $sce.trustAsHtml(vm.htmlText); // ok 能正常输出html了

    };

  }());

引入angular-ngSanitize.js使用：

  <div ng-app="Demo">

    <div ng-controller="testCtrl as ctrl">

        <div ng-bind-html="ctrl.htmlValue"></div>

    </div>

  </div>
  (function () {

    angular.module("Demo", ["ngSanitize"])

    .controller("testCtrl", [testCtrl]);

    function testCtrl() {

      var vm = this;

      vm.htmlText = '<div class="hello">Hello Wrold</div>';

    };

  }());

ngNonBindable

这个指令告诉Angular不要去对当前的Dom元素进行编译或者绑定值。当元素的内容需要展示Angular指令和绑定但是又得让Angular忽略他的执行的时候，这个指令就有用了。比如你有个网站，需要展示代码片段的时候。

格式：ng-non-bindable

使用代码：

  <span ng-bind="greeting"></span>

  <span ng-bind="greeting" ng-non-bindable></span>

  <span ng-non-bindable >{{greeting}}</span>

写文章不是为了写出来给别人看才写的，把自己的学习过程记录下来，对学习做个总结，让自己记的更深些，以后还可以回过来看看；如果有人愿意看看的话也可以来个交流，分享分享大家不同的理解和经验..

Angular - - ngApp、ngBind、ngBindHtml、ngNonBindable的更多相关文章

  1. 002——Angular 目录结构分析、app.module.ts 详解、以及 Angular 中创建组件、组件 详解、 绑定数据

    一.目录结构分析 二. app.module.ts.组件分析 1.app.module.ts 定义 AppModule,这个根模块会告诉 Angular 如何组装该应用. 目前,它只声明了 AppCo ...

  2. JavaScript学习总结(一)——ECMAScript、BOM、DOM（核心、浏览器对象模型与文档对象模型）

    一.JavaScript简介 JavaScript是一种解释执行的脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它遵循ECMAScript标准.它的解释器被称为JavaScript引 ...

  3. Vue01 Vue介绍、Vue使用、Vue实例的创建、数据绑定、Vue实例的生命周期、差值与表达式、指令与事件、语法糖

    1 Vue介绍 1.1 官方介绍 vue是一个简单小巧的渐进式的技术栈,它提供了Web开发中常用的高级功能:视图和数据的解耦.组件的服用.路由.状态管理.虚拟DOM 说明:简单小巧 -> 压缩后 ...

  4. Nginx 部署、反向代理配置、负载均衡

    Nginx 部署.反向代理配置.负载均衡 最近我们的angular项目部署,我们采用的的是Nginx,下面对Nginx做一个简单的介绍. 为什么选择Nginx 轻:相比于Apache,同样的web服务 ...

  5. AngularJS路由系列(5)-- UI-Router的路由约束、Resolve属性、路由附加数据、路由进入退出事件

    本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router约束路由参数● UI-Router的Resolve属性● UI-Router给路由附加数据● UI- ...

  6. 微软、谷歌、亚马逊、Facebook等硅谷大厂91个开源软件盘点（附下载地址）

    开源软件中有大量专家构建的代码,大大节省了开发人员的时间和成本,热衷于开源的大厂们总是能够带给我们新的惊喜.2016年9月GitHub报告显示,GitHub已经有超过 520 万的用户和超 30 万的 ...

  7. Google、亚马逊、微软 、阿里巴巴开源软件一览

    Google.亚马逊.微软 .阿里巴巴开源软件一览 大公司为什么要发布开源项目?一是开源能够帮助他人更快地开发软件,促进世界创新,主要是社会价值层面的考虑.二是开源能够倒逼工程师写出更好的代码.三是开 ...

  8. Vue系列（一）：简介、起步、常用指令、事件和属性、模板、过滤器

    一. Vue.js简介 1. Vue.js是什么 Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e 是一个轻量级MVVM(Model-View-ViewModel)框架,和 ...

  9. Vue系列（三）：组件及数据传递、路由、单文件组件、vue-cli脚手架

    上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...

  10. Vue框架（一）——Vue导读、Vue实例（挂载点el、数据data、过滤器filters）、Vue指令(文本指令v-text、事件指令v-on、属性指令v-bind、表单指令v-model)

    Vue导读 1.Vue框架 vue是可以独立完成前后端分离式web项目的js框架 三大主流框架之一:Angular.React.Vue vue:结合其他框架优点.轻量级.中文API.数据驱动.双向绑定 ...

随机推荐

  1. zf-关于触摸屏子系统（查询机）的页面

    这个页面 一般是 touch/index.jsp 这个要记下来. -- 今天有个任务 是把查询机的UI页面给换掉

  2. 对于crontab定时任务不能自动执行的总结

    最近遇到了一些sh不能在crontab定时任务中自动执行的问题 期间由于不太了解,故走了一点弯路,现在总结下来可能第一次 进行设置遇到的问题.以绝后患!我所用过的操作系统为HP-unix&li ...

  3. JSONObject转换JSON之将Date转换为指定格式（转）

    项目中,经常会用JSONObject插件将JavaBean或List<JavaBean>转换为JSON格式的字符串,而JavaBean的属性有时候会有java.util.Date这个类型的 ...

  4. 基于Redis的在线用户列表解决方案

    前言: 由于项目需求,需要在集群环境下实现在线用户列表的功能,并依靠在线列表实现用户单一登陆(同一账户只能一处登陆)功能: 在单机环境下,在线列表的实现方案可以采用SessionListener来完成 ...

  5. Python之路： 面向对象

    Python是一门面向对象的语言,所以在Python中创建一个类和对象是很容易的.接下来了解一下面像对象的一些基本特征. 面向对象技术简介 类(class):描述具有相同的属性和方法的对象的集合.定义 ...

  6. 【BZOJ3524/2223】[Poi2014]Couriers 主席树

    [BZOJ3524][Poi2014]Couriers Description 给一个长度为n的序列a.1≤a[i]≤n.m组询问,每次询问一个区间[l,r],是否存在一个数在[l,r]中出现的次数大 ...

  7. mongoose的virtual属性

    设置vitual属性 personSchema.virtual('name.full').get(function () { return this.name.first + ' ' + this.n ...

  8. Tomcat 静态部署 二步特别注意

    一.修改server.xml 在Host 节点添加如下配置 <!-- path 为请求url地址 docBase 为项目文件绝对地址制定到WebContent根目录下 --> <Co ...

  9. sed基本用法

    sed命令基本用法sed是一个非交互式文本编辑器,它可以对文本文件和标准输入进行编辑,标准输入可以是来自键盘输入.文件重定向.字符串.变量.来自管道的文本等等.sed从文本的一个文本行或标准输入中读取 ...

  10. (简单) POJ 3279 Fliptile，集合枚举。

    Description Farmer John knows that an intellectually satisfied cow is a happy cow who will give more ...