AngularJS入门教程

jopen 10年前

angularjs是建立在这样的信念上的：即声明式编程应该用于构件用户界面以及编辑软件构件，而命令式编程适合表示业务逻辑。angularjs最奇妙之处在于它的自动化数据双向绑定功能。数据绑定能够帮助你避免书写大量的初始化代码从而节约开发时间，也让开发人员从频繁的操作DOM的痛苦深渊中解脱出来。无论是模型改变视图，还是视图影响模型，angularjs无疑都为静态HTML网页技术增添了不少色彩。当然其核心功能还包括模块化，MVC，语义化标签和依赖注入等。

与传统的jQuery等类库不同的是，angularjs更注重于我们想要什么（what），让机器想出如何去做（how），即声明式编程。Angularjs也是建立在这样的信念上的：即声明式编程应该用于构件用户界面以及编辑软件构件，而命令式编程适合表示业务逻辑。

Angularjs适合用来构建CRUD应用，而不适合用来开发游戏、图形界面编辑器等类型的应用。

废话这么多，大家也不能马上理解，下面就通过示例讲解的方式带领大家走进angularjs的奇妙世界。

要使用angularjs就需要在页面引入angualr.min.js文件。文件地址传送门：https://angularjs.org/。

 

Html代码如下：

<!DOCTYPE HTML >  <html ng-app="Store">           <head>                     <title>App</title>                     <script type="text/javascript" src="angularjs/angular.min.js"></script>                     <script type="text/javascript" src="angularjs/js/app.js"></script>           </head>           <body>                     <div ng-controller="StoreController as store">                              <ul ng-repeat="product in store.products">                                       <li>                                                 <h1>{{product.name}}</h1>                                                 <h2>{{product.price|currency}}</h2>                                                 <p>{{product.description}}</p>                                                 <button ng-show="product.canPurchase">Add to Cart</button>                                       </li>                              </ul>                     </div>           </body>  </html>

app.js代码如下：

(function(){           var app = angular.module('Store',[]);           app.controller('StoreController',function($scope){                     this.products = gem;           });                      var gem =[{                     name:'西瓜',                     price:2.95,                     description:'不甜不要钱哦',                     canPurchase:false,           },{                     name:'香蕉',                     price:3.95,                     description:'香蕉个巴拉',                     canPurchase:true,           },{                     name:'桃子',                     price:2.95,                     description:'吃个桃子，偷的浮生半日闲',                     canPurchase:true,           },{                     name:'苹果',                     price:2.95,                     description:'青苹果，酸酸甜甜就是我',                     canPurchase:false,           }]  })();

首先在html页面的html标签里有ng-app标记，ng-app标记的是angularjs应用的边界，告诉angularjs应该管理那一块。一个ng-app范围可以理解为一个模块，一个页面可以包含多个ng-app标记。

js创建模块方式如下：

var app = angular.module(‘Store’,[]);

如上我们创建了一个名为Store的模块，在页面中我们就可以用ng-app标记来引用。接下来我们看到了ng-controller控制器标记，一个ng-controller就是一个js函数。在ng-controller里我们可以注入$scope对象，$scope为上下文对象，其范围只在当前controller里有效。$scope对象的顶层对象是根$rootScope，定义在$rootScope的属性和方法为全局的属性和方法。

上面例子中，我们在controller里定义了变量products对象，在页面中我们是通过ng-repeat、ng-show和表达式输出products的详细信息。ng-repeat标记用来循环遍历数组或对象数组。ng-show标记表示是否显示该元素，与之对应的标记是ng-hide标记，表示是否隐藏元素。在angularjs中使用双大括号来输出表达式的值，例如｛｛product.name｝｝。

以上就是angularjs的基本使用，就是如此的简单，简单的标记组合就能创造出富态的页面。

官网：https://angularjs.org/