AngularJS初步认识

今天开始接触AngularJS。

1、AngularJS是一个javascript框架,通过script标签添加的到页面中

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

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

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

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

3、

 <html>
 <head>
 <meta charset="utf-8">
 <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
 </head>
 <body>

 <div ng-app="">
  <p>名字 : <input type="text" ng-model="name"></p>
  <h1>Hello {{name}}</h1>
 </div>

 </body>
 </html>

 讲解:网页加载完毕,AngularJS自动开启

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

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

4、

 <div data-ng-app="" data-ng-init="firstName='John'">
 <p>姓名为 <span data-ng-bind="firstName"></span></p>
 </div>

 讲解:

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

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

 ng前加上 data- 网页对HTML5有效

5、AngularJS表达式

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
 </head>
 <body>

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

 </body>
 </html>

 讲解:

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

 AngularJS表达式将数据绑定到HTML

 AngularJS将在表达式书写的位置“输出”数据

6、

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

 讲解:

 AngularJS模块(Moodule)定义了AngularJS应用

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

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

 在 angular.module(‘myApp’, [] )中,有个空的数组,这个数组是myApp模块所依赖的模块的列表
 scope是AngularJS的作用域

猜你喜欢

转载自blog.csdn.net/t_Login/article/details/52098451