本文介绍AngularJS JavaScript框架的基础知识，包括如何将AngularJS添加到HTML页面、核心指令如ng-app、ng-model及ng-bind的使用方法，以及AngularJS表达式的功能。
这只是本人查看教程以后的总结
AngularJS 简介
AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。
AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。
AngularJS 是一个 JavaScript 框架
AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。
AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中：
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
各个 angular.js 版本下载： https://github.com/angular/angular.js/releases
我们建议把脚本放在 <body> 元素的底部。
这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。
ng-app 指令定义一个 AngularJS 应用程序。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
ng-bind 指令把应用程序数据绑定到 HTML 视图。
通过ng-model指令可以动态的获取输入框中的值 然后通过AngularJS 表达式写在双大括号内：{{ expression }}。可以动态的获取
<p>名字 : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
如果您移除了 ng-app 指令，HTML 将直接把表达式显示出来，不会去计算表达式的结果。
<div ng-app="" ng-init="firstName='John'">
<p>姓名为 <span ng-bind="firstName"></span></p>
</div>
ng-bind 指令把应用程序数据绑定到 HTML 视图。而{{ expression }}是添加在元素内部
自制属性
HTML5 允许扩展的（自制的）属性，以 data- 开头。
AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。
AngularJS 表达式
AngularJS 表达式写在双大括号内：{{ expression }}。
AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。
AngularJS 将在表达式书写的位置"输出"数据。
AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。
实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
AngularJS 应用
AngularJS 模块（Module） 定义了 AngularJS 应用。
AngularJS 控制器（Controller） 用于控制 AngularJS 应用。
ng-app指令定义了应用, ng-controller 定义了控制器。
<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', []); //这个是AngularJS 模块
app.controller('myCtrl', function($scope) { //AngularJS 控制器（Controller）
$scope.firstName= "John";
$scope.lastName= "Doe";});
</script>
扫一扫
421
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
