Angular js 的学习（一） -

jinhonglin001

浏览: 15166 次
性别:

最近访客更多访客>>

haiyangyiba

suncong1024

fmbobin

Baby真卑鄙

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Angular js 的学习（一）

初涉Angular js，还有许多不懂的地方，初步将自己学到的东西记录下来，便于日后的学习。

一、Angular js简介

AngularJs是一个JavaScript框架。他是一个以JavaScript编写的库，通过指令扩展HTML,通过表达式绑定数据到HTML。

二、AngularJs指令

AngularJs通过指令这一属性来扩展HTML,带有前缀ng-

ng-app 用来初始化一个AngularJs应用程序。

ng-init 用来初始化应用程序数据。

ng-model 用来把元素值绑定到应用程序中。

下面是一个应用AngularJs的实例：

<!DOCTYPE html>
<html>
<body>

<div ng-app="">
 	<p>在输入框中尝试输入：</p>
 	<p>姓名：<input type="text" ng-model="name"></p>
 	<p ng-bind="name"></p>
</div>

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

</body>
</html>

上面的效果如下(截了下屏，怕不清楚把边框瞄了下)：

三、AngularJs表达式

AngularJs表达式写在双括号内{{ }}。

AngularJs表达式把数据绑定到HTML上，与ng-bind差不多

AngularJs表达式将在表达式书写的位置“输出”数据。

AngularJs表达式可以包含文字，运算符和变量。

例：

<!DOCTYPE html>
<html>
<body>

<div ng-app="">
 	<p>我的第一个表达式： {{ 5 + 5 }}</p>
</div>

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

</body>
</html>

运行结果如下：

四、AngularJs控制器

AngularJs控制器控制AngularJs应用程序的数据。

AngularJs控制器同时也是JavaScript对象

使用指令ng-controller定义AngularJs控制器

例：

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

名: <input type="text" ng-model="firstName"><br>
名: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}

</div>

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

效果如下：

今天的大概就先来了解一下AngularJs，还有许多许多不理解的地方，例如控制器的写法为什么里面要写$scope 写别的不可以吗？？