周大帅
- 浏览: 27160 次
-
最新评论
本文为 H5EDU 机构官方 HTML5培训 教程，主要介绍：AngularJs 基础教程 —— 简介(10)
AngularJS 简介
AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。
AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。
AngularJS 是一个 JavaScript 框架
AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。
AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中：
<script src="http://cdn.static.runoob.com/l ... gt%3B
Note 我们建议把脚本放在 <body> 元素的底部。
这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。
各个 angular.js 版本下载： https://github.com/angular/angular.js/releases
AngularJS 扩展了 HTML
AngularJS 通过 ng-directives 扩展了 HTML。
ng-app 指令定义一个 AngularJS 应用程序。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
ng-bind 指令把应用程序数据绑定到 HTML 视图。
AngularJS 实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/l ... gt%3B
</head>
<body>
<div ng-app="">
<p>名字 : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
</body>
</html>
实例讲解：
当网页加载完毕，AngularJS 自动开启。
ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序 的"所有者"。
ng-model 指令把输入域的值绑定到应用程序变量 name。
ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。
Note 如果您移除了 ng-app 指令，HTML 将直接把表达式显示出来，不会去计算表达式的结果。
什么是 AngularJS？
AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。
AngularJS 把应用程序数据绑定到 HTML 元素。
AngularJS 可以克隆和重复 HTML 元素。
AngularJS 可以隐藏和显示 HTML 元素。
AngularJS 可以在 HTML 元素"背后"添加代码。
AngularJS 支持输入验证。
AngularJS 指令
正如您所看到的，AngularJS 指令是以 ng 作为前缀的 HTML 属性。
ng-init 指令初始化 AngularJS 应用程序变量。
AngularJS 实例
<div ng-app="" ng-init="firstName='John'">
<p>姓名为 <span ng-bind="firstName"></span></p>
</div>
Note HTML5 允许扩展的（自制的）属性，以 data- 开头。
AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。
带有有效的 HTML5：
AngularJS 实例
<div data-ng-app="" data-ng-init="firstName='John'">
<p>姓名为 <span data-ng-bind="firstName"></span></p>
</div>
AngularJS 表达式
AngularJS 表达式写在双大括号内：{{ expression }}。
AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。
AngularJS 将在表达式书写的位置"输出"数据。
AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。
实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
AngularJS 实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/l ... gt%3B
</head>
<body>
<div ng-app="">
<p>我的第一个表达式： {{ 5 + 5 }}</p>
</div>
</body>
</html>
AngularJS 应用
AngularJS 模块（Module） 定义了 AngularJS 应用。
AngularJS 控制器（Controller） 用于控制 AngularJS 应用。
ng-app指令定义了应用, ng-controller 定义了控制器。
AngularJS 实例
<div ng-app="myApp" ng-controller="myCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>
AngularJS 模块定义应用:
AngularJS 模块
var app = angular.module('myApp', []);
AngularJS 控制器控制应用:
AngularJS 控制器
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
AngularJS 简介
AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。
AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。
AngularJS 是一个 JavaScript 框架
AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。
AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中：
<script src="http://cdn.static.runoob.com/l ... gt%3B
Note 我们建议把脚本放在 <body> 元素的底部。
这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。
各个 angular.js 版本下载： https://github.com/angular/angular.js/releases
AngularJS 扩展了 HTML
AngularJS 通过 ng-directives 扩展了 HTML。
ng-app 指令定义一个 AngularJS 应用程序。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
ng-bind 指令把应用程序数据绑定到 HTML 视图。
AngularJS 实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/l ... gt%3B
</head>
<body>
<div ng-app="">
<p>名字 : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
</body>
</html>
实例讲解：
当网页加载完毕，AngularJS 自动开启。
ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序 的"所有者"。
ng-model 指令把输入域的值绑定到应用程序变量 name。
ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。
Note 如果您移除了 ng-app 指令，HTML 将直接把表达式显示出来，不会去计算表达式的结果。
什么是 AngularJS？
AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。
AngularJS 把应用程序数据绑定到 HTML 元素。
AngularJS 可以克隆和重复 HTML 元素。
AngularJS 可以隐藏和显示 HTML 元素。
AngularJS 可以在 HTML 元素"背后"添加代码。
AngularJS 支持输入验证。
AngularJS 指令
正如您所看到的，AngularJS 指令是以 ng 作为前缀的 HTML 属性。
ng-init 指令初始化 AngularJS 应用程序变量。
AngularJS 实例
<div ng-app="" ng-init="firstName='John'">
<p>姓名为 <span ng-bind="firstName"></span></p>
</div>
Note HTML5 允许扩展的（自制的）属性，以 data- 开头。
AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。
带有有效的 HTML5：
AngularJS 实例
<div data-ng-app="" data-ng-init="firstName='John'">
<p>姓名为 <span data-ng-bind="firstName"></span></p>
</div>
AngularJS 表达式
AngularJS 表达式写在双大括号内：{{ expression }}。
AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。
AngularJS 将在表达式书写的位置"输出"数据。
AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。
实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
AngularJS 实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/l ... gt%3B
</head>
<body>
<div ng-app="">
<p>我的第一个表达式： {{ 5 + 5 }}</p>
</div>
</body>
</html>
AngularJS 应用
AngularJS 模块（Module） 定义了 AngularJS 应用。
AngularJS 控制器（Controller） 用于控制 AngularJS 应用。
ng-app指令定义了应用, ng-controller 定义了控制器。
AngularJS 实例
<div ng-app="myApp" ng-controller="myCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>
AngularJS 模块定义应用:
AngularJS 模块
var app = angular.module('myApp', []);
AngularJS 控制器控制应用:
AngularJS 控制器
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
分享到：
发表评论
-
JavaScript强化教程 —— 对象创建模式
2016-10-09 17:12 749本文为 H5EDU 机构官方 HTML5培训 教程，主要介绍： ... -
AngularJs 基础教程 —— 依赖注入
2016-09-28 17:10 677本文为 H5EDU 机构官方 HT ... -
AngularJs 基础教程 —— Select(选择框)
2016-09-23 17:14 861本文为 H5EDU 机构官方 HTML5培训 教程，主要介绍： ... -
AngularJs 基础教程 —— 控制器
2016-09-21 17:22 630本文为 H5EDU 机构官方 HTML5培训 教程，主要介绍： ... -
AngularJs 基础教程 —— 与php服务器
2016-09-12 17:49 1321本文为 H5EDU 机构官方 HTML5培训 教程，主要介绍： ... -
JavaScript强化教程 —— Cocos2d-JS自动JSB绑定规则修改
2016-09-09 18:08 1216本文为 H5EDU 机构官方 HT ... -
JavaScript强化教程 —— 资源打包工具的使用及资源的异步加载处理
2016-09-08 17:45 804本文为 HTML5培训 机构官方 HTML5培训 教程，主要介 ... -
JavaScript强化教程 —— Cocos2d-JS极速调试技巧
2016-09-05 16:18 927本文为 H5EDU 机构官方 HTML5培训 教程，主要介绍： ... -
JavaScript强化教程 —— Cocos2d-JS游戏快速接入微信JS-SDK
2016-09-02 16:07 1082本文为 H5EDU 机构官方 HTML5培训 教程，主要介绍： ... -
JavaScript强化教程—— 内置粒子系统
2016-08-29 16:00 803本文为 H5EDU 机构官方 HTML5培训 教程，主要介绍： ... -
JavaScript强化教程——JavaScript Math（算数） 对象
2016-08-26 16:33 595本文为 H5EDU 机构官方 HTML5培训 教程，主要介绍： ... -
JavaScript强化教程 —— Cocos2d-JS的屏幕适配方案
2016-08-25 16:25 1243本文为 H5EDU 机构官方 HT ... -
JavaScript强化教程 -- cocosjs场景切换
2016-08-24 16:11 1410本文为 H5EDU 机构官方 HTML5培训 教程，主要介绍： ... -
CSS基础教程 -- 媒体查询屏幕适配
2016-08-22 15:15 1129本文为 H5EDU 机构官方 HTML5培训 教程，主要介绍： ... -
JQuery强化教程 —— jQuery Easing
2016-08-18 14:54 833本文为 H5EDU 机构官方 HTML5培训 教程，主要介绍： ... -
fullPage教程 -- 整屏滚动效果插件 fullpage详解
2016-08-17 15:21 853本文为 H5EDU 机构官方 HTML5培训 教程，主要介绍： ... -
JavaScript强化教程——获取内容和属性
2016-08-15 15:35 484本文为 H5EDU 机构官方 HTML5培训 教程，主要介绍： ... -
JavaScript强化教程——jQuery 动画2
2016-08-12 14:12 651本文为 H5EDU 机构官方 HTML5培训 教程，主要介绍： ... -
bootstrap教程（二） —— 列表组listgroup
2016-08-11 14:46 661本文为 H5EDU 机构官方 HTML5培训 教程，主要介绍： ... -
bootstrap教程（二）——导航条
2016-08-08 16:22 568本文为 H5EDU 机构官方 HTML5培训 教程，主要介绍： ...
相关推荐
这份教程的目的是帮助零基础的开发者逐步学习AngularJs，并通过实际操作构建出一个完整的web应用程序，以此来掌握AngularJs的技术精髓。这个入门级项目是一个关于Android设备清单的目录列表web应用，通过这个应用，...
《疯狂前端开发讲义——jQuery+AngularJS+Bootstrap前端开发实战》是一本深入浅出的前端开发教程，它涵盖了三个核心的前端技术：jQuery、AngularJS和Bootstrap。这些技术在现代网页开发中扮演着至关重要的角色，使得...
在后续的文章中，会详细介绍如何处理AngularJS的js控制部分，创建基础页面，以及更多关于AngularJS和Bootstrap结合的实际应用。这些内容将帮助你更好地理解和实践这两个框架的结合，提升你的前端开发能力。 总的来...
#### 一、AngularJS简介与重要性 AngularJS是一种广泛使用的开源前端JavaScript框架，由Google维护。它主要用于构建单页面应用（SPA），通过简化客户端和服务器之间的交互来提高用户体验。AngularJS的核心优势在于...
#### 一、AngularJS简介 AngularJS是由Google推出的一款JavaScript库，虽然在本文档中作者将其称为“工具”，但实际上它更接近于一个完整的前端开发框架。AngularJS的设计理念在于提供一种全新的应用组织与开发方式...
这个项目是基于Dojo工具链对AngularJS的经典示例——PhoneCat应用的实现。PhoneCat是一个用于展示如何使用AngularJS构建Web应用程序的教程项目，而这里我们将看到如何使用Dojo框架来完成相同的目标。这个教程将深入...
Angular 事件注册——Angular JS 的演示应用程序 这个项目是一个示例应用程序，展示了一个更完整的现实单页角度应用程序。 运行应用程序 打开命令行到存储库的根目录。... 有关 AngularJS 的更多信息，请查看
《AngularJS实战》一书由陶国荣编著，是中国知名科技出版社——华章科技出版的一本关于AngularJS的实践教程。这本书旨在帮助读者深入理解AngularJS这一强大的前端框架，并通过实际项目案例提升开发技能。随书附带的...
Angular 事件注册——Angular JS 的演示应用程序 该项目是一个示例应用程序，展示了更加全面的现实单页角度应用程序。 运行应用程序 打开命令行到存储库的根目录。... 有关 AngularJS 的更多信息，请查看
《疯狂前端开发讲义：jQuery+AngularJS+Bootstrap前端开发实战》是一本专注于前端开发的实践教程，由知名IT作者李刚编著。本书旨在帮助读者深入理解和掌握前端三大热门框架——jQuery、AngularJS和Bootstrap的使用...
在本教程中，我们将深入探讨如何使用AngularJS构建一个电子邮件系统，这源于Thinkful.com的AngularJS教程——"angular-mail"。AngularJS是Google维护的一个强大的前端JavaScript框架，它简化了网页应用程序的开发，...
1. **Angular2简介**：介绍Angular2的发展历程、设计理念和主要特性，对比AngularJS的区别，使学习者对Angular2有一个整体的认识。 2. **环境搭建**：指导如何配置开发环境，包括安装Node.js、npm（Node包管理器）、...
**学习资源——Thinkful AngularJS教程** 描述中提到的"Thinkful AngularJS教程"是一个学习AngularJS的好途径。Thinkful是一个在线学习平台，提供了一系列编程课程，包括AngularJS。通过这样的教程，学习者可以系统...
本篇文章将深入解析AngularJS入门示例——“Hello World”，帮助初学者理解其核心概念。 首先，我们来看一下示例代码： ```html <!doctype html> <title>Hello,World! <script src="angular1.2.25.js"></...
《AngularJS深度剖析——以AngularJS_tuto8为例》 AngularJS，作为一款由Google维护的前端JavaScript框架，因其强大的MVC（Model-View-Controller）架构和双向数据绑定特性，备受开发者青睐。本篇文章将深入探讨...
分享课程——基于JSONP+ngBind+ngRepea技术实战美玩网（BootStrap+AngularJS+JMS+Highcharts）；本教程主要从基础出发到项目的整体框架整合，整个大纲内容涉及面较为广泛，涉及到数据库技术，javaEE技术点，web框架...
在选择样式模板时，教程提到了两个基于AngularJS和Bootstrap的开源项目——AdminLTE和Charisma。AdminLTE是一个流行的后台管理模板，提供了丰富的组件和布局选项。Charisma则是另一个美观且功能齐全的UI框架，适合...
《AngularJS——塑造之路》是针对JavaScript开发者的深入学习AngularJS框架的教程。AngularJS，由Google维护，是一款强大的前端JavaScript框架，它极大地简化了Web应用程序的开发，特别是在构建单页应用（SPA）方面...