AngularJS 简介
AngularJS 简介
AngularJS
AngularJS 中文网 :http://www.angularjs.net.cn/
AngularJS 通过新的属性和表达式扩展了 HTML。
AngularJS 可以构建一个单一页面应用程序(SPAs:Single Page Applications)。
学习 AngularJS 需要了解的知识
- HTML(今天刚刚听说HTML要出6了)
- CSS
- JavaScript
AngularJS 历史
AngularJS 是比较新的技术,版本 1.0 是在 2012 年发布的。
AngularJS 是由 Google 的员工 Miško Hevery 从 2009 年开始着手开发。
这是一个非常好的构想,该项目目前已由 Google 正式支持,有一个全职的开发团队继续开发和维护这个库。
AngularJS 实例
来源:菜鸟教程【http://www.runoob.com/angularjs/angularjs-examples.html】
来源:AngularJS 中文网 【http://www.angularjs.net.cn/tutorial/】
AngularJS 参考手册
来源:菜鸟教程【http://www.runoob.com/angularjs/angularjs-reference.html】
来源:AngularJS 中文网 【http://www.angularjs.net.cn/api/】
AngularJS 简介
AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。
AngularJS 通过指令扩展了 HTML,且通过表达式绑定数据到 HTML。
AngularJS 是一个 JavaScript 框架
AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。
AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中:
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
建议把脚本放在 <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 视图。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> </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。
如果您除了 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 应用程序变量。
<div ng-app="" ng-init="firstName='John'"><p>姓名为 <span ng-bind="firstName"></span></p></div>
HTML5 允许扩展的(自制的)属性,以 data- 开头。
AngularJS 属性以 ng- 开头,但是您可以使用 data-ng- 来让网页对 HTML5 有效。
<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 }}
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> </head> <body><div ng-app=""><p>我的第一个表达式: {{ 5 + 5 }}</p> </div></body> </html>
AngularJS 应用
AngularJS 模块(Module) 定义了 AngularJS 应用。
AngularJS 控制器(Controller) 用于控制 AngularJS 应用。
ng-app指令指明了应用, ng-controller 指明了控制器。
<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 模块定义应用:
var app = angular.module('myApp', []);
AngularJS 控制器控制应用:
app.controller('myCtrl', function($scope) {$scope.firstName= "John";$scope.lastName= "Doe"; });
转载于:https://www.cnblogs.com/wjw1014/p/10205928.html
AngularJS 简介相关推荐
- AngularJS 学习笔记---AngularJS 简介
AngularJS 简介 http://www.runoob.com/angularjs/angularjs-intro.html https://docs.angularjs.org/api/ng ...
- 《AngularJS入门与进阶》图书简介
一.图书封面 二.图书CIP信息 图书在版编目(CIP)数据 AngularJS入门与进阶 / 江荣波著. – 北京 : 清华大学出版社, 2017 ISBN 978-7-302-46074-9 Ⅰ. ...
- AngularJS安装配置与基础概要整理(上)
以前整理的,可供参考. 安装: 1.首先要安装node.js和它的npm包管理系统.(nodejs相关待整理) 2.安装grunt .grunt是一个基于任务的Javascript工程命令行构建工具. ...
- 一款优秀的JavaScript框架—AngularJS
AngularJS简介 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.Angular ...
- AngularJS 作用域与数据绑定机制
AngularJS 简介 AngularJS 是由 Google 发起的一款开源的前端 MVC 脚本框架,既适合做普通 WEB 应用也可以做 SPA(单页面应用,所有的用户操作都在一个页面中完成).与 ...
- AngularJS学习笔记(一)
前言 几个月之前了解过一点Angular,主要是通过phonecat应用程序了解一些入门东西,但是当被问及什么是Angular或者你对Angular的理解时,只记得一个MVVM双向数据绑定,显然这是不 ...
- 使用Spring boot,Thymeleaf,AngularJS从零开始构建新的Web应用程序–第3部分
在之前的博客中,我们使用Thymeleaf,Bower和Bootstrap构建了登录页面,并将其部署到了Heroku. 在此博客中,我们将介绍用于前端的AngularJS和在后端的Spring Boo ...
- 使用Spring boot,Thymeleaf,AngularJS从零开始构建一个新的Web应用程序-第3部分
在之前的博客中,我们使用Thymeleaf,Bower和Bootstrap构建了登录页面,并将其部署到了Heroku. 在此博客中,我们将介绍用于前端的AngularJS和在后端的Spring Boo ...
- AngularJS基础入门初探
一.AngularJS简介 1.1 什么是AngularJS (1)一款非常优秀的前端JS框架,可以方便实现MVC/MVVM模式 (2)由Misko Hevery 等人创建,2009年被Google所 ...
- [AngularJS]--基本用法
2019独角兽企业重金招聘Python工程师标准>>> AngularJS简介 AngularJs是Google下一代前端框架,基于mvc架构,它提供的功能如下: 1.解耦应用逻辑, ...
最新文章
- 一段js的***程序
- windows 2008 server R2 按服务器角色的版本对比
- 实验开篇介绍---开发板介绍
- pytorch forward_pytorch使用hook打印中间特征图、计算网络算力等
- Android之解决PC浏览器访问手机服务端取assets目录下的文件页面显示不出来问题
- 【资源下载】921页《用Python3带你从小白入门机器学习实战》教程手册
- 易语言数据类型与c 对照,易语言利用自定义数据类型和数组. 制作键对值操作类/内存配置...
- Oracle role and user privileges
- VS2017 15.4提供预览版,面向Windows 10秋季更新(FCU)
- jQuery实现百度导航li拖放排列效果,即时更新数据库
- 如何从Mac删除Bing重定向
- 浙大计算机学硕名额,浙大计算机学硕复试线399分,专硕375,不愧被称为“炸大”...
- 移动支付服务商加盟/微信支付宝扫码支付代理加盟
- Proof Compression
- 闻与MyBatis之MyBatis快速指南
- vue 移动端跳页搜索自动获取焦点
- ROS发布/订阅Float64MultiArray数组类消息(C++和Python相互发布和订阅)
- react函数式组件传值之父传子
- Method findById should have no parameters
- 如何安装VMware Tool
热门文章
- 游戏开发筑基之用“*“输出三角形(一个for循环)及打印控制台进度条
- 华为 “Telnet” 登录设备
- SQL语句详解(二)——select基本查询操作
- Cinema 4D* 中令人惊叹的体积效果
- React Native学习总结第二天
- mysql limit 用法-分页
- zabbix+ldap认证故障解决一例
- 《汇编语言》第一章笔记
- matlab 分级聚类,Matlab学习系列23. 模糊聚类分析原理及实现
- 6.MongoDB之索引