AngularJs基础学习-1

简介

1、AngularJs 是一个JS框架,是以一个JavaScript编写的库,是以一个JS文件形式发布的。通过标签添加到HTML页面,通过指令扩展了HTML,通过表达式绑定数据到HTML。

2、AngularJs通过directives扩展了HTML

ng-app: 指令定义一个ng应用程序。

ng-model: 指令把元素值(如输入域的值)绑定到应用程序数据。

ng-bind: 指令把应用程序数据绑定到HTML视图(innerHTML)。

当网页加载完毕,AngularJs自动开启。

3、什么是AngularJs

AngularJs使开发现代的单一页面应用程序(SPAS)更加容易。

①、AngularJs可以把应用程序数据绑定到HTML上;

②、AngularJs可以克隆和重复HTML元素;

③、AngularJs可以隐藏和显示HTML元素;

④、AngularJs可以在HTML元素背后添加代码;

⑤、AngularJs支持输入验证;

4、AngularJs 指令是以‘ng’ 作为前缀的HTML属性

ng-init: 指令初始化ng应用程序变量;

表达式

1、定义:

AngularJs表达式写在 {}大括号内,表达式把数据绑定到HTML上,与ng-bind指令异曲同工;

AngularJs在表达式书写的位置 “输出”数据;

AngularJs表达式可以包含文件、运算符和变量。

例如:{}、{}

2、表达式:

ng数字 : ng-init="quantity=1;cost=5"

ng字符串:ng-init="firstName='John';lastName='Li' "

ng对象:ng-init="person=" 调用==》person.firstName

ng数组:ng-init="point=[1,2,3,4]" 调用==》point[2]

ng对象数组: ng-init = "names=[,,{name:'xiaoming',age:35}]"

3、AngularJs表达式和JavaScript表达式的区别:

①、AngularJs表达式可以写在HTML中;

②、AngularJs表达式不支持条件判断、循环及异常;

③、AngularJs表达式支持过滤器;

应用

①、AngularJs模块(module):定义了AngularJs应用;

②、AngularJs控制器(controller):用于控制AngularJs应用;

③、ng-app :指令指明了应用;

注意:

①、ng-app是一个特殊的指令,一个HTML文档中只出现一次,如果出现多次也只有第一个起作用,ng-app可以出现在HTML文档的任何一个元素上。

②、一个页面里创建多个ng-app手动加载即可。(需要在应用上添加id属性)

var app1 = angular.module("myapp1",[]);//自动加载

var app2 = angular.module("myapp2",[]);//手动加载第一步

angular.bootstrap(document.getElementById('idname'),['app2']);//手动加载第二步

③、一个应用(ng-app)内可以有多个控制台。

指令

1、AngularJs是通过‘指令’的新属性来扩展HTML,包括内置指令和自定义指令。

2、数据绑定:{} 表达式是一个AngularJs数据绑定表达式

{} 是通过 ng-model="firstName" 进行数据同步(数据的双向绑定)

3、重复HTML元素

ng-repeat: 指令会重复一个HTML元素,该指令用在一个对象数组上,对于集合中(数组中)的每个项会克隆一次HTML元素。

ng-repeat = "x in name" ==>{}

4、创建自定义指令

我们可以通过.drective函数来创建自定义指令;

要调用自定义指令,HTML元素上需要添加自定义指令名;

使用驼峰法来命名一个指令,在使用时用 ‘-’ 分隔。

示例:

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

app1.directive('runoobDirective',function(){//使用驼峰法来命名一个指令

return{

template: "这里是自定义指令"

};

});

可以通过如下方式来调用指令:

①、元素名

②、属性

③、类名

④、注释

5、使用限制

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

app1.directive('runoobDirective',function(){//使用驼峰法来命名一个指令

return{

restrict :'A',//限制指令只能通过属性的方式来调用

template: "这里是自定义指令"

};

});

restrict 值可以是以下几种:(默认值是EA,可以通过元素名和属性名来调用)

E:作为元素名使用

A:作为属性名使用

C:作为类名使用

M:作为注释使用

模型

1、ng-model :用于绑定应用程序数据到HTML控制器,可将输入域的值与AngularJs创建的变量绑定。作用域表单元素,对普通元素无效,支持双向绑定。

2、验证用户输入

ng-show: 该属性值返回为true的情况下元素显示。

3、应用状态

①、为应用程序数据提供类型验证(number、email、required)

②、为应用程序数据提供状态(invalid、dirty、touched、error){}myForm 和myAdd均为name值

③、为HTML元素提供Css类 如input.ng-invalid

④、绑定元素到表单】

4、ng-model指令根据表单域的状态添加/移出以下类:

ng-empty:

ng-not-empty:

ng-touched:

ng-untouched:

ng-valid: 通过验证的表单(验证成功);

ng-invalid: 未通过验证的表单;

ng-dirty: 布尔值,表示用户是否修改表单,如果修改过为true。

ng-pengding:

ng-pristine: 布尔值,表示验证控件是否被修改,如果被修改为true。

AngularJs Scope(作用域)

1、Scope 是应用在视图(HTML)和控制器(JS)之间的纽带。

是一个对象,有可用的方法和属性;可应用在视图和控制器上。

当在控制器添加$scope对象是,视图可以获取这些属性,视图获取属性不需要添加$scope前缀,只需要添加属性名即可,如{}

2、概述:

AngularJs应用组成如下:

①、view(视图),即HTML

②、model(模型),当前视图中可用的数据

③、controller(控制器),即JS函数,可以添加或修改属性。

3、$Scope作用范围:

根作用域:所有的应用都有一个$rootScope,它可以作用在ng-app指令包含的所有HTML元素中,$rootScope可作用于整个应用中,是各个controller中$scope的桥梁。用rootscope定义的值,可以在各个controller中使用

①、$rootScope全局对象的属性可以在所有子域中访问,子作用域相互无法访问对方的私有变量,这一点与JS的函数作用域完全一致。

②、后边的控制器内定义的全局$rootScope变量,在它前面的控制器中访问不到。

控制器

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

控制器控制AngularJs应用程序数据,是常规的JS对象,由标准的JS对象的构造函数创建

2、AngularJs 使用$scope对象作为为参数来调用控制器,控制器也有属性和方法。

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

$scope.firstName= 'John';

});

3、外部文件中的控制器

4、model中可以有多个controller

过滤器

1、过滤器可以使用一个管道字符(|)和一个过滤器添加到指令和表达式中。

2、过滤器如下:

currency: 格式化数字为货币格式;

filter: 从数组项中选择一个子集;

lowercase: 格式化字符串为小写;

orderBy: 根据某个表达式排列数组;

uppercase:

3、表达式中添加过滤器{}

4、想指令中添加过滤器

{}

5、过滤输入: ‘|’ +过滤器 +‘:’ +模型名称

如:ng-repeat="x in names | filter:text | orderBy:‘country’ "

6、自定义过滤器

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180404G1UG7200?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券