CodeNodeX AI
Sign upWrite

Learning Path

AngularJS tutorials

Browse tutorials and chapters for AngularJS.

Frontend

HTML, CSS, JavaScript, browser APIs, frontend frameworks, and UI engineering.

Tutorials

78

TAXONOMYFrontendFetched/AngularJS

AngularJS 教程

AngularJS 教程 AngularJS 通过新的属性和表达式扩展了 HTML。 AngularJS 可以构建一个单一页面应用程序（SPAs：Single Page Applications）。 AngularJS 学习起来非常简单。 现在开始学习 AngularJS！ 每个章节都有相应的实例 在每个章节中，您可以在线编辑实例，然后点击按钮查看结果。 AngularJS 实例 <!DOCTYP..

TUTORIALFrontendFetched/AngularJS

AngularJS 动画

AngularJS 动画 AngularJS 提供了动画效果，可以配合 CSS 使用。 AngularJS 使用动画需要引入 angular-animate.min.js 库。 还需在应用中使用模型 ngAnimate： 什么是动画？ 动画是通过改变 HTML 元素产生的动态变化效果。 实例 勾选复选框隐藏 DIV: <body ng-app='ngAnimate'&..

TUTORIALFrontendFetched/AngularJS

AngularJS API

AngularJS API API 意为 Application Programming Interface（应用程序编程接口）。 AngularJS 全局 API AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合，如： 比较对象 迭代对象 转换对象 全局 API 函数使用 angular 对象进行访问。 以下列出了一些通用的 API 函数： API 描述 ..

TUTORIALFrontendFetched/AngularJS

AngularJS 应用

AngularJS 应用 现在是时候创建一个真正的 AngularJS 单页 Web 应用（single page web application，SPA）了。 AngularJS 应用实例 您已经学习了足够多关于 AngularJS 的知识，现在可以开始创建您的第一个 AngularJS 应用程序： 我的笔记 保存 清除 剩余字数: 100 应用程序讲解 AngularJS 实例 &lt..

TUTORIALFrontendFetched/AngularJS

AngularJS Bootstrap

AngularJS Bootstrap AngularJS 的首选样式表是 Twitter Bootstrap， Twitter Bootstrap 是目前最受欢迎的前端框架。 查看 Bootstrap教程。 Bootstrap 你可以在你的 AngularJS 应用中加入 Twitter Bootstrap，你可以在你的 <head>元素中添加如下代码: <link rel=..

TUTORIALFrontendFetched/AngularJS

AngularJS 控制器

AngularJS 控制器 AngularJS 控制器 控制 AngularJS 应用程序的数据。 AngularJS 控制器是常规的 JavaScript 对象。 AngularJS 控制器 AngularJS 应用程序被控制器控制。 ng-controller 指令定义了应用程序控制器。 控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数 创建。 AngularJS 实例 &a..

TUTORIALFrontendFetched/AngularJS

AngularJS 依赖注入

AngularJS 依赖注入 什么是依赖注入 wiki 上的解释是：依赖注入（Dependency Injection，简称DI）是一种软件设计模式，在这种模式下，一个或更多的依赖（或服务）被注入（或者通过引用传递）到一个独立的对象（或客户端）中，然后成为了该客户端状态的一部分。 该模式分离了客户端依赖本身行为的创建，这使得程序设计变得松耦合，并遵循了依赖反转和单一职责原则。与服务定位器模式形成直接对比的是，它允许客户端了解客户端如何..

TUTORIALFrontendFetched/AngularJS

AngularJS 指令

AngularJS 指令 AngularJS 通过被称为 指令 的新属性来扩展 HTML。 AngularJS 通过内置的指令来为应用添加功能。 AngularJS 允许你自定义指令。 AngularJS 指令 AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。 ng-app 指令初始化一个 AngularJS 应用程序。 ng-init 指令初始化应用程序数据。 ng-model 指令把元素值（比如输入域的..

TUTORIALFrontendFetched/AngularJS

AngularJS 实例

AngularJS 实例 实例 您可以在线编辑实例，然后点击按钮查看结果。 AngularJS 实例 [mycode3 type='html'] 名字 : Hello {{name}} [/mycode3] 尝试一下 » AngularJS 基础 我的第一个 AngularJS 表达式我的第一个 AngularJS 指令我的第一个 AngularJS 指令（带有有效的 HTML5） ..

TUTORIALFrontendFetched/AngularJS

AngularJS 表达式

AngularJS 表达式 AngularJS 使用 表达式 把数据绑定到 HTML。 AngularJS 表达式 AngularJS 表达式写在双大括号内：{{ expression }}。 AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。 AngularJS 将在表达式书写的位置“输出”数据。 AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算..

TUTORIALFrontendFetched/AngularJS

AngularJS 过滤器

