一.基本指令

1、ng-app=" " 指令初始化一个 AngularJS 应用程序,定义angularJS的使用范围;

tips:一个页面里创建多个 ng-app 手动加载即可:

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

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

angular.bootstrap(document.getElementById("app2"), ['app2']);

2、ng-init="变量=值;变量='值'"  初始化变量的值，有多个变量时，中间用分号隔开；

3、ng-model="变量"指令把元素值（比如输入域的值）绑定到应用程序；

验证用户输入:

<form ng-app="" name="myForm">


Email:     <input type="email" name="myAddress" ng-model="text">

<span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>

</form>

ng-model 指令根据表单域的状态添加/移除以下类：

  • ng-touched    //点击
  • ng-untouched
  • ng-valid    //验证通过
  • ng-invalid
  • ng-dirty    //修改
  • ng-pristine

4、ng-bind="变量"  绑定变量名，获取该变量的数据。这里的变量就是第3条的变量名。但是一般都用双重花括号来获取变量的值，比如：{{变量}}。

5、ng-repeat 指令会重复一个 HTML 元素：

<div ng-app="" ng-init="names=[ {name:'Jani',country:'Norway'}, {name:'Hege',country:'Sweden'}, {name:'Kai',country:'Denmark'}]">


<p>循环对象:</p>

<ul>

<li ng-repeat="x in names">

{{ x.name + ', ' + x.country }}

</li>

</ul>

</div>

6.自定义指令:



<body ng-app="myApp">


<r-directive></r-directive>  //作为元素名使用,还可以通过类名,属性,注释

<script>

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

app.directive("rDirective", function() {

return {  template : "<h1>自定义指令!</h1>"  };

});

</script>

</body>

限制使用:

restrict 值可以是以下几种:

  • E 作为元素名使用
  • A 作为属性使用
  • C 作为类名使用
  • M 作为注释使用

restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。

二.AngularJS支持的数据

数字,字符串,数组,对象

与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。

AngularJS 表达式写在双大括号内：{{ expression }}。

AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。

tips:

HTML5 允许扩展的（自制的）属性，以 data- 开头。

AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。

使用 ng-init 不是很常见。您将在控制器一章中学习到一个更好的初始化数据的方式。

三.AngularJS scope(作用域)

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。

Scope 是一个对象，有可用的方法和属性。

Scope 可应用在视图和控制器上。



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


<h1>姓氏为 {{lastname}} 家族成员:</h1>

<ul>

<li ng-repeat="x in names">{{x}} {{lastname}}</li>

</ul>

</div>

<script>

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

app.controller('myCtrl', function($scope, $rootScope) {

$scope.names = ["Emil", "Tobias", "Linus"];

$rootScope.lastname = "Refsnes"; });

</script>

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


<input ng-model="name">

<h1>{{greeting}}</h1>

<button ng-click='sayHello()'>点我</button>

</div>

<script>

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

app.controller('myCtrl', function($scope) {

$scope.name = "Runoob";

$scope.sayHello = function() {

$scope.greeting = 'Hello ' + $scope.name + '!';

};

});

</script>

四.AngularJS 控制器



<div ng-app="myApp" ng-controller="personCtrl">


名: <input type="text" ng-model="firstName"><br>

姓: <input type="text" ng-model="lastName"><br>

姓名: {{fullName()}}

</div>

<script>

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

app.controller('personCtrl', function($scope) {

$scope.firstName = "John";

$scope.lastName = "Doe";

$scope.fullName = function() {

return $scope.firstName + " " + $scope.lastName;

}

});

</script>

五.AngularJS 过滤器:过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。

currency:格式化数字为货币格式。
filter:从数组项中选择一个子集。
lowercase:格式化字符串为小写。
uppercase:格式化字符串为大写。
orderBy:根据某个表达式排列数组。


<div ng-app="myApp" ng-controller="namesCtrl">


<p>输入过滤:</p>

<p><input type="text" ng-model="test"></p>

<ul>

<li ng-repeat="x in names | filter:test | orderBy:'country'">  //按城市首字母排列同时支持输入过滤

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

</li>

</ul>

</div>

<script>

angular.module('myApp', []).controller('namesCtrl', function($scope) {

$scope.names = [ {name:'Jani',country:'Norway'},

{name:'Hege',country:'Sweden'},

{name:'Kai',country:'Denmark'}

];

});

</script>

六.AngularJS服务

在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用

$location.absUrl():返回当前页面的 URL 地址

