AngularJS基础教程之简单介绍


Posted in Javascript onSeptember 27, 2015

AngularJS是一个JavaScript框架。它可以通过<script>标记被添加到HTML页面中。

AngularJS通过指令对HTML属性进行了扩展,然后通过表达式将数据绑定到HTML元素中。

AngularJS是一个JavaScript框架

AngularJS是一个JavaScript框架,它是由JavaScript语言编写的类库。

AngularJS以JavaScript文件的形式进行发布,我们可以通过script标记将它添加到web页面中:

<script src="http://cdn.bootcss.com/angular.js/1.3.14/angular.min.js"></script>

AngularJS扩展了HTML

AngularJS通过一系列ng-directives指令对HTML进行扩展。

ng-app指令定义了AngularJS application。

ng-model指令将HTML控件的值与数据模型绑定到一起。

ng-bind指令将模型数据绑定到HTML视图。

<script src="http://cdn.bootcss.com/angular.js/1.3.14/angular.js"></script>
<body>
<div ng-app="">
   <p>Name: <input type="text" ng-model="name"></p>
   <p ng-bind="name"></p>
</div>
</body>

示例说明:

当页面加载完成时AngularJS自动开始执行。

ng-app指令告诉AngularJS它所在的<div>元素是AngularJS Application的根元素。

ng-model指令将input标签的值绑定给变量name。

ng-bind指令将变量name的值绑定给<p>元素的innerHTML属性。

 AngularJS指令

就如你所看到的,AngularJS指令就是一组以ng开头的HTML属性。

通过ng-init指令可以将AngularJS Application的变量进行初始化。

<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>

等效的代码:

<div data-ng-app="" data-ng-init="firstName='John'">
<p>The name is <span data-ng-bind="firstName"></span></p>
</div>

Note 你可以使用前缀data-ng-来代替ng-,这样可以确保页面上的HTML是有效的(valid)。

在后面的章节中你将会学习到更多的AngularJS指令。

AngularJS表达式

AngularJS表达式写在双大括号中:{{ 表达式语句 }}。

AngularJS会准确地将表达式“输出”为计算的结果,例如:

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div ng-app="">
   <p>My first expression: {{ 5 + 5 }}</p>
</div>

</body>
</html>

AngularJS表达式绑定数据到HTML的方式与ng-bind指令的方式相同。

<!DOCTYPE html>
<html>
<script src="angular.min.js"></script>
<body>

<div ng-app="">
 <p>Name: <input type="text" ng-model="name"></p>
 <p>{{name}}</p>
</div>

</body>
</html>

在后面的章节中你将会学习到更多有关AngularJS表达式的内容。

AngularJS Application

AngularJS模块定义了AngularJS Applications。

AngularJS控制器则控制着AngularJS Applications的行为。

ng-app指令用于指定application,而ng-controller指令则用来指定控制器。

<div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstName= "John";
  $scope.lastName= "Doe";
});
</script>

AngularJS模块定义applications:

var app = angular.module('myApp', []);
AngularJS控制器控制AngularJS Applications的行为:

app.controller('myCtrl', function($scope) {
  $scope.firstName= "John";
  $scope.lastName= "Doe";
});

在后面的章节中你将会学习到更多有关模块和控制器的内容。

Javascript 相关文章推荐
浅谈javascript中基本包装类型
Jun 03 Javascript
jquery实现可自动判断位置的弹出层效果代码
Oct 12 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
Mar 23 Javascript
Node.js实现兼容IE789的文件上传进度条
Sep 02 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
Feb 13 Javascript
vue 2.0组件与v-model详解
Mar 27 Javascript
详解基于vue的移动web app页面缓存解决方案
Aug 03 Javascript
js中less常用的方法小结
Aug 09 Javascript
js监听html页面的上下滚动事件方法
Sep 11 Javascript
vue项目中将element-ui table表格写成组件的实现代码
Jun 12 Javascript
ant-design-vue 快速避坑指南(推荐)
Jan 21 Javascript
微信小程序实现自定义底部导航
Nov 18 Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
Sep 27 #Javascript
浅谈javascript的Touch事件
Sep 27 #Javascript
Labelauty?jQuery单选框/复选框美化插件分享
Sep 26 #Javascript
浅谈Javascript中Object与Function对象
Sep 26 #Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
Jun 23 #Javascript
深入分析jsonp协议原理
Sep 26 #Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
Sep 26 #Javascript
You might like
php删除文件夹及其文件夹下所有文件的函数代码
2013/01/23 PHP
php的一个简单加密解密代码
2014/01/14 PHP
学习php设计模式 php实现抽象工厂模式
2015/12/07 PHP
Yii框架弹出框功能示例
2017/01/07 PHP
XENON基于JSON变种
2010/07/27 Javascript
jquery选择器需要注意的问题
2014/11/26 Javascript
使用jquery动态加载Js文件和Css文件
2015/10/24 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
2016/05/30 Javascript
AngularJS中的缓存使用
2017/01/11 Javascript
socket.io学习教程之基础介绍(一)
2017/04/29 Javascript
JS实现简易换图时钟功能分析
2018/01/04 Javascript
JavaScript执行环境及作用域链实例分析
2018/08/01 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
2018/08/25 Javascript
Vue封装的可编辑表格插件方法
2018/08/28 Javascript
用node开发并发布一个cli工具的方法步骤
2019/01/03 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
2020/02/14 Javascript
如何优雅地取消 JavaScript 异步任务
2020/03/22 Javascript
基于Vue全局组件与局部组件的区别说明
2020/08/11 Javascript
[02:21]十步杀一人,千里不留行——DOTA2全新英雄天涯墨客展示
2018/08/29 DOTA
python实现博客文章爬虫示例
2014/02/26 Python
Python中如何获取类属性的列表
2016/12/26 Python
Python使用re模块实现信息筛选的方法
2018/04/29 Python
Python3按一定数据位数格式处理bin文件的方法
2019/01/24 Python
python中的global关键字的使用方法
2019/08/20 Python
Django 限制访问频率的思路详解
2019/12/24 Python
Python实现结构体代码实例
2020/02/10 Python
安装并免费使用Pycharm专业版(学生/教师)
2020/09/24 Python
python从PDF中提取数据的示例
2020/10/30 Python
Python爬虫之Selenium下拉框处理的实现
2020/12/04 Python
利用CSS3把图片变成灰色模式的实例代码
2016/09/06 HTML / CSS
COS美国官网:知名服装品牌
2019/04/08 全球购物
应用电子专业学生的自我评价
2013/10/16 职场文书
仓库组长岗位职责
2014/01/29 职场文书
见习报告的格式
2014/11/04 职场文书
人代会简报
2015/07/21 职场文书
Python Flask实现进度条
2022/05/11 Python