【03】AngularJS 简介
AngularJS 简介
AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。
AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML。
它是一个以 JavaScript 编写的库。
AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中:
<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
我们建议把脚本放在 <body> 元素的底部。 这会提高网页加载速度,因为 HTML 加载不受制于脚本加载。 |
AngularJS 扩展了 HTML
AngularJS 通过 ng-directives(指令) 扩展了 HTML。
ng-app 指令定义一个 AngularJS 应用程序。
ng-model 指令把元素值(比如输入域的值)绑定到应用程序。(魔芋:应用程序输入)
ng-bind 指令把应用程序数据绑定到 HTML 视图。(魔芋:应用程序输出)
<!DOCTYPE html>
<html>
<body>
<div ng-app="">
<p>在输入框中尝试输入:</p>
<p>姓名:<input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
</body>
</html>
实例讲解:
当网页加载完毕,AngularJS 自动开启。
ng-app 指令告诉 AngularJS,<div> 元素是 AngularJS 应用程序 的"所有者"。
ng-model 指令把输入域的值绑定到应用程序变量 name。
ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。
如果您移除了 ng-app 指令,HTML 将直接把表达式显示出来,不会去计算表达式的结果。 |
魔芋练习:
<div class="moyu" ng-app="">
<input class="ceshi" ng-model ="moyu" type="text">
<span ng-bind="moyu"></span>
</div>
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 有效。 |
AngularJS 表达式
AngularJS 表达式写在双大括号内:{{ expression }}。
AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙。
AngularJS 将在表达式书写的位置"输出"数据。
AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字、运算符和变量。
实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
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/moyuling/p/5206610.html
【03】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.解耦应用逻辑, ...
最新文章
- 人脸识别机器学习实战
- 在python中、下列代码的输出是什么-Python 面试中 8 个必考问题
- Karp 21个规约问题 笔记 (1~13个规约问题)
- 通过防火墙堵住×××安全漏洞
- rabbitmq消费者获取消息慢_RabbitMQ:快速生产者和慢速消费者
- vscode settings.json配置
- android中webview的实现
- (1)Jenkins Linux环境下的简单搭建
- 测试:第二章 测试过程
- MaxScript脚本
- 【计算机网络】Stanford CS144 学习笔记
- HTML5七夕情人节表白网页制作【粉色的情人节爱心飞出ui特效】HTML+CSS+JavaScript html生日快乐祝福网页制作
- 【技术分享】一:搜索排序—概述
- numpy中的ndarray方法和属性
- smil java,如何在Android开发中使用SMIL文件
- 小强升职记-一本好书
- 【图像去模糊】Rethinking Coarse-to-Fine Approach in Single Image Deblurring
- 拒绝无用功,封装一个通用的 PopupWindow
- 一个关于ul 及 li 横向滚动的故事!
- openstack与ceph环境恢复云主机
热门文章
- php 不返回 数据,php – file_get_contents没有返回任何数据
- Qt:多线程--子线程间通讯
- 虚幻四如何实现第一人称_虚幻周报20200616 | 开分群啦~
- 算法: 1和0子集合的个数 474. Ones and Zeroes
- 自动驾驶 4-1 二维运动学建模Kinematic Modeling in 2D
- 极客大学架构师训练营 大数据 三驾马车 GFS、MapReduce、BigTable,Hadoop HDFS 第23课 听课总结
- ubuntu安装sasl失败 - 解决方法
- Android工程项目打包成SDK(jar或aar格式)
- python函数 range()和arange()
- 返回信息是html的性能测试,Web前端性能测试小点