AngularJS基础学习笔记之简单介绍


Posted in Javascript onMay 10, 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="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/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 相关文章推荐
表单的一些基本用法与技巧
Jul 15 Javascript
JS在IE和FF下attachEvent,addEventListener学习笔记
Nov 26 Javascript
js 未结束的字符串常量错误解决方法
Jun 13 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
Jan 31 Javascript
使用jquery实现以post打开新窗口
Mar 19 Javascript
基于socket.io和node.js搭建即时通信系统
Jul 30 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
Apr 12 Javascript
jQuery网页版打砖块小游戏源码分享
Aug 20 Javascript
jquery实现表单获取短信验证码代码
Mar 13 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
Jul 19 Javascript
Node.js学习之查询字符串解析querystring详解
Sep 28 Javascript
mpvue+vant app搭建微信小程序的方法步骤
Feb 11 Javascript
JS实现仿QQ聊天窗口抖动特效
May 10 #Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
May 09 #Javascript
深入浅出分析javaScript中this用法
May 09 #Javascript
深入浅出理解javaScript原型链
May 09 #Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
May 09 #Javascript
JS动画效果打开、关闭层的实现方法
May 09 #Javascript
js实现顶部可折叠的菜单工具栏效果实例
May 09 #Javascript
You might like
第一节--面向对象编程
2006/11/16 PHP
PHPStudy下如何为Apache安装SSL证书的方法步骤
2019/01/23 PHP
PHP使用PDO操作sqlite数据库应用案例
2019/03/07 PHP
laravel实现上传图片并在页面显示的例子
2019/10/14 PHP
用JS实现一个页面多个css样式实现
2008/05/29 Javascript
仿迅雷焦点广告效果(JQuery版)
2008/11/19 Javascript
修复ie8&amp;chrome下window的resize事件多次执行
2011/10/20 Javascript
jQuery实现放大镜效果实例代码
2016/03/17 Javascript
JS HTML5实现拖拽移动列表效果
2020/08/27 Javascript
纯JS代码实现隔行变色鼠标移入高亮
2016/11/23 Javascript
Bootstrap源码学习笔记之bootstrap进度条
2016/12/24 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
2017/01/18 Javascript
Bootstrap 中data-[*] 属性的整理
2018/03/13 Javascript
python发腾讯微博代码分享
2014/01/10 Python
pymongo实现多结果进行多列排序的方法
2015/05/16 Python
Python编程实现从字典中提取子集的方法分析
2018/02/09 Python
pyhton列表转换为数组的实例
2018/04/04 Python
Python3.5文件修改操作实例分析
2019/05/01 Python
Django 模型类(models.py)的定义详解
2019/07/19 Python
对python中的装包与解包实例详解
2019/08/24 Python
浅谈tensorflow中Dataset图片的批量读取及维度的操作详解
2020/01/20 Python
TensorBoard 计算图的可视化实现
2020/02/15 Python
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
2012/11/29 HTML / CSS
澳大利亚波西米亚风情网上商店:Czarina
2019/03/18 全球购物
linux面试题参考答案(3)
2012/09/13 面试题
生日宴会主持词
2014/03/20 职场文书
党员大会主持词
2014/04/02 职场文书
求职自我评价范文100字
2014/09/23 职场文书
2014年班组建设工作总结
2014/12/01 职场文书
寒假安全保证书
2015/02/28 职场文书
销售经理岗位职责范本
2015/04/02 职场文书
2015年个人审计工作总结
2015/04/07 职场文书
MySQL的安装与配置详细教程
2021/06/26 MySQL
Redis安装使用RedisJSON模块的方法
2022/03/23 Redis
铁拳制作人赞《铁拳7》老头环Mod:制作精良 但别弄了
2022/04/03 其他游戏
Python简易开发之制作计算器
2022/04/28 Python