AngularJS 简介

AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。 AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML。 AngularJS 是一个 JavaScript 框架 AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。 AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中: <script src="https://cdn.staticfile.org/angula...

AngularJS 表达式

AngularJS 使用 表达式 把数据绑定到 HTML。 AngularJS 表达式 AngularJS 表达式写在双大括号内:{{ expression }}。 AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙。 AngularJS 将在表达式书写的位置"输出"数据。 AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字、运算符和变量。 实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }} AngularJS 实例 <!DOCTY...

AngularJS 指令

AngularJS 通过被称为 指令 的新属性来扩展 HTML。 AngularJS 通过内置的指令来为应用添加功能。 AngularJS 允许你自定义指令。 AngularJS 指令 AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-。 ng-app 指令初始化一个 AngularJS 应用程序。 ng-init 指令初始化应用程序数据。 ng-model 指令把元素值(比如输入域的值)绑定到应用程序。 完整的指令内容可以参阅 AngularJS 参考手册。 AngularJS 实例 ...

AngularJS ng-model 指令

ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。 ng-model 指令 ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定。 AngularJS 实例 <div ng-app="myApp" ng-controller="myCtrl"> 名字: <input ng-model="name"> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.name...

AngularJS Scope(作用域)

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。 Scope 是一个对象,有可用的方法和属性。 Scope 可应用在视图和控制器上。 如何使用 Scope 当你在 AngularJS 创建控制器时,你可以将 $scope 对象当作一个参数传递: AngularJS 实例 控制器中的属性对应了视图上的属性: <div ng-app="myApp" ng-controller="myCtrl"> <h1>{{carname}}</h1> </div> <...

AngularJS 控制器

 AngularJS 控制器 控制 AngularJS 应用程序的数据。  AngularJS 控制器是常规的 JavaScript 对象。 AngularJS 控制器 AngularJS 应用程序被控制器控制。 ng-controller 指令定义了应用程序控制器。 控制器是 JavaScript 对象,由标准的 JavaScript 对象的构造函数 创建。 AngularJS 实例 <div ng-app="myApp" ng-controller="myCtrl"> 名: <input type="text" ng-model="firstName"><br&...

AngularJS 过滤器

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

AngularJS 服务(Service)

AngularJS 中你可以创建自己的服务,或使用内建服务。 什么是服务? 在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用。 AngularJS 内建了30 多个服务。 有个 $location 服务,它可以返回当前页面的 URL 地址。 实例 var app = angular.module('myApp', []); app.controller('customersCtrl', function($scope, $location) { $scope.myUrl = $location.absUrl(); }); 尝试一下 » ...

AngularJS XMLHttpRequest

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

AngularJS Select(选择框)

AngularJS 可以使用数组或对象创建一个下拉列表选项。 使用 ng-options 创建选择框 在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和数组循环输出,如下实例: 实例 <div ng-app="myApp" ng-controller="myCtrl"> <select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names"> </select> </div> <scr...

AngularJS 表格

ng-repeat 指令可以完美的显示表格。 在表格中显示数据 使用 angular 显示表格是非常简单的: AngularJS 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcss.com/angular.js/1.6.3/angular.min.js"></script> </head> <body> <div ng-app="myApp" ng-controller="customersCtrl"> <table> <...

AngularJS SQL

在前面章节中的代码也可以用于读取数据库中的数据。 使用 PHP 从 MySQL 中获取数据 AngularJS 实例 <div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names"> <td>{{ x.Name }}</td> <td>{{ x.Country }}</td> </tr> </table> </div> <script> var app = angular.module('myApp', []); app.controll...

AngularJS HTML DOM

AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令。 ng-disabled 指令 ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。 AngularJS 实例 <div ng-app="" ng-init="mySwitch=true"> <p> <button ng-disabled="mySwitch">点我!</button> </p> <p> <input type="checkbox" ng-model="mySwitch">按钮 </p> <p> {{ mySwitch...

AngularJS 事件

AngularJS 有自己的 HTML 事件指令。 ng-click 指令 ng-click 指令定义了 AngularJS 点击事件。 AngularJS 实例 <div ng-app="" ng-controller="myCtrl"> <button ng-click="count = count + 1">点我!</button> <p>{{ count }}</p> </div> 尝试一下 » 隐藏 HTML 元素 ng-hide 指令用于设置应用部分是否可见。 ng-hide="true" 设置 HTML 元素不可见。 ng-hide="fal...

AngularJS 模块

模块定义了一个应用程序。 模块是应用程序中不同部分的容器。 模块是应用控制器的容器。 控制器通常属于一个模块。 创建模块 你可以通过 AngularJS 的 angular.module 函数来创建模块: <div ng-app="myApp">...</div> <script> var app = angular.module("myApp", []); </script> "myApp" 参数对应执行应用的 HTML 元素。 现在你可以在 AngularJS 应用中添加控制器,指令...

AngularJS 表单

AngularJS 表单是输入控件的集合。 HTML 控件 以下 HTML input 元素被称为 HTML 控件: input 元素 select 元素 button 元素 textarea 元素 数据绑定 Input 控件使用 ng-model 指令来实现数据绑定。 <input type="text" ng-model="firstname"> 通过以上代码应用有了一个名为 firstname 的属性。 它通过 ng-model 指令来绑定到你的应用。 firstname 属性可以在 controller 中使用: 实例 var...

AngularJS 输入验证

AngularJS 表单和控件可以验证输入的数据。 输入验证 在前面的几个章节中,你已经学到关于 AngularJS 表单和控件的知识。 AngularJS 表单和控件可以提供验证功能,并对用户输入的非法数据进行警告。 客户端的验证不能确保用户输入数据的安全,所以服务端的数据验证也是必须的。 应用代码 <!DOCTYPE html> <html> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angu...

AngularJS API

API 意为 Application Programming Interface(应用程序编程接口)。 AngularJS 全局 API AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合,如: 比较对象 迭代对象 转换对象 全局 API 函数使用 angular 对象进行访问。 以下列出了一些通用的 API 函数: API 描述 angular.lowercase (<angular1.7) angular.$$lowercase()(angular1.7+) 转换字符串为小写 angular.uppercase() ...

AngularJS Bootstrap

AngularJS 的首选样式表是 Twitter Bootstrap, Twitter Bootstrap 是目前最受欢迎的前端框架。 查看 Bootstrap教程。 Bootstrap 你可以在你的 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码: <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 如果站点在国内,建议使用百度静态资源库的Bootstrap,代...

AngularJS 包含

在 AngularJS 中,你可以在 HTML 中包含 HTML 文件。 在 HTML 中包含 HTML 文件 在 HTML 中,目前还不支持包含 HTML 文件的功能。 服务端包含 大多服务端脚本都支持包含文件功能 (SSI: Server Side Includes)。 使用 SSI, 你可在 HTML 中包含 HTML 文件,并发送到客户端浏览器。 PHP 实例 <?php require("navigation.php"); ?> 客户端包含 通过 JavaScript 有很多种方式可以在 HTML 中包含 HTM...
Copyright © 菜鸟编程 保留所有权利.   Theme  Ality 豫ICP备15027722号 QQ:973000716

用户登录

分享到: