AngularJS 学习笔记 一

AngularJs 可以让你对现有的HTML词汇进行扩展,这样一来可以使得你的App变得非常易读而又富有表现力,同时也能加快你的开发效率。

AngularJs 就是一个Javascript框架 ,

AngularJs 可以对其功能进行扩展或者与其他库结合使用。其中每一个功能你都可以自定义或者将其替换以满足你开发过程和需要。

<!DOCTYPE html />
<html>
<head>
<title>我的第一個AngularJS頁面</title></head>
<body ng-app="" ng-init="txtName='凱尼妹的玩笑'">
當前登錄:<label id="Label1" ng-bind="txtName"></label>
<div >
請輸入用戶名:<input type="text" id="txtName" ng-model="txtName" name="txtName" />
</div>
<p>Hello {{txtName}} !</p>
<!--建议把脚本放到<body>元素的底部。这会提高网页加载速度,因为Html加载不受限与脚本加载-->
</body>
<script src="//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js"></script>
</html>

ng-app: 告诉AngularJS在页面上激活的位置,在本例中意味着全文件有效。

angular.min.js: 加载AngularJS
ng-model: 将form和model建立关系并绑定。这意味着你对该控件内的任何修改都会对model内的数据作实时更新,相对的,model内数据的变更也会改变控件的显示。

{{yourName}}: “{{ }}”是一种在HTML页面上制定绑定显示位置的申明方式,AngularJS会在“yourname”值变更的同时自动替换该处的文本

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

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

 

HTML5 允许扩展的(自制的)属性,以 data- 开头。
AngularJS 属性以 ng- 开头,但是您可以使用 data-ng- 来让网页对 HTML5 有效。

 

本文参考:http://www.cnblogs.com/zhiguan/archive/2013/05/20/angularjs_introduction.html

http://www.w3cschool.cc/angularjs/angularjs-intro.html

posted @ 2014-03-24 11:58  ElvinLong  阅读(191)  评论(0编辑  收藏  举报