AngularJS 基础入门（指令篇）

最新推荐文章于 2021-01-08 15:01:34 发布

数据中国

最新推荐文章于 2021-01-08 15:01:34 发布

阅读量1.2k

点赞数

分类专栏： AngularJS 文章标签： AngularJS ng-modle js web开发 javascript

本文链接：https://blog.csdn.net/chndata/article/details/47025273

版权

AngularJS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、介绍

AngularJS 是google 开发者设计的一个前端开发框架，它是由是由javascript 编写的一个JS框架。通常它是用来在静态网页构建动态应用不足而设计的。

AngularJS特点如下：

REST Client： RestFul 是主流的接口模式，而AngularJS实现RestFul 接口客户端只需要一行代码即可。

MVVM（Model-View-ViewModel）模式： Model 简单数据对象，View 视图（如HTML,JSP等），ViewModel是用来提供数据和方法，和View 进行交互。这种设计模式使得代码解耦合。

数据绑定： AngularJS是数据双向绑定。

依赖注入：AngularJS支持注入方式把需要的对象，方法等注入到指定的对象中。

指令： AngularJS内部自带各种常用指令，同时也支持开发者自定义指令。

HTML模板和扩展HTML： AngularJS可以定义与HTML兼容的自定义模板。

二、开始AngularJS

1. lib 引用，在HTML中引入anjularJS lib，如下：

[html]view plaincopy 
   
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>  

