AngularJS 学习教程

最新推荐文章于 2024-07-20 23:54:17 发布

转身_cache

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量577

点赞数 1

分类专栏：日志管理文章标签： AngularJS AngularJS教程 javascript 谷歌前端js框架

本文链接：https://blog.csdn.net/qinxuefly/article/details/52794807

版权

日志管理专栏收录该内容

2 篇文章 0 订阅

订阅专栏

AngularJS学习教程

简介

AngularJS 是Google的一个 JavaScript 框架，旨在简化前端应用程序的开发。

AngularJS 是比较新的技术，版本 1.0 是在 2012 年发布的。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。

AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中

参考教程：

http://www.runoob.com/angularjs/angularjs-intro.html

引入方式：

<script src="http://{cdn.static}/libs/1.5.8/angular.min.js"></script>

Demo运行地址：

http://www.runoob.com/try/try.php?filename=try_ng_intro

游览器兼容性：

AngularJS 1.3以后抛弃了对IE8的支持。

AngularJS 1.2将继续支持IE8

如果出现兼容性问题，请找度娘，G哥解决吧！

特性：

1) 双向的数据绑定

2) HTML模板

3) MVVM（Moodel-View-ViewModel）

4) 依赖注入

5) Directives（指令）

6) 内置测试用例

接下来针对AngularJS 的特性一一做介绍，详细的标签使用大家可以参考教程自己深度挖掘。

双向数据绑定

数据绑定可能是AngularJS最酷最实用的特性。它能够帮助你避免书写大量的初始代码从而节约开发时间。

你可以声明绑定的模型到 HTML 元素。当模型发生变化时，视图会自动更新，反之亦然。这可以减少大量的传统样板代码，保持模型和视图同步。

Demo1：

Input输入框和<h1>元素的双向绑定：

Input输入框数据的变化会被自动的更新到<h1>元素中，相对于jquery而言，避免联动代码的开发，让页面变的更清洁。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.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>

Demo2：

checkbox和按钮是否可以点击双向绑定：

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

<div ng-app="" ng-init="mySwitch=true">
<p>
<button ng-disabled="mySwitch">点我!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch"/>按钮
</p>
<p>
{{ mySwitch }}
</p>
</div> 

</body>
</html>

HTML模板

AngularJS 使用 HTML 模板，这使事情变得简单，并允许设计人员和开发人员同时工作。

最大的好处是为设计师和开发者创建了一个紧密的工作流。设计师可以像往常一样开发标签，然后开发者拿过来添加上功能，通过数据绑定将会使得这个过程非常简单。

Demo3：

将标题属性绑定到<h1>标签中：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">

<h1 ng-repeat="x in records">{{x}}</h1>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.records = [
    "菜鸟教程1",
    "菜鸟教程2",
    "菜鸟教程3",
    "菜鸟教程4",
  ]
});
</script>

</body>
</html>

Demo4：

循环图片数组并且加入img模板：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
  <ul> 
    <li ng-repeat="image in images"> 
      <img ng-src="{{image.thumbnail}}" alt="{{image.description}}"> 
    </li> 
  </ul> 
</div> 
	
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function AlbumCtrl($scope) { 
    $scope.images = [ 
        {"thumbnail":"img/image_01.jpg", "description":"Image 01 description"}, 
        {"thumbnail":"img/image_02.jpg", "description":"Image 02 description"}, 
        {"thumbnail":"img/image_03.jpg", "description":"Image 03 description"}, 
        {"thumbnail":"img/image_04.jpg", "description":"Image 04 description"}, 
        {"thumbnail":"img/image_05.jpg", "description":"Image 05 description"}, 
    ]
});
</script>

</body>
</html>

MVVM（Moodel-View-ViewModel）

MVVM模式是Model-View-ViewMode（模型-视图-视图模型）模式的简称，其最早出现在微软的WPF和Silverlight框架中。MVVM模式利用框架内置的双向绑定技术对MVP（Model-View-Presenter）模式的变型，引入了专门的ViewModel（视图模型）来实现View和Model的粘合，让View和Model的进一步分离和解耦。

双向绑定确实非常使用，通过封装双向绑定中间加了一个概念层ViewMode。

个人感觉跟jquery的mvc基本类似，只不过jquery需要额外的大量js开发。

依赖注入

依赖注入（Dependency Injection，即DI）

AngularJS拥有内建的依赖注入子系统，可以帮助开发人员更容易的开发，理解和测试应用。

DI允许你请求你的依赖，而不是自己找寻它们。比如，我们需要一个东西，DI负责找创建并且提供给我们。

得到核心的AngularJS服务，只需要添加一个简单服务作为参数，AngularJS会侦测并且提供给你：

