文档章节

AngularJS入门笔记

立志尚早
 立志尚早
发布于 2014/08/25 11:01
字数 939
阅读 4205
收藏 10

原文:AngularJS入门笔记

前端时间在网上看技术文档时,无意间就发现了它——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-repeatng-show和表达式输出products的详细信息。ng-repeat标记用来循环遍历数组或对象数组。ng-show标记表示是否显示该元素,与之对应的标记是ng-hide标记,表示是否隐藏元素。在angularjs中使用双大括号来输出表达式的值,例如{{product.name}}。

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

 

推荐:

图灵教程:http://www.ituring.com.cn/article/13471

         Google教程,入口由官网进:https://angularjs.org/

 

© 著作权归作者所有

共有 人打赏支持
立志尚早
粉丝 23
博文 33
码字总数 21411
作品 0
浦东
程序员
私信 提问
加载中

评论(3)

bingcool
bingcool

引用来自“褪色的笔记簿”的评论

一个页面可以包含多个ng-app标记?能给个示例吗?

可以的
bingcool
bingcool
可以的
褪色的笔记簿
褪色的笔记簿
一个页面可以包含多个ng-app标记?能给个示例吗?
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
11/09
0
0
AngularJS 中文资料+工具+库+Demo 大搜集

中文学习资料: 中文资料且成系统的就这么多,优酷上有个中文视频。 http://www.cnblogs.com/lcllao/archive/2012/10/18/2728787.html 翻译的官方的Guide http://www.ituring.com.cn/miniboo...

liaolzy2
2015/05/31
0
0
angular.js 1.3.17/1.4.2 发布

其中:1.3.17 更新内容如下: Bug Fixes +- **$browser:** prevent infinite digest if changing hash when there is no hashPrefix + ([61a3fb67](https://github.com/angular/angular.js/......

oschina
2015/07/07
2.6K
9
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.1K
26
AngularJs学习笔记--bootstrap

一、总括 本文用于解释Angular初始化的过程,以及如何在你有需要的时候对Angular进行手工初始化。 二、Angular <script> 标签 本例用于展示如何通过推荐的路径整合Angular,实现自动初始化。...

武文海
2015/02/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

jquery通过id显示隐藏

var $div3 = $('#div3'); 显示 $div3.show(); 隐藏 $div3.hide();

yan_liu
今天
3
0
《乱世佳人》读书笔记及相关感悟3900字

《乱世佳人》读书笔记及相关感悟3900字: 之前一直听「荔枝」,后来不知怎的转向了「喜马拉雅」,一听就是三年。上班的时候听房产,买房了以后听装修,兴之所至时听旅行,分手后听亲密关系,...

原创小博客
今天
3
0
大数据教程(9.6)map端join实现

上一篇文章讲了mapreduce配合实现join,本节博主将讲述在map端的join实现; 一、需求 实现两个“表”的join操作,其中一个表数据量小,一个表很大,这种场景在实际中非常常见,比如“订单日志...

em_aaron
今天
3
0
cookie与session详解

session与cookie是什么? session与cookie属于一种会话控制技术.常用在身份识别,登录验证,数据传输等.举个例子,就像我们去超市买东西结账的时候,我们要拿出我们的会员卡才会获取优惠.这时...

士兵7
今天
3
0
十万个为什么之为什么大家都说dubbo

Dubbo是什么? 使用背景 dubbo为什么这么流行, 为什么大家都这么喜欢用dubbo; 通过了解分布式开发了解到, 为适应访问量暴增,业务拆分后, 子应用部署在多台服务器上,而多台服务器通过可以通过d...

尾生
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部