可以在AngularJS官网( https://angularjs.org/ )下载最新的版本 (1.3.8) 。

2. 简单例子：

[html]view plaincopy 
   
 <!DOCTYPE html>  
 <html>  
   
 <head>  
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>  
 </head>  
   
 <body>  
   
 <div ng-app="" ng-controller="personController">  
   
 First Name: <input type="text" ng-model="firstName"><br>  
 Last Name: <input type="text" ng-model="lastName"><br>  
 <br>  
 Full Name: {{firstName + " " + lastName}}  
   
 </div>  
   
 <script>  
 function personController($scope) {  
     $scope.firstName = "John";  
     $scope.lastName = "Doe";  
 }  
 </script>  
   
 </body>  
 </html>  

该例子将会在后续讲解到。

http://campus.codeschool.com/courses/shaping-up-with-angular-js/

三、常用指令

1. Expression: AngularJS 使用双大括号 {{}} 取值。

2. ng-app：初始化AngularJS应用，ng-app 是用来声明使用AngularJS加载页面。

3. ng-bind: 根据HTML元素的变量名，把HTML 元素的值绑定到指定的元素上。

[html]view plaincopy 
   
 <!DOCTYPE html>  
 <html>  
   
 <head>  
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>  
 </head>  
   
 <body>  
   
 <div ng-app="">  
     <p>Name: <input type="text" ng-model="name"></p>  
     <p ng-bind="name"></p>  
 </div>  
   
 </body>  
 </html>  

4. ng-init: 初始化应用数据,使用方式如下：

[html]view plaincopy 
   
 <!DOCTYPE html>  
 <html>  
   
 <head>  
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/<span style="font-family: Arial, Helvetica, sans-serif;">1.2.26</span><span style="font-family: Arial, Helvetica, sans-serif;">/angular.min.js"></script></span>  
 </head>  
   
 <body>  
   
 <div ng-app="" ng-init="firstName='John'">  
   
 <p>Name: <input type="text" ng-model="firstName"></p>  
 <p>You wrote: {{ firstName }}</p>  
   
 </div>  
 <script>  
 function personController($scope) {  
     $scope.firstName = "John";  
     $scope.lastName = "Doe";  
 }  
 </script>  
   
 </body>  
 </html>  

一般情况下，初始化参数不使用ng-init, 我们会使用model或controller代替它，关于model和controller 会在下面介绍到。

5. ng-model： ng-model 会绑定HTML controller 的值到应用数据，使用方式如下：

[html]view plaincopy 
   
 <!DOCTYPE html>  
 <html>  
   
 <head>  
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/<span style="font-family: Arial, Helvetica, sans-serif;">1.2.26</span><span style="font-family: Arial, Helvetica, sans-serif;">/angular.min.js"></script></span>  
 </head>  
   
 <body>  
   
 <div ng-app="" ng-controller="personController">  
   
 First Name: <input type="text" ng-model="firstName"><br>  
 Last Name: <input type="text" ng-model="lastName"><br>  
 <br>  
 Full Name: {{firstName + " " + lastName}}  
   
 </div>  
   
 <script>  
 function personController($scope) {  
     $scope.firstName="John",  
     $scope.lastName="Doe"  
 }  
 </script>  
   
 </body>  
 </html>  

ng-model 还具有以下功能：

a.为应用数据提供类型验证（number，require,emai, 将在第七节介绍）;

b.为应用数据显示状态（invalid, dirty, touched, error, 将在第七节介绍）;

c. 为HTML 元素提供css 样式；

d. 绑定元素到表单中。

6. ng-controller

AngularJS 应用时被controller控制的。

[html]view plaincopy 
   
 <!DOCTYPE html>  
 <html>  
   
 <head>  
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/<span style="font-family: Arial, Helvetica, sans-serif;">1.2.26</span><span style="font-family: Arial, Helvetica, sans-serif;">/angular.min.js"></script></span>  
 </head>  
   
 <body>  
   
 <div ng-app="" ng-controller="personController">  
   
 First Name: <input type="text" ng-model="firstName"><br>  
 Last Name: <input type="text" ng-model="lastName"><br>  
 <br>  
 Full Name: {{fullName()}}  
   
 </div>  
   
 <script>  
 function personController($scope) {  
     $scope.firstName = "John",  
     $scope.lastName = "Doe",  
     $scope.fullName = function() {  
         return $scope.firstName + " " + $scope.lastName;  
     }  
 }  
 </script>  
   
 </body>  
 </html>  

ng-controller="personController" 是指定controller 对象的名称，在controller 对象中，可以定义属性（$scope.firstName）, 方法（$scope.fullName=function(){...}）等。

在上面例子中，在personController 对象中创建了两个属性(变量)，一个函数（function）。

7. ng-repeat, 是通过遍历集合，循环clone HTML 元素，类似 for each 功能。

[html]view plaincopy 
   
 <!DOCTYPE html>  
 <html>  
   
 <head>  
 <pre name="code" class="html"><script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>  

[html]view plaincopy 
   
 <div ng-app="" ng-init="names=[{name:'Jani',country:'Norway'},{name:'Hege',country:'Sweden'},{name:'Kai',country:'Denmark'}]">  

[html]view plaincopy 
   
 <li ng-repeat="x in names"> {{ x.name + ', ' + x.country }} </li>  

8. ng-disabled：禁用元素（text,button, checkbox等），其值为ture 或false 或者一个返回boolean 的表达式等。

[html]view plaincopy 
   
 <!DOCTYPE html>  
 <html>  
   
 <head>  
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>  
 </head>  
   
 <body>  
   
 <div ng-app="" ng-controller="personController">  
 <input type="button" ng-click="toggle()" value="Toggle1"><br>  
 <input type="button" ng-disabled="disabledFlag" value="Toggle2"><br>  
 <br>  
   
 </div>  
   
 <script>  
 function personController($scope) {  
     $scope.disabledFlag = false,  
     $scope.toggle = function() {  
         $scope.disabledFlag = !$scope.disabledFlag;  
         return $scope.disabledFlag;  
     }  
 }  
 </script>  
   
 </body>  
 </html>  

9. ng-show: 显示HTML 元素，值为true时显示，否则不显示。

10. ng-hide: 隐藏HTML元素，和ng-show相反。

[html]view plaincopy 
   
 <!DOCTYPE html>  
 <html>  
   
 <head>  
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>  
 </head>  
   
 <body>  
   
 <div ng-app="" ng-controller="personController">  
   
 <button ng-click="toggle()">Toggle</button>  
   
 <p ng-show="myVar">  
 First Name: <input type="text" ng-model="firstName"><br>  
 Last Name: <input type="text" ng-model="lastName"><br>  
 <br>  
 Full Name: {{firstName + " " + lastName}}  
 </p>  
   
 </div>  
   
 <script>  
 function personController($scope) {  
     $scope.firstName = "John",  
     $scope.lastName = "Doe"  
     $scope.myVar = true;  
     $scope.toggle = function() {  
         $scope.myVar = !$scope.myVar;  
     };  
 }  
 </script>  
   
 </body>  
 </html>  

11. ng-click: 类似于click方法，定义AngularJS click 事件。

12. ng-include：包含指定一个内容（html, jsp, tag等）。

[html]view plaincopy 
   
 <div ng-include="'myUsers_List.htm'"></div>  

数据中国

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AngularJS 基础入门（指令篇）

一、介绍 AngularJS 是google 开发者设计的一个前端开发框架，它是由是由javascript 编写的一个JS框架。通常它是用来在静态网页构建动态应用不足而设计的。 AngularJS特点如下： REST Client： RestFul 是主流的接口模式，而AngularJS实现RestFul 接口客户端只需要一行代码即可。
复制链接

扫一扫

专栏目录