<!doctype html> 
<html  ng-app> 
<head> 
  <meta charset="UTF-8"> 
  <title>Hello AngularJS</title> 
  <script src="e:\angular.min.js"></script> 
</head> 
<body> 
   <div> 
<input  type="text" ng-model="yourname"  placeholder="Enter a name here" /> 
<h1>Hello, {{ yourname }} !</h1>  
   </div> 
</body> 
</html>

这是AngularJS的一个小例子，不过还是觉得好神奇，好高大上。算了，不扯这个没用的了，这个例子我也是遇到了点问题。最万恶的问题是路径问题。这个估计我是弄不明白了，引用路径的时候一定要用“\”，而不是“/”。还有，是angular.min.js而不是angularjs.min.js。其次就是html那里忘记打ng-app，忘了指定它是angularjs了。

AngularJS通过ng-directives扩展了HTML，并以ng作为前缀的HTML属性。（HTML5允许以data扩展属性，所以使用data-ng-） 
AngularJS表达式卸载双大括号内：｛｛expression｝｝ 
ng-app指令定义一个AngularJS应用程序。 
ng-init指令初始化应用程序数据 
ng-model指令把元素值绑定到应用中。 
ng-bind指令把应用程序数据绑定到HTML视图。 
ng-repeat重复一个HTML

<!doctype html> 
<html  ng-app> 
<head> 
  <meta charset="UTF-8"> 
  <title>ng-repeat  数组</title> 
  <script src="e:\angular.min.js"></script> 
</head> 
<body> 
   <div ng-app=""  ng-init="names=[{name:'John',sex:'M'},{name:'Rose',sex:'F'},{name:'Lucy',sex:'F'}]"> 
        <p>循环对象</p> 
        <ul> 
            <li  ng-repeat="x in names" > 
                {{x.name+", "+x.sex}} 
            </li> 
        </ul> 
   </div> 
</body> 
</html>

ng-controller指令定义了应用程序控制器 控制器是js对象，由js对象的构造函数创建。控制器的$scope是控制器所指向的应用程序/HTML元素。

<div ng-app="" ng-controller="personController">

名： <input type="text" ng-model="person.firstName"><br> 
姓： <input type="text" ng-model="person.lastName"><br> 
<br> 
姓名： {{person.fullName()}}

</div>

<script> 
function personController($scope) { 
    $scope.person = { 
        firstName: "John", 
        lastName: "Doe", 
        fullName: function() { 
            var x; 
            x = $scope.person; 
            return x.firstName + " " + x.lastName; 
        } 
    }; 
} 
</script>

AngularJS过滤器用于转换数据。 
currency    格式化数字为货币格式 
filter      从数组项中选择一个子集。输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型。 
lowercase   格式化字符串为小写 
orderBy     根据某个表达式排列数组 
uppercase   格式化字符串为大写

<div ng-app="" ng-controller="namesController"> 
<p>输入过滤：</p> 
<p><input type="text" ng-model="name"></p> 
<ul> 
  <li ng-repeat="x in names | filter:name | orderBy:'country'"> 
    {{ (x.name | uppercase) + ', ' + x.country }} 
  </li> 
</ul> 
</div>

ng-disabled指令直接绑定应用程序数序到HTML的disabled属性。 
<div ng-app=""> 
<p> 
<button ng-disabled="mySwitch">点我！</button> 
</p> 
<p> 
<input type="checkbox" ng-model="mySwitch">按钮 
</p> 
</div>

ng-show显示或隐藏一个HTML元素。  true  false 
ng-click指令定义了一个AngularJS单击事件 
控制器污染了全局命名空间，因此，将所有的控制器可以放置一个模块中，保持全局命名空间的整洁。 
<div ng-app="myApp" ng-controller="myCtrl"> 
{{ firstName + " " + lastName }} 
</div> 
<script> 
var app = angular.module("myApp", []); 
app.controller("myCtrl", function($scope) { 
    $scope.firstName = "John"; 
    $scope.lastName = "Doe"; 
}); 
</script>

