注册 登录
  • 欢迎访问开心洋葱网站,在线教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入开心洋葱 QQ群
  • 欢迎访问开心洋葱网站,手机也能访问哦~欢迎加入开心洋葱多维思维学习平台 QQ群
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏开心洋葱吧~~~~~~~~~~~~~!

AngularJS 学习手记(一)

JavaScript 开心洋葱 1405次浏览 已收录 0个评论 手机上查看

什么是 AngularJS

AngularJS 学习手记(一)

AngularJS 是一个 JavaScript 框架

               它是一个以 JavaScript 编写的库。

AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中。

AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML。

            它可通过 <script> 标签添加到 HTML 页面。

在网页中加上:

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

就可以直接使用了。


AngularJS 扩展了 HTML

AngularJS 通过 ng-directives 扩展了 HTML。

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

<div ng-app="">

ng-model 指令把元素值(比如输入域的值)绑定到应用程序。

<input type="text" ng-model="name"/>

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

 <h1>Hello {{name}}</h1>



AngularJS 指令

AngularJS 指令是以 ng 作为前缀的 HTML 属性。

ng-init 指令初始化 AngularJS 应用程序变量。

<div ng-app="" ng-init="myname='yang'">
姓名为 <span ng-bind="myname"></span>


注意 :

HTML5 允许扩展的(自制的)属性,以 data- 开头,HTML5 允许扩展的(自制的)属性,以 data- 开头。

例如:

 <div data-ng-app="" data-ng-init="myname='yang'">


AngularJS 表达式

AngularJS 表达式写在双大括号内:{{ expression }},AngularJS 表达式写在双大括号内:{{ 10 + 10 }}



AngularJS 应用

AngularJS 模块(Module) 定义了 AngularJS 应用。

var app = angular.module('myTest', []);


AngularJS 控制器(Controller) 用于控制 AngularJS 应用。

app.controller('myCtrl', function($scope) {
    $scope.firstName= "Yang";
    $scope.lastName= "Tao";
});

ng-app指令定义了应用, ng-controller 定义了控制器

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


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= "Blue";
    $scope.lastName= "Sky";
});
</script>



开心洋葱 , 版权所有丨如未注明 , 均为原创丨未经授权请勿修改 , 转载请注明AngularJS 学习手记(一)
喜欢 (0)
[开心洋葱]
分享 (0)
关于作者:
开心洋葱,开心洋葱头,水墨

您必须 登录 才能发表评论!

加载中……