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 相关文章推荐
TimergliderJS 一个基于jQuery的时间轴插件
Dec 07 Javascript
jQuery之选择组件的深入解析
Jun 19 Javascript
关于jQuery判断元素是否存在的问题示例探讨
Jul 21 Javascript
JavaScript改变CSS样式的方法汇总
May 07 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
Sep 04 Javascript
详解javascript new的运行机制
Jan 26 Javascript
JavaScript设计模式之单体模式全面解析
Sep 09 Javascript
利用ES6的Promise.all实现至少请求多长时间的实例
Aug 28 Javascript
JS实现图片居中悬浮效果
Dec 25 Javascript
使用Vue如何写一个双向数据绑定(面试常见)
Apr 20 Javascript
vue2.0 可折叠列表 v-for循环展示的实例
Sep 07 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
Jul 10 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
GD输出汉字的函数的分析
2006/10/09 PHP
Laravel 4.2 中队列服务(queue)使用感受
2014/10/30 PHP
分享最受欢迎的5款PHP框架
2014/11/27 PHP
php随机显示指定文件夹下图片的方法
2015/07/13 PHP
浅析php中array_map和array_walk的使用对比
2016/11/20 PHP
PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(上)
2017/05/26 PHP
PHP实现向关联数组指定的Key之前插入元素的方法
2017/06/06 PHP
jquery与google map api结合使用 控件,监听器
2010/03/04 Javascript
javascript实现图像循环明暗变化的方法
2015/02/25 Javascript
详细分析JavaScript函数定义
2015/07/16 Javascript
JS实现图片高亮展示效果实例
2015/11/24 Javascript
分享bootstrap学习笔记心得(组件及其属性)
2017/01/11 Javascript
详解vue.js全局组件和局部组件
2017/04/10 Javascript
想用好React的你必须要知道的一些事情
2017/07/24 Javascript
js控制随机数生成概率代码实例
2019/03/21 Javascript
element form 校验数组每一项实例代码
2019/10/10 Javascript
使用webpack搭建pixi.js开发环境
2020/02/12 Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
2020/08/31 Javascript
vue router返回到指定的路由的场景分析
2020/11/10 Javascript
vue使用过滤器格式化日期
2021/01/20 Vue.js
Python itertools模块详解
2015/05/09 Python
python 查找字符串是否存在实例详解
2017/01/20 Python
对python内置map和six.moves.map的区别详解
2018/12/19 Python
python3正则提取字符串里的中文实例
2019/01/31 Python
Python 堆叠柱状图绘制方法
2019/07/29 Python
Anaconda3+tensorflow2.0.0+PyCharm安装与环境搭建(图文)
2020/02/18 Python
python 密码学示例——凯撒密码的实现
2020/09/21 Python
python爬虫今日热榜数据到txt文件的源码
2021/02/23 Python
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
Super-Pharm波兰:药房和香水在一个地方
2020/08/18 全球购物
员工自我鉴定
2013/10/09 职场文书
写给老婆的检讨书
2014/02/21 职场文书
高中升旗仪式演讲稿
2014/09/09 职场文书
2016年校园重阳节广播稿
2015/12/18 职场文书
创业计划书之美甲店
2019/09/20 职场文书
深度学习小工程练习之垃圾分类详解
2021/04/14 Python