您的位置：首页 > Web前端 > AngularJS

AngularJS的初步学习（1）

2015-11-03 15:34 267 查看

AngularJS 是一个Javascript框架。它可通过 <script> 标签添加到 HTML 页面。AngularJS 通过指令扩展了 HTML，且通过表达式绑定数据到 HTML。是一个以 JavaScript 编写的库，是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中：

<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>

AngularJS 通过ng-directives扩展了 HTML;

ng-app指令定义一个 AngularJS 应用程序;

ng-model指令把元素值（比如输入域的值）绑定到应用程序;

ng-bind指令把应用程序数据绑定到 HTML 视图。

<1>实例一:

<body>
<div ng-app="">
<p>请输入您的姓名：</p>
<p>姓名：<input  type="text"  ng-model="name"/></p>
<p ng-bind="name"></p>
</div>
<script src="Scripts/angular.min.js"></script>
</body>

当网页加载完毕，AngularJS 自动开启。ng-app指令告诉 AngularJS，<div> 元素是 AngularJS应用程序的"所有者"；ng-model指令把输入域的值绑定到应用程序变量name；ng-bind指令把应用程序变量name绑定到某个段落的innerHTML。

可能有时间也是比较好奇的，AngularJS究竟是什么？其实我也不得不说，我之前也在好奇，但是看过后我就了解了一些。其实AngularJS 把应用程序数据绑定到HTML元素，可以克隆、重复、隐藏和显示HTML元素等，这样说来就是对html的操作的啦。而变一种方式，AngularJS指令是以ng作为前缀的HTML属性，这样说起来或许你就认为简单了吧。

<2>实例二

<body>
<script src="Scripts/angular.min.js"></script>
<div data-ng-app="" ng-init="firstName='啦啦'">
<p>姓名为：<span ng-bind="firstName"></span></p>
</div>
</body>

如上所示，ng-init指令初始化 AngularJS 应用程序变量

<3>实例三

<body>
<script src="Scripts/angular.min.js"></script>
<div ng-app="">
<p>我的第一个表达式： {{ 5 + 5 }}</p>
</div>
</body>

表达式写在双大括号内{{}},在表达式书写的位置"输出"数据，和JavaScript 表达式：它们可以包含文字、运算符和变量。

<4>.实例四

<body>
<script src="Scripts/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
名:<input type="text" ng-model="firstName" />
姓：<input type="text" ng-model="lastName"  />
<br />
姓名:{{firstName+""+lastName}}
</div>
</body>
</html>
<script>
var app = angular.module("myApp", []);
app.controller("myController", function ($scope) {
$scope.firstName = "果果";
$scope.lastName = "啦啦";
})
</script>

AngularJS模块（Module）定义了 AngularJS 应用，控制器（Controller）用于控制AngularJS应用，ng-app指令定义了应用, ng-controller定义了控制器。而变量app的定义就是AngularJS 模块定义应用，下面的即是控制器控制应用。好啦，就写到这里啦，嘿嘿。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航