Learning Path
浏览 AngularJS 相关教程与章节。
HTML、CSS、JavaScript、浏览器 API、前端框架与 UI 工程。
教程
78
AngularJS 教程 AngularJS 通过新的属性和表达式扩展了 HTML。 AngularJS 可以构建一个单一页面应用程序(SPAs:Single Page Applications)。 AngularJS 学习起来非常简单。 现在开始学习 AngularJS! 每个章节都有相应的实例 在每个章节中,您可以在线编辑实例,然后点击按钮查看结果。 AngularJS 实例 <!DOCTYP..
AngularJS 动画 AngularJS 提供了动画效果,可以配合 CSS 使用。 AngularJS 使用动画需要引入 angular-animate.min.js 库。 还需在应用中使用模型 ngAnimate: 什么是动画? 动画是通过改变 HTML 元素产生的动态变化效果。 实例 勾选复选框隐藏 DIV: <body ng-app='ngAnimate'&..
AngularJS API API 意为 Application Programming Interface(应用程序编程接口)。 AngularJS 全局 API AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合,如: 比较对象 迭代对象 转换对象 全局 API 函数使用 angular 对象进行访问。 以下列出了一些通用的 API 函数: API 描述 ..
AngularJS 应用 现在是时候创建一个真正的 AngularJS 单页 Web 应用(single page web application,SPA)了。 AngularJS 应用实例 您已经学习了足够多关于 AngularJS 的知识,现在可以开始创建您的第一个 AngularJS 应用程序: 我的笔记 保存 清除 剩余字数: 100 应用程序讲解 AngularJS 实例 <..
AngularJS Bootstrap AngularJS 的首选样式表是 Twitter Bootstrap, Twitter Bootstrap 是目前最受欢迎的前端框架。 查看 Bootstrap教程。 Bootstrap 你可以在你的 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码: <link rel=..
AngularJS 控制器 AngularJS 控制器 控制 AngularJS 应用程序的数据。 AngularJS 控制器是常规的 JavaScript 对象。 AngularJS 控制器 AngularJS 应用程序被控制器控制。 ng-controller 指令定义了应用程序控制器。 控制器是 JavaScript 对象,由标准的 JavaScript 对象的构造函数 创建。 AngularJS 实例 &a..
AngularJS 依赖注入 什么是依赖注入 wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或者通过引用传递)到一个独立的对象(或客户端)中,然后成为了该客户端状态的一部分。 该模式分离了客户端依赖本身行为的创建,这使得程序设计变得松耦合,并遵循了依赖反转和单一职责原则。与服务定位器模式形成直接对比的是,它允许客户端了解客户端如何..
AngularJS 指令 AngularJS 通过被称为 指令 的新属性来扩展 HTML。 AngularJS 通过内置的指令来为应用添加功能。 AngularJS 允许你自定义指令。 AngularJS 指令 AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-。 ng-app 指令初始化一个 AngularJS 应用程序。 ng-init 指令初始化应用程序数据。 ng-model 指令把元素值(比如输入域的..
AngularJS 实例 实例 您可以在线编辑实例,然后点击按钮查看结果。 AngularJS 实例 [mycode3 type='html'] 名字 : Hello {{name}} [/mycode3] 尝试一下 » AngularJS 基础 我的第一个 AngularJS 表达式我的第一个 AngularJS 指令我的第一个 AngularJS 指令(带有有效的 HTML5) ..
AngularJS 表达式 AngularJS 使用 表达式 把数据绑定到 HTML。 AngularJS 表达式 AngularJS 表达式写在双大括号内:{{ expression }}。 AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙。 AngularJS 将在表达式书写的位置“输出”数据。 AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字、运算..
AngularJS 过滤器 过滤器可以使用一个管道字符(|)添加到表达式和指令中。 AngularJS 过滤器 AngularJS 过滤器可用于转换数据: 过滤器 描述 currency 格式化数字为货币格式。 filter 从数组项中选择一个子集。 lowercase 格式化字符串为小写。 orderBy 根据某个表达式排列数组。 uppercase 格式化字符串为大写。 表达式中添加过滤器..
AngularJS 表单 AngularJS 表单是输入控件的集合。 HTML 控件 以下 HTML input 元素被称为 HTML 控件: input 元素 select 元素 button 元素 textarea 元素 数据绑定 Input 控件使用 ng-model 指令来实现数据绑定。 [mycode3 type='html'] [/mycode3] 通过以上代码应用有了一个..
AngularJS HTML DOM AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令。 ng-disabled 指令 ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。 AngularJS 实例 <div ng-app='' ng-init='mySwitch=true'> <..
AngularJS 事件 AngularJS 有自己的 HTML 事件指令。 ng-click 指令 ng-click 指令定义了 AngularJS 点击事件。 AngularJS 实例 <div ng-app='' ng-controller='myCtrl'><button ng-click='count = count +..
AngularJS XMLHttpRequest $http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。 使用格式: // 简单的 GET 请求,可以改为 POST $http({ method: 'GET', url: '/someUrl' }).then(function successCallback(response) { // 请求成功执行代码 ..
AngularJS 包含 在 AngularJS 中,你可以在 HTML 中包含 HTML 文件。 在 HTML 中包含 HTML 文件 在 HTML 中,目前还不支持包含 HTML 文件的功能。 服务端包含 大多服务端脚本都支持包含文件功能 (SSI: Server Side Includes)。 使用 SSI, 你可在 HTML 中包含 HTML 文件,并发送到客户端浏览器。 PHP 实例 <?php..
AngularJS 简介 AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。 AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML。 AngularJS 是一个 JavaScript 框架 AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。 AngularJS..
AngularJS ng-model 指令 ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。ng-model 指令 ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定。 AngularJS 实例 <div ng-app='myApp' ng-controller='myCtrl'..
AngularJS 模块 模块定义了一个应用程序。 模块是应用程序中不同部分的容器。 模块是应用控制器的容器。 控制器通常属于一个模块。 创建模块 你可以通过 AngularJS 的 angular.module 函数来创建模块: <div ng-app='myApp'>...</div><script> var ..
AngularJS ng-mouseup 指令 AngularJS 参考手册 AngularJS 实例 元素上松开鼠标按钮时执行表达式: <div ng-mouseup='count = count + 1' ng-init='count=0'>点我!</div> <h1>{{..
AngularJS 参考手册 AngularJS 指令 本教程用到的 AngularJS 指令 : 指令 描述 ng-app 定义应用程序的根元素。 ng-bind 绑定 HTML 元素到应用程序数据 ng-bind-html 绑定 HTML 元素的 innerHTML 到应用程序数据,并移除 HTML 字符串中危险字符 ng-bind-template 规定要使用..
AngularJS 路由 本章节我们将为大家介绍 AngularJS 路由。 AngularJS 路由允许我们通过不同的 URL 访问不同的内容。 通过 AngularJS 可以实现多视图的单页 Web 应用(single page web application,SPA)。 通常我们的 URL 形式为 http://runoob.com/first/page,但在单页 Web 应用中 AngularJS 通过 #! + 标记 实现,例..
AngularJS Scope(作用域) Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。 Scope 是一个对象,有可用的方法和属性。 Scope 可应用在视图和控制器上。 如何使用 Scope 当你在 AngularJS 创建控制器时,你可以将 $scope 对象当作一个参数传递: AngularJS 实例 控制器中的属性对应了视图上的属性: <div ..
AngularJS Select(选择框) AngularJS 可以使用数组或对象创建一个下拉列表选项。 使用 ng-options 创建选择框 在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和数组循环输出,如下实例: 实例 [mycode3 type='html'] var app = angular.module('myA..