【03】AngularJS 简介

AngularJS 简介


AngularJS
是一个 JavaScript 框架。它不过经
<script> 标签上加到 HTML 页面。

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

 

 

AngularJS 通过新的性能和表达式扩展了 HTML。

AngularJS 可以构建一个单一页面应用程序(SPAs:Single Page
Applications)。

 

她是一个缘 JavaScript 编写的库房。

AngularJS
是以一个 JavaScript 文件形式宣告的,可透过 script
标签添加到网页遭到:

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

 

 

  我们建议把脚本放在 <body> 元素的底部。
这会提高网页加载速度,因为 HTML 加载不受制于脚本加载。

AngularJS 扩展了 HTML

AngularJS
通过 ng-directives(指令) 扩展了
HTML。

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

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

ng-bind 指令把应用程序数据绑定到 HTML
视图。(魔芋:应用程序输出)

 

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <div ng-app="">
  5. <p>在输入框中尝试输入:</p>
  6. <p>姓名:<input type="text" ng-model="name"></p>
  7. <p ng-bind="name"></p>
  8. </div>
  9. <script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
  10. </body>
  11. </html>

魔芋结果:

图片 1

 

 

实例讲解:

当网页加载了,AngularJS
自动开启。

ng-app 指令告诉
AngularJS,<div> 元素是 AngularJS 应用程序 的”所有者”。

ng-model 指令把输入域的价绑定到应用程序变量 name

ng-bind 指令把应用程序变量 name 绑定到某某段落的
innerHTML。

 

  如果您移除了 ng-app 指令,HTML 将直接把表达式显示出来,不会去计算表达式的结果。

魔芋练习:

  1. <div class="moyu" ng-app="">
  2. <input class="ceshi" ng-model ="moyu" type="text">
  3. </div>

效果:

图片 2

 


AngularJS 指令

凑巧而你所盼底,AngularJS
指令是因 ng 作为前缀的 HTML 属性。

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

 

  1. <div ng-app="" ng-init="firstName='John'">
  2. <p>姓名为</p>
  3. </div>

图片 3

 

 

  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 定义了控制器。

  1. <div ng-app="myApp" ng-controller="myCtrl">
  2. 名:<input type="text" ng-model="firstName"><br>
  3. 姓:<input type="text" ng-model="lastName"><br>
  4. <br>
  5. 姓名:{{firstName +" "+ lastName}}
  6. </div>
  7. <script>
  8. var app = angular.module('myApp',[]);
  9. app.controller('myCtrl',function($scope){
  10. $scope.firstName="John";
  11. $scope.lastName="Doe";
  12. });
  13. </script>

图片 4

AngularJS
模块定义应用:

 

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

 

 

AngularJS
控制器控制下:

 

  1. app.controller('myCtrl',function($scope){
  2. $scope.firstName="John";
  3. $scope.lastName="Doe";
  4. });

 

 

=

 

=

相关文章