`

AngularJS简介

阅读更多

AngularJS简介

AngularJS是一个JavaScript矿建,他是一个JavaSscript编写的库。可以通过<script>标签添加到HTML页面。

AngularJS是通过指令扩展了HTML,且通过表达式绑定数据到HTML。

地址:<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

各个 angular.js 版本下载: https://github.com/angular/angular.js/releases

 

AngularJS通过ng-directives扩展了HTML。

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

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

ng-model 指令也可以:

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

  为应用程序数据提供状态(invalid、dirty、touched、error)。

  为 HTML 元素提供 CSS 类。

  绑定 HTML 元素到 HTML 表单

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

ng-init 指令初始化 AngularJS 应用程序变量。

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

HTML5允许扩展的(自制的)属性,以data-开头。

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

 

什么是AngularJS?

AngularJS 使得开发现代的单一页面应用程序(SPAs:Single Page Applications)变得更加容易。

AngularJS 把应用程序数据绑定到 HTML 元素。

AngularJS 可以克隆和重复 HTML 元素。

AngularJS 可以隐藏和显示 HTML 元素。

AngularJS 可以在 HTML 元素"背后"添加代码。

AngularJS 支持输入验证。

 

AngularJS 表达式

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

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

AngularJS 将在表达式书写的位置"输出"数据。

AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字、运算符和变量。

实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

 

AngularJS 应用

AngularJS 模块(Module) 定义了 AngularJS 应用。

AngularJS 控制器(Controller) 用于控制 AngularJS 应用。

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

 

AngularJS 表达式 与 JavaScript 表达式

类似于 JavaScript 表达式,AngularJS 表达式可以包含字母,操作符,变量。

与 JavaScript 表达式不同,AngularJS 表达式可以写在 HTML 中。

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

与 JavaScript 表达式不同,AngularJS 表达式支持过滤器。

 

创建自定义的指令

你可以使用 .directive 函数来添加自定义的指令。

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

使用驼峰法来命名一个指令, runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:

<body ng-app="myApp">

<runoob-directive></runoob-directive>

<script>

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

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

    return {

        template : "<h1>自定义指令!</h1>"

    };

});

</script>

</body>

可以通过以下方式来调用指令:元素名、属性、类名、注释

restrict 属性设置指令只能通过某些方式来调用

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

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

    return {

        restrict : "A",

        template : "<h1>自定义指令!</h1>"

    };

});

restrict 值可以是:E 作为元素名使用、A 作为属性使用、C 作为类名使用、M 作为注释使用

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

 

CSS 类

ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类:ng-empty、ng-not-empty、ng-touched、ng-untouched、ng-valid、

ng-invalid、ng-dirty、ng-pending、ng-pristine

 

AngularJS Scope(作用域)

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

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

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

 

AngularJS 应用组成如下:

 View(视图), 即 HTML。

 Model(模型), 当前视图中可用的数据。

 Controller(控制器), 即 JavaScript 函数,可以添加或修改属性。

所有的应用都有一个 $rootScope(根作用域),它可以作用在 ng-app 指令包含的所有 HTML 元素中。

$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值,可以在各个 controller 中使用。

 

AngularJS  过滤器

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

AngularJS 过滤器可用于转换数据:

currency 格式化数字为货币格式。

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

lowercase 格式化字符串为小写。

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

uppercase 格式化字符串为大写。

 

向指令添加过滤器

过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中。

orderBy 过滤器根据表达式排列数组:

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

<ul>

  <li ng-repeat="x in names | orderBy:'country'">

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

  </li>

</ul>

<div>

 

过滤输入

输入过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中,该过滤器后跟一个冒号和一个模型名称。

filter 过滤器从数组中选择一个子集:

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

<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>

 

分享到:
评论

相关推荐

    AngularJs简介及例子

    AngularJS,是由Google维护的一个开源JavaScript框架,主要用于构建单页应用程序(Single-Page Applications, SPA)。这个框架将MVC(模型-视图-控制器)架构模式引入到前端开发中,极大地提高了开发效率和代码可...

    AngularJS高级程序设计

    第1部分为第1章到第8章,包括AngularJS简介,以及HTML、CSS和JavaScript的基础知识。第2部分为第9章到第17章,引导读者熟悉AngularJS库的各种特性,从对一个AngularJS应用程序中各种不同组件的概览开始,然后依次...

    angularjs-intro:angularjs简介

    **AngularJS简介** AngularJS,通常简称为Angular,是由Google维护的一个开源JavaScript框架,用于构建单页应用程序(SPA)。这个框架极大地简化了前端开发,尤其是处理动态内容和数据绑定。AngularJS的核心理念是...

    什么是 AngularJS?AngularJS简介

    AngularJS简介,本文讲解了AngularJS方方面面的基础知识,AngularJS 是一个为动态WEB应用设计的结构框架。它能让你使用HTML作为模板语言,通过扩展HTML的语法,让你能更清楚、简洁地构建你的应用组件,需要的朋友可以...

    Angularjs_in_action

    #### 一、AngularJS简介 AngularJS是一款由Google维护的开源JavaScript框架,旨在通过HTML扩展来解决单页面应用(SPA, Single Page Application)开发中的常见问题。它允许开发者以声明式的方式编写代码,使得前端...

    angularJSBasicsHandout10:angularJS简介-100行代码

    在"angularJSBasicsHandout10:angularJS简介-100行代码"中,我们将深入理解这个框架的基本概念和核心特性。 首先,AngularJS的核心特性之一是数据绑定。它允许开发者在视图和模型之间建立直接的连接,使得当模型...

    Learning AngularJS.pdf (0分下载网)

    ### AngularJS简介 AngularJS是一个开源的前端JavaScript框架,用于构建动态Web应用程序。它由Google维护和支持,首次发布于2010年。AngularJS通过扩展HTML来提供一种更为简洁的方式来表达应用逻辑,并且它还通过...

    angularJSBasicsHandout05:angularJS简介-100行代码

    **AngularJS基础知识手册05:AngularJS简介-100行代码** AngularJS,由Google维护的开源JavaScript框架,是构建动态Web应用的强大工具。它通过MVC(模型-视图-控制器)架构模式简化了前端开发,尤其在处理数据绑定...

    AngularJS-intro:AngularJS 简介中使用的材料。 在 Unitec SPS 设施中进行。 2月6日和2月13日

    **AngularJS 简介** AngularJS 是一个强大的前端JavaScript框架,由Google维护,用于构建动态Web应用程序。它通过提供数据绑定和依赖注入等特性,极大地简化了开发过程,使得开发者能够更高效地构建功能丰富的单页...

    angularjs+boorstrap视频教程

    1. **AngularJS简介**: - **定义**:AngularJS是一种开源的JavaScript框架,由Google维护,用于简化Web应用的开发过程。 - **版本**:AngularJS通常指的是1.x版本,与后来的Angular 2+有所不同。 2. **核心特性*...

    AngularJS 中文版

    #### 一、AngularJS简介 - **定义与特点**:AngularJS是一种开源的JavaScript框架,由Google维护。它主要用于简化Web应用程序的开发过程,提供了一种更加灵活和智能化的方式来构建动态网页。AngularJS支持客户端...

    AngularJS的tree控件

    1. **AngularJS简介** AngularJS由Google维护,它通过双向数据绑定、依赖注入和指令等特性简化了Web开发。在这个项目中,我们利用AngularJS的指令系统来构建自定义的tree控件。 2. **自定义指令** 在AngularJS中...

    AngularJS 学习资料

    #### 一、AngularJS简介与重要性 AngularJS是一种广泛使用的开源前端JavaScript框架,由Google维护。它主要用于构建单页面应用(SPA),通过简化客户端和服务器之间的交互来提高用户体验。AngularJS的核心优势在于...

    angular-978-1-7835-5421-8:AngularJS 简介 [视频]

    **AngularJS简介 [视频]**\n\nAngularJS,作为一个强大的前端JavaScript框架,由Google维护,是Web开发领域的重要工具之一。这个【视频】教程将深入介绍AngularJS的基础知识及其核心特性,帮助开发者快速掌握这一...

    《AngularJS即学即用》【书本源码下载】

    #### 一、AngularJS简介 AngularJS是一种广泛使用的JavaScript框架,它由Google维护,主要用于构建动态网页应用。通过AngularJS,开发者可以利用HTML作为模板语言,并扩展HTML的标签功能来表达应用的组件结构。...

    angularjs前端框架

    #### 一、AngularJS简介 AngularJS是一个开源的JavaScript框架,由Google维护和支持。它旨在通过HTML扩展来解决Web应用开发中的难题,并简化客户端应用的开发过程。AngularJS的核心特性包括数据绑定、依赖注入、...

    MovieCat用angularjs写的一个前端网页

    一、AngularJS简介 AngularJS是由Google维护的开源JavaScript框架,它通过MVC(Model-View-Controller)架构模式,使得前端开发更加高效。其核心特性包括数据双向绑定、依赖注入、指令系统以及模块化等,极大地简化...

    AngularJS学习笔记

    #### 一、AngularJS简介 AngularJS是由Google推出的一款JavaScript库,虽然在本文档中作者将其称为“工具”,但实际上它更接近于一个完整的前端开发框架。AngularJS的设计理念在于提供一种全新的应用组织与开发方式...

Global site tag (gtag.js) - Google Analytics