AngularJS 001：初识

互联网技术总是在快速更新，正所谓，去年今日此门中，人面桃花相映红，人面不知何处去，桃花依旧笑春风。技术的变化推动这开发模式的改变；易经中一个重要的思想就是：变。世界无时无刻不在变化，所以我们要不断学习以适应这种变化。如今我们不光要不断学习，还需要快速学习，快速掌握新知识，以应对技术的不断更新。

AngularJS历史就不多介绍了，其本质来说，AngularJS并不是新发明，只是一种改进罢了。它的基础还是javascript，工程师们用js写了很多函数，从而形成了一个框架，一个新的开发模式。所以只要理解JS，html，css这些基本技术的小伙伴们，anjularjs很好上手。

以下所有代码，都以Asp.net为展现平台，和大家一起了解下AngularJS如何使用，

所谓，纸上得来终觉浅,绝知此事要躬行。直接代码来说话。

以下所有代码工程文件：http://download.csdn.net/detail/yysyangyangyangshan/9691429

先使用一个angularJS的js文件（工程中包含有，可下载整个工程文件），

第一个angularJS程序

代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta charset="utf-8">
<script src="/Scripts/angular.min.js"></script>
</head>
<body>
   <div ng-app="">
 	<p>名字 : <input type="text" ng-model="name"></p>
 	<h1>Hello {{name}}</h1>
</div>

</body>
</html>

效果如下

这里有几个特别的属性，
ng-app 指令定义一个 AngularJS 应用程序。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

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

AngularJS 指令
ng-为前缀的，一般是指令。
比如，看一下如何初始化值，

<!--anjularjs初始化-->
<div ng-app="" ng-init="firstName='yys'">
<p>姓名为 <span ng-bind="firstName"></span></p>
</div>

效果：

ng-init，是一个指令，初始化了一个值。

上面我们注意到是ng-开头的，这种是普通html属性，
angularJS还支持html5的扩展，它使用data-ng开头的，比如

<!--Html5扩展-->
    <div data-ng-app="" data-ng-init="firstName='yys'">
        <p>姓名为 <span data-ng-bind="firstName"></span></p>
    </div>

效果

AngularJS 表达式
表达式格式为：{{ expression }}。
如下代码

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

效果

AngularJS 应用

  <!--应用-->
<div ng-app="myFirstApp" ng-controller="myFirstCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>
<script>
    var app = angular.module('myFirstApp', []);
    app.controller('myFirstCtrl', function ($scope) {
        $scope.firstName = "Sam";
        $scope.lastName = "Yang";
    });
</script>

效果

ng-app指令定义了应用, ng-controller 定义了控制器。
模块（Module）定义了 AngularJS 应用。
控制器（Controller）用于控制 AngularJS 应用。

猜你喜欢