$http: 服务向服务器发送请求，应用响应服务器传送过来的数据

$http.get('/someUrl', config).then(successCallback, errorCallback);

$http.post('/someUrl', data, config).then(successCallback, errorCallback);
// 简单的 GET 请求，可以改为 POST

$http({

    method: 'GET',

    url: '/someUrl'

}).then(function successCallback(response) {

        // 请求成功执行代码

    }, function errorCallback(response) {

        // 请求失败执行代码

}); 

$timeout(function(){},2000) 服务对应了 JS window.setTimeout 函数

$interval(function(){},1000)服务对应了 JS window.setInterval 函数。

创建自定义服务:

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


<p>255 的16进制是:</p>

<h1>{{hex}}</h1>

</div>

<p>自定义服务，用于转换16进制数：</p>

<script>


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

app.service('hexafy', function() {

this.myFunc = function (x) {

return x.toString(16);

} });

app.controller('myCtrl', function($scope, hexafy) {

$scope.hex = hexafy.myFunc(255);

});

</script>

AngularJS学习笔记(一)的更多相关文章

  1. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

  2. AngularJs学习笔记--expression

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...

  3. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

  4. AngularJs学习笔记--Guide教程系列文章索引

    在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看 ...

  5. AngularJs学习笔记--bootstrap

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

  6. AngularJs学习笔记--html compiler

    原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...

  7. AngularJs学习笔记--concepts(概念)

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...

  8. AngularJS学习笔记2——AngularJS的初始化

    本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...

  9. AngularJs学习笔记--Using $location

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...

  10. AngularJs学习笔记--unit-testing

    原版地址:http://docs.angularjs.org/guide/dev_guide.unit-testing javascript是一门动态类型语言,这给她带来了很强的表现能力,但同时也使编 ...

随机推荐

  1. linux shell 指令搜索顺序

    在linux shell 中输入一个命令,如果有多个同名指令,shell需要按照一定规则去取优先级高的一个执行,shell命令的搜索顺序为: 1.别名,使用alias创建的命令. 2.关键字,如if, ...

  2. 《Linux内核原理与分析》第二周作业

    反汇编一个简单的C程序 1.实验要求 使用: gcc –S –o test.s test.c -m32 命令编译成汇编代码,对汇编代码进行分析总结.其中test.c的具体内容如下: int g(int ...

  3. 安卓控制LED驱动编写

    开发平台 * 芯灵思SinlinxA33开发板 淘宝店铺: https://sinlinx.taobao.com/ 嵌入式linux 开发板交流 QQ:641395230 打开Android Stud ...

  4. 记账本NABCD分析

    学生记账本NABCD分析 N(Need,需求) 随着我们进入大学开始逐步的扩大自己的消费水平,而我们每天无法准确的记住一笔一笔的消费记录.常常,每一个月末时我们在宿舍楼道听到不少学生抱怨这个月怎么花钱 ...

  5. 第十二章 NIO

    12.NIO 12.1 Java NIO 概述 1课时 12.2 Java NIO.2 之Path.Paths 与 Files 的使用 1课时 12.3 自动资源管理 1课时 12.4 缓冲区(Buf ...

  6. zip()函数，max()和min()，built-in function，import模块，read()，readlines()，write()，writelines()，with..as..文件处理方式

    zip()函数:将可迭代对象作为参数,将对象中的对应元素打包成一个个元组. #map()普通的输出例子 print(list(zip(('a','n','c'),(1,2,3)))) print(li ...

  7. Mysql建了索引查询很慢

    遇到一个问题,有几个结构一个的查询,表的索引建的也一样,但是有的查询很快,有的却很慢,需要半分钟以上才能执行完. 查看执行计划,并没有什么区别.找了很久原因才发现是主查询和子查询所涉及的表的字符编码不 ...

  8. springMVC框架返回JSON到前端日期格式化

    在Controller类中,需要返回JSON的方法上加上注释@ResponseBody,这是必须的. 然后spring-servlet.xml配置如下: <?xml version=" ...

  9. 学习笔记之Model selection and evaluation

    学习笔记之scikit-learn - 浩然119 - 博客园 https://www.cnblogs.com/pegasus923/p/9997485.html 3. Model selection ...

  10. perl二维数组

    [转载]出处:http://www.cnblogs.com/visayafan/ 1 数组与引用 2 声明的区别 3 访问的区别 4 添加行元素 5 添加列元素 6 访问与打印 6.1 运算符优先级 ...