function EditCtrl($scope, $location, $routeParams) {
     // Something clever here...
}

Demo5：

循环图片数组并且加入img模板：

<html>
   
   <head>
      <meta charset="utf-8">
      <title>AngularJS  依赖注入</title>
   </head>
   
   <body>
      <h2>AngularJS 依赖注入</h2>
      
      <div ng-app = "mainApp" ng-controller = "CalcController">
         <p>输入一个数字: <input type = "number" ng-model = "number" /></p>
         <button ng-click = "square()">X<sup>2</sup></button>
         <p>结果: {{result}}</p>
      </div>
      
      <script src="../angular.min.js"></script>
      
      <script>
         <span style="background-color: rgb(255, 255, 0);">// 定义一个模块</span>
         var mainApp = angular.module("mainApp", []);
	
         <span style="background-color: rgb(255, 255, 0);">// 使用 value给defaultInput赋值</span>		
         mainApp.value("defaultInput", 5);
         
         <span style="background-color: rgb(255, 255, 0);">// 创建MathService的factory和具体的方法	</span>
         mainApp.factory('MathService', function() {
            var factory = {};
            
            factory.multiply = function(a, b) {
               return a * b;
            }
            return factory;
         });
                  
         <span style="background-color: rgb(255, 255, 0);">// 封装一个CalcService暴露调用</span>	
         mainApp.service('CalcService', function(MathService){
            this.square = function(a) {
               return MathService.multiply(a,a);
            }
         });
                          
         <span style="background-color: rgb(255, 255, 0);">// 将CalcService和参数传递到控制器</span> 
         mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
            $scope.number = defaultInput;
            $scope.result = CalcService.square($scope.number);

            $scope.square = function() {
               $scope.result = CalcService.square($scope.number);
            }
         });
			
      </script>
      
   </body>
</html>

Directives（指令）

AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。

除了内置的指令以外，

还可以用来创建自定义的标签。它们可以用来装饰元素或者操作DOM属性。

内置指令

ng-app 指令初始化一个 AngularJS 应用程序。

ng-init 指令初始化应用程序数据。

ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

ng-repeat 指令会重复一个 HTML 元素

Demo6：

<span style="background-color: rgb(255, 255, 51);"><!-- 指定一个AngularJS程序，并初始化 firstName 为 'John' --></span>
<div ng-app="" ng-init="firstName='John'">

  <p>在输入框中尝试输入：</p>                       
   <span style="background-color: rgb(255, 255, 0);"><!-- 将<input/>的输入值绑定到firstName变量 --> </span>
  <p>姓名：<input type="text" ng-model="firstName"></p>
   <span style="background-color: rgb(255, 255, 0);"><!-- 输出firstName变量 --></span> 
  <p>你输入的为： {{ firstName }}</p>

</div>

自定义指令

其实就是自定义标签

Demo7：

<html>
   
   <head>
      <meta charset="utf-8">
      <title>AngularJS  Directives（自定义指令）</title>
   </head>
   
   <body>
      <h2>AngularJS Directives（自定义指令）</h2>
      
	<div ng-app="myApp">
          <span style="background-color: rgb(255, 255, 0);"><!-- 自定义标签使用 --> </span>
	  <runoob-directive></runoob-directive>
	</div>
      
    <script src="../angular.min.js"></script>
    <script>
		var app = angular.module("myApp", []);
               <span style="background-color: rgb(255, 255, 0);">//使用directive声明标签注意格式遇到大写字母会加【-】 </span>
		app.directive("runoobDirective", function() {
			return {
				template : "<h3>h3大小的自定义指令!</h3>"
			};
		});
	</script>
   </body>
</html>

内置测试用例

暂时使用不到！当AngularJS的代码量达到一定程度才会用到。

需要使用karma和jasmine来进行ng模块的单元测试.

什么是Karma？

karma是一个单元测试的运行控制框架,提供以不同环境来运行单元测试,比如chrome,firfox,phantomjs等,测试框架支持jasmine,mocha,qunit,是一个以nodejs为环境的npm模块.

什么是jasmine？

jasmine是一个行为驱动开发的测试框架,不依赖任何js框架以及dom,是一个非常干净以及友好API的测试库.

参考教程：

http://www.jb51.net/article/58230.htm

转身_cache

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS 学习教程

AngularJS学习教程简介AngularJS 是Google的一个JavaScript 框架，旨在简化前端应用程序的开发。AngularJS 是比较新的技术，版本 1.0是在 2012年发布的。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS 是以一个 JavaScript文件形式发布的，可通过 script标签添加
复制链接

扫一扫