什么是angularjs？

AngularJs 是一个 JavaScript 框架，是一个以 JavaScript 编写的库。
可以隐藏和显示、克隆和复制 HTML 元素，支持输入验证。

关于指令 -- 第一

angularjs 指令是以 ng 作为前置的 HTML 属性。
HTML5 允许扩展的（自制的）属性，以 data- 开头。
AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。

//例1：

     名字 : 
     Hello {{name}}

ng-app指令
初始化一个 angularjs 应用程序。
如果移除 ng-app 指令则会导致直接显示变量名，而不会去显示变量结果。
HTML 文档中只允许有一个 ng-app 指令，如果有多个 ng-app 指令，则只有第一个会被使用。
ng-app 后的内容是可选的，用于指定载应用模块的名称。
ng-modal指令
在这里把输入框中的值存储到变量 name 中。

//例2：

    姓名为 

结果是：John

ng-init指令
初始化 angularjs 应用程序变量。不过并不常使用其进行初始化变量。
ng-bind指令
显示变量值

//例3：

 
循环对象：

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

ng-rereat指令
遍历输出集合中的数据
~~//自定义指令------回头补上~~

关于AngularJS表达式 -- 第二

angularjs 表达式的作用和 ng-init 是相似的，它的格式是 {{变量名}}，参照指令-例1
{{运算表达式/变量名/字符串/对象/数组}}

关于 Score（作用域）-- 第三

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
Scope 是一个对象，可以当做控制器的参数传递。

//例1；

    
    {{greeting}}
        

 

结果是：输入框显示的字符，在点击按钮后会显示在下方，如：Hello Runoob!

ng-controller指令 -- 控制器
ng-controller 指令用于为应用添加控制器。
在控制器中，可以制作函数和变量，然后使用 scope 对象访问。
关于控制器的详细信息会在下一节介绍。
$Scope 对象
当在控制器中添加对象时，视图（HTML）可以获取到这些属性。
而且在视图中使用时，不需要添加$scope前缀，直接添加属性名即可，如{{carname}}。
Scope是一个JavaScript对象，带有属性和方法，可以在视图和控制器中调用。
scope和rootScope的作用范围
scope是angularJS中的作用域，搜索的时候，优先找自己的scope，
如果没有找到就沿着作用域链向上搜索，直至到达根作用域rootScope。
scope是html和单个controller之间的桥梁。
用rootscope定义的值，可以在各个controller中使用。

控制器 -- 第四

AngularJS 控制器是常规的 JavaScript 对象，用于控制数据。

//例1：


名: 

姓: 



姓名: {{fullName()}}




结果是：输出输入框内的 姓 名

ng-controller指令
该指令用于定义一个控制器，本例中的 personCtrl 是一个JavaScript函数。
$Scope对象用于调用控制器。其中firstname和lastname是属性，fullname是方法。
外部控制
一般在大型应用中，控制器会存储在外部文件里。调用方式如下

常用服务 -- 第五

例1：
 
两秒后显示信息:
{{myHeader}}

$timeout 访问在规定的毫秒数后执行指定函数。

$timeout 服务
延时执行函数，上例中延时2S执行下一步函数。

//例2：
 

现在时间是:

{{theTime}}



$interval 访问在指定的周期(以毫秒计)来调用函数或计算表达式。

$interval 服务
与$timeout 服务有所不同的是，$interval 服务是循环执行的。
即本例中每秒钟执行一次。即本例中每秒钟执行一次。

HTTP -- 第六

$http 用于读取远程服务器的数据。

使用格式：

// 简单的 GET 请求，可以改为 POST
$http({
    method: 'GET',
    url: '/someUrl'
}).then(function successCallback(response) {
        // 请求成功执行代码
    }, function errorCallback(response) {
        // 请求失败执行代码
});

简写方法
POST 与 GET 简写方法格式：

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

Select(选择框) -- 第七

我们可以使用ng-options和ng-repeat指令来创建一个下拉列表。

//例1：ng-options


选择网站:



你选择的是: {{selectedSite.site}}
网址为: {{selectedSite.url}}




结果是：下拉框可供选择，然后在下方显示对应网址

你选择的是: {{selectedSite}}

filter 过滤器根据表达式过滤不包含过滤器中的内容 // 查找name为iphone的行 {{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | filter:{'name':'iphone'} }}

// 根id降序排 {{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | orderBy:'id':true }} // 根据id升序排 {{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | orderBy:'id' }}

添加控制器方法如下： {{ firstName + " " + lastName }}

例2：单选框选择一个选项: Dogs Tutorials Cars Dogs Welcome to a world of dogs. Tutorials Learn from examples. Cars Read about cars. [ng-switch 指令根据单选按钮的选择结果显示或隐藏 HTML 区域。]

例3：下拉菜单选择一个选项: Dogs Welcome to a world of dogs. Tutorials Learn from examples. Cars Read about cars. ng-switch 指令根据下拉菜单的选择结果显示或隐藏 HTML 区域。

例4：表单 First Name: Last Name: form = {{user}} master = {{master}}

例5：验证实例用户名: 用户名是必须的。邮箱: 邮箱是必须的。非法的邮箱地址。

AngularJS_学习笔记

什么是angularjs？

关于指令 -- 第一

Hello {{name}}

关于AngularJS表达式 -- 第二

关于 Score（作用域）-- 第三

{{greeting}}

控制器 -- 第四

常用服务 -- 第五

{{myHeader}}

{{theTime}}

HTTP -- 第六

Select(选择框) -- 第七

你选择的是: {{selectedSite.site}}

你选择的是: {{selectedSite}}

你选择的是: {{selectedCar.brand}}

模型: {{selectedCar.model}}

颜色: {{selectedCar.color}}

过滤器 -- 第八

控制显示 -- 第九

Welcome

模块 -- 第十

表单和输入验证 -- 第十一

My Header

Dogs

Tutorials

Cars

Dogs

Tutorials

Cars

你可能感兴趣的:(AngularJS_学习笔记)