AngularJS 过滤器 过滤器可以使用一个管道字符（|）添加到表达式和指令中。 AngularJS 过滤器 AngularJS 过滤器可用于转换数据： 过滤器 描述 currency 格式化数字为货币格式。 filter 从数组项中选择一个子集。 lowercase 格式化字符串为小写。 orderBy 根据某个表达式排列数组。 uppercase 格式化字符串为大写。 表达式中添加过滤器..

TUTORIALFrontendFetched/AngularJS

AngularJS 表单

AngularJS 表单 AngularJS 表单是输入控件的集合。 HTML 控件 以下 HTML input 元素被称为 HTML 控件: input 元素 select 元素 button 元素 textarea 元素 数据绑定 Input 控件使用 ng-model 指令来实现数据绑定。 [mycode3 type='html'] [/mycode3] 通过以上代码应用有了一个..

TUTORIALFrontendFetched/AngularJS

AngularJS HTML DOM

AngularJS HTML DOM AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令。 ng-disabled 指令 ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。 AngularJS 实例 <div ng-app='' ng-init='mySwitch=true'> <..

TUTORIALFrontendFetched/AngularJS

AngularJS 事件

AngularJS 事件 AngularJS 有自己的 HTML 事件指令。 ng-click 指令 ng-click 指令定义了 AngularJS 点击事件。 AngularJS 实例 <div ng-app='' ng-controller='myCtrl'><button ng-click='count = count +..

TUTORIALFrontendFetched/AngularJS

AngularJS XMLHttpRequest

AngularJS XMLHttpRequest $http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。 使用格式： // 简单的 GET 请求，可以改为 POST $http({ method: 'GET', url: '/someUrl' }).then(function successCallback(response) { // 请求成功执行代码 ..

TUTORIALFrontendFetched/AngularJS

AngularJS 包含

AngularJS 包含 在 AngularJS 中，你可以在 HTML 中包含 HTML 文件。 在 HTML 中包含 HTML 文件 在 HTML 中，目前还不支持包含 HTML 文件的功能。 服务端包含 大多服务端脚本都支持包含文件功能 (SSI： Server Side Includes)。 使用 SSI, 你可在 HTML 中包含 HTML 文件，并发送到客户端浏览器。 PHP 实例 <?php..

TUTORIALFrontendFetched/AngularJS

AngularJS 简介

AngularJS 简介 AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。 AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。 AngularJS 是一个 JavaScript 框架 AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。 AngularJS..

TUTORIALFrontendFetched/AngularJS

AngularJS ng-model 指令

AngularJS ng-model 指令 ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。ng-model 指令 ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定。 AngularJS 实例 <div ng-app='myApp' ng-controller='myCtrl'..

TUTORIALFrontendFetched/AngularJS

AngularJS 模块

AngularJS 模块 模块定义了一个应用程序。 模块是应用程序中不同部分的容器。 模块是应用控制器的容器。 控制器通常属于一个模块。 创建模块 你可以通过 AngularJS 的 angular.module 函数来创建模块： <div ng-app='myApp'>...</div><script> var ..

TUTORIALFrontendFetched/AngularJS

AngularJS ng-mouseup 指令

AngularJS ng-mouseup 指令 AngularJS 参考手册 AngularJS 实例 元素上松开鼠标按钮时执行表达式： <div ng-mouseup='count = count + 1' ng-init='count=0'>点我!</div> <h1>{{..

TUTORIALFrontendFetched/AngularJS

AngularJS 参考手册

AngularJS 参考手册 AngularJS 指令 本教程用到的 AngularJS 指令 : 指令 描述 ng-app 定义应用程序的根元素。 ng-bind 绑定 HTML 元素到应用程序数据 ng-bind-html 绑定 HTML 元素的 innerHTML 到应用程序数据，并移除 HTML 字符串中危险字符 ng-bind-template 规定要使用..

TUTORIALFrontendFetched/AngularJS

AngularJS 路由

AngularJS 路由 本章节我们将为大家介绍 AngularJS 路由。 AngularJS 路由允许我们通过不同的 URL 访问不同的内容。 通过 AngularJS 可以实现多视图的单页 Web 应用（single page web application，SPA）。 通常我们的 URL 形式为 http://runoob.com/first/page，但在单页 Web 应用中 AngularJS 通过 #! + 标记 实现，例..

TUTORIALFrontendFetched/AngularJS

AngularJS Scope(作用域)

AngularJS Scope(作用域) Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。 Scope 是一个对象，有可用的方法和属性。 Scope 可应用在视图和控制器上。 如何使用 Scope 当你在 AngularJS 创建控制器时，你可以将 $scope 对象当作一个参数传递: AngularJS 实例 控制器中的属性对应了视图上的属性： <div ..

TUTORIALFrontendFetched/AngularJS

AngularJS Select(选择框)

AngularJS Select(选择框) AngularJS 可以使用数组或对象创建一个下拉列表选项。 使用 ng-options 创建选择框 在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表，列表项通过对象和数组循环输出，如下实例: 实例 [mycode3 type='html'] var app = angular.module('myA..