anjular JS

最新推荐文章于 2020-02-15 18:58:12 发布

_沐凡

最新推荐文章于 2020-02-15 18:58:12 发布

阅读量353

点赞数

分类专栏：前端开发基础文章标签： angularJS

本文链接：https://blog.csdn.net/xiechunhua_Blog/article/details/80935791

版权

前端开发基础专栏收录该内容

7 篇文章 0 订阅

订阅专栏

当网页加载完毕，AngularJS 自动开启，AngularJS 指令是以 ng 作为前缀的 HTML 属性。

ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序的"所有者",即ng-app=" " 定义angularJS的使用范围；
（
1.ng-app是一个特殊的指令，一个HTML文档只出现一次，如出现多次也只有第一个起作用；ng-app可以出现在html文档的任何一个元素上。

2.ng-app作用：告诉子元素指令是属于angularJs。

3.ng-app的值可以为空（练习），项目中一定要赋值，后面所说的模块。

4、一个页面多个ng-app时：//页面加载完成后,再加载模块
angular.element(document).ready(function() {
//手动加载myApp2 ng-app
angular.bootstrap(document.getElementById("myApp2"), ['myApp2'])
})

）

ng-model="name" 指令把输入域的值绑定到应用程序变量 name。
（
ng-model 指令绑定 HTML 元素到应用程序数据。

ng-model 指令也可以：为应用程序数据提供类型验证（number、email、required）。
为应用程序数据提供状态（invalid、dirty、touched、error）。
为 HTML 元素提供 CSS 类。
绑定 HTML 元素到 HTML 表单。
）

ng-bind="name" 指令把应用程序变量 name 绑定到某个段落的 innerHTML，绑定变量名，获取该变量的数据。但是一般都用双重花括号来获取变量的值{{变量}}。
当ng-bind和{{}}同时使用时，ng-bind绑定的值覆盖该元素的内容。

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

ng-repeat 指令对于集合中（数组中）的每个项会克隆一次 HTML 元素

AngularJS 模块（Module）定义了 AngularJS 应用。var app = angular.module('myApp', []);

AngularJS 控制器（Controller）用于控制 AngularJS 应用。

ng-app指令指明了应用, ng-controller 指明了控制器。

ng-valid:布尔型属性，它指示表单是否通过验证。如果表单当前通过验证，他将为true

ng-dirty:布尔值属性，表示用户是否修改了表单。如果为 ture，表示有修改过；false 表示修没有修改过

ng-valid-[key]: 由$setValidity添加的所有验证通过的值

ng-invalid-[key]: 由$setValidity添加的所有验证失败的值

ng-dirty: 控件输入值已变更

ng-touched: 控件已失去焦点

ng-untouched: 控件未失去焦点

ng-pristine:布尔值属性，表示用户是否修改了表单。如果为ture，表示没有修改过；false表示修改过

ng-controller 指令定义了应用程序控制器。

AngularJS 服务(Service)：比如 $location 服务，它可以使用 DOM 中存在的对象，类似 window.location 对象，但 window.location 对象在 AngularJS 应用中有一定的局限性。

AngularJS 会一直监控应用，处理事件变化， AngularJS 使用 $location 服务比使用 window.location 对象更好。

$timeout 可用于设置单次或多次延时服务;

$interval 可用于设置始终运行的延时服务。

http 是 AngularJS 应用中最常用的服务。服务向服务器发送请求，应用响应服务器传送过来的数据。

AngularJS $http 是一个用于读取web服务器上数据的服务。

$http.get(url) 是用于读取服务器数据的函数。

读取json数据 sites：
var app = angular.module('myApp', []);

app.controller('siteCtrl', function($scope, $http) {
$http({
method: 'GET',
url: 'https://www.runoob.com/try/angularjs/data/sites.php'
}).then(function successCallback(response) {
$scope.names = response.data.sites;
}, function errorCallback(response) {
// 请求失败执行代码
});

});

ng-repeat 指令是通过数组来循环 HTML 代码来创建下拉列表，但 ng-options 指令更适合创建下拉列表，它有以下优势：

使用 ng-options 的选项是一个对象， ng-repeat 是一个字符串。

AngularJS 应用架构:
以上实例是一个完整的 AngularJS 单页Web应用（single page web application，SPA）。
<html> 元素包含了 AngularJS 应用 (ng-app=)。
<div> 元素定义了 AngularJS 控制器的作用域 (ng-controller=)。
在一个应用可以有很多控制器。应用文件(my...App.js) 定义了应用模型代码。
一个或多个控制器文件 (my...Ctrl.js) 定义了控制器代码。

AngularJS 工作流程：
ng-app 指令位于应用的根元素下。
对于单页Web应用（single page web application，SPA），应用的根通常为 <html> 元素。
一个或多个 ng-controller 指令定义了应用的控制器。每个控制器有他自己的作用域：: 定义的 HTML 元素。
AngularJS 在 HTML DOMContentLoaded 事件中自动开始。如果找到 ng-app 指令， AngularJS 载入指令中的模块，并将 ng-app 作为应用的根进行编译。
应用的根可以是整个页面，或者页面的一小部分，如果是一小部分会更快编译和执行。