AngularJS基本指令的更多相关文章

  1. AngularJS之指令

    紧接上篇博客“初探AngularJS” 一.前言 在AngularJS中指令尤为重要且内容庞多,固单独提炼出来,梳理一番.如有错误,请不吝讲解. 好了,言归正传,让我们一起走进Angular指令的世界 ...

  2. 带你走近AngularJS - 体验指令实例

    带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...

  3. AngularJs自定义指令详解（2） - template

    一些用于定义行为的指令,可能不需要使用template参数. 当指定template参数时,其值可以是一个字符串,表示一段HTML文本,也可以是一个函数,这函数接受两个参数:tElement和tAtt ...

  4. AngularJs自定义指令详解（1） - restrict

    下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布 ...

  5. angularJS自定义指令间的“沟通”

    由此例子我们可以看出,angularJS使用指令时link的执行顺序<html> <head> <meta charset="utf-8"/> ...

  6. AngularJS: 自定义指令与控制器数据交互

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 学习AngularJs:Directive指令用法

    跟我学AngularJs:Directive指令用法解读(上) http://blog.csdn.net/evankaka/article/details/51232895 跟我学AngularJs: ...

  8. 《AngularJS》--指令的相互调用

    转载自http://blog.csdn.net/zhoukun1008/article/details/51296692 人们喜欢AngularJS,因为他很有特色,其中他的指令和双向数据绑定很吸引着 ...

  9. 学习AngularJs:Directive指令用法（完整版）

    这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下   本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...

  10. 浅析AngularJS自定义指令之嵌入(transclude)

    AngularJS自定义指令的嵌入功能与vue的插槽十分类似,都可以实现一些自定义内容展现.在开始之前先简单介绍下自定义指令的transclude属性和AngularJS的内置指令ng-transcl ...

随机推荐

  1. url重写后发布出错问题

    iis7 配置urlrewriter重写失效的问题 在IIS7下,如果使用微软的 URLRewriter 重写控件则需要在WEB.CONFIG中配置以下信息 第一个配置: <configSect ...

  2. JavaWeb基础: 会话技术简介

    会话技术 用户使用Web应用的过程实际是调用了一系列的Servlet来组合处理请求,从而完成整个业务流.不同Servlet组合起来为用户服务的时候就会遇到一个数据共享和传输的问题,如何让多个Servl ...

  3. hdu----(4301)Divide Chocolate(状态打表)

    多校综合排名前25名的学校请发送邮件到HDUACM@QQ.COM,告知转账信息(支付宝或者卡号) Divide Chocolate Time Limit: 2000/1000 MS (Java/Oth ...

  4. JS回调函数(callback)

    在使用Jquery的时候,用到Callback(),回调函数的概念.而且很多. 比如: $.ajax({ url:"test.json", type: "GET" ...

  5. Xcode8 及iOS10适配问题汇总

    上点干货,目前得知的一些bug解决汇总:iOS10相册相机闪退bughttp://www.jianshu.com/p/5085430b029fiOS 10 因苹果健康导致闪退 crashhttp:// ...

  6. 查看Linux硬件配置信息

    在网上找了N久,发现了一篇不错的文档,转载一下: 1.查看机器所有硬件信息: dmidecode |more dmesg |more 这2个命令出来的信息都非常多,所以建议后面使用"|mor ...

  7. Objective-C：Foundation框架-概述

    iOS的整体架构(以iOS8为例)图如下: 从Cocoa Touch到Core OS下面四层包含了开发iOS应用程序所用到的所有API(第三方框架也是基于这几个层的).每个层又都包含了许多框架.框架就 ...

  8. JDE处理选项

    处理选项为JDE的一种数据结构,命名方式如下: The name of a data structure can be a maximum of characters-only if you begi ...

  9. 使用openssl库实现RSA、AES数据加密

         openssl是可以很方便加密解密的库,可以使用它来对需要在网络中传输的数据加密.可以使用非对称加密:公钥加密,私钥解密.openssl提供了对RSA的支持,但RSA存在计算效率低的问题,所 ...

  10. C#基础学习文章导航

    第一部分:入个门 C#入门篇-1:HelloWorld的类 C#入门篇-2:什么是变量 C#入门篇-3:数据类型及转换 C#入门篇-4:使用运算符 第二部分:流程控制语句 C#入门篇5-1:流程控制语 ...