AngularJS快速入门指南02：介绍

时间：2022-12-22 18:29:49

　　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>

运行

AngularJS快速入门指南02：介绍 你可以使用前缀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";

});

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

AngularJS快速入门指南02：介绍的更多相关文章

  1. AngularJS快速入门指南03：表达式

    AngularJS通过表达式将数据绑定到HTML. AngularJS表达式 AngularJS表达式写在双大括号中:{{ 表达式语句 }}. AngularJS表达式绑定数据到HTML的方式与ng- ...

  2. AngularJS快速入门指南01：导言

    AngularJS使用新的attributes扩展了HTML AngularJS对单页面应用的支持非常好(SPAs) AngularJS非常容易学习 现在就开始学习AngularJS吧! 关于本指南 ...

  3. AngularJS快速入门指南20：快速参考

    thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...

  4. AngularJS快速入门指南19：示例代码

    本文给出的大部分示例都可以直接运行,通过点击运行按钮来查看结果,同时支持在线编辑代码. <div ng-app=""> <p>Name: <input ...

  5. AngularJS快速入门指南18：Application

    是时候创建一个真正的AngularJS单页面应用程序了(SPA). 一个AngularJS应用程序示例 你已经了解了足够多的内容来创建第一个AngularJS应用程序: My Note Save Cl ...

  6. AngularJS快速入门指南17：Includes

    使用AngularJS,你可以在HTML中包含其它的HTML文件. 在HTML中包含其它HTML文件? 当前的HTML文档还不支持该功能.不过W3C建议在后续的HTML版本中增加HTML import ...

  7. AngularJS快速入门指南16：Bootstrap

    thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...

  8. AngularJS快速入门指南15：API

    thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...

  9. AngularJS快速入门指南14：数据验证

    thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...

随机推荐

  1. PHP的日期和时间处理函数

    1. 将日期和时间转变为时间戳 1.1 time() 原型:time(void) 作用:返回当前时间的 UNIX时间戳. 参数:void,可选(即无参数) 1.2 mktime() 原型:int mk ...

  2. 安装最新版本的PHPUnit后，不能使用

    我使用的是widows系统.本来3.7.8版本的Phpunit用的是非常顺畅的,最近重新安装phpunit,安装了最小版本,然后在使用的时候就会报很多各种错误.无奈之下只能降版本到3.7.8 首先要卸 ...

  3. 04传智&lowbar;jbpm与OA项目&lowbar;部门模块改进&lowbar;直接在BaseAction中实现ModelDriven&lt&semi;T&gt&semi;

    这个项目是用Struts2做的,我这里单独写了一个BaseAction,用来存放所有的功能模块的Action的公共部分, 刚开始的做法是这个BaseAction只会继承ActionSupport 并不 ...

  4. Java之Ajax技术

    ajax(asynchronouse javascript and xml) 异步的javascript 和 xml(现在常把xml换成json): ajax是2005年提出的,在2006,2007年 ...

  5. Jquery判断离开页面时，通过Ajax更新数据（兼容IE&comma;Chrome，FF浏览器）

    现在很多项目都有客户离开网页时,处理一些业务的需求.所以焦点就聚集在了如何获取页面离开事件. 以下是本人在一个项目中需要记录页面浏览时长的处理办法,测试兼容IE,Chrome,FF浏览器 代码如下: ...

  6. 20145120 《Java程序设计》实验四实验报告

    20145120 <Java程序设计>实验四实验报告 实验名称:Android开发基础 实验目的与要求: 用SDK成功编译出HelloWorld 实验内容.步骤 PSP 步骤 耗时 百分比 ...

  7. 不知道帐号密码的情况下完全重装Mac Min的OS X10&period;7系统

    现状: 1.原系统OS X 10.7 2.老账号不知道密码 3.Mac小盒子 目的: 1.删除老账号 2.更新系统到10.9以上 尝试过程1: 1.按住option键 + 开机 2.选择“磁盘工具” ...

  8. 给右键 添加dos命令

    reg add "HKEY_CURRENT_USER\Console" /v "ScreenBufferSize" /t REG_DWORD /d 655361 ...

  9. Sniffer抓包教程

    上网络信息安全的时候用了下,中途出现了一堆奇葩的事,这里就不提了... 上教程: 先把虚拟机里面的防火墙给关了,主机防火墙也关了 之前由于ip自己设置了,然后一直ping不通,后面把ip改成自动获取就 ...

  10. 【WPF】修改数据层ViewModel后，UI界面未同步更新

    界面:WPF(MVVM)中将集合类控件ItemsControl的ItemsSource绑定到了ViewModel中的ObservableCollection列表,ItemsControl.ItemTe ...

相关文章