文档章节

AngularJS入门笔记

立志尚早
 立志尚早
发布于 2014/08/25 11:01
字数 939
阅读 4200
收藏 10
点赞 1
评论 3

原文: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
博文 31
码字总数 19281
作品 0
浦东
程序员
加载中

评论(3)

bingcool
bingcool

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

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

可以的
bingcool
bingcool
可以的
褪色的笔记簿
褪色的笔记簿
一个页面可以包含多个ng-app标记?能给个示例吗?
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
AngularJs学习笔记--bootstrap

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

武文海
2015/02/05
0
0
AngularJs学习笔记--expression

一、Angular表达式 vs. Js 表达式   这很容易让人将angular视图表达式联想为javascript表达式,但这并不完全正确,因为angular不是通过javascript的eval()对表达式进行求值。你可以将angul...

武文海
2015/02/06
0
0
AngularJs学习笔记--I18n/L10n

一、I18n and L10n in AngularJS 1. 什么是I18n和L10n?   国际化(Internationalization),简称I18n,是让产品开发在一个他们可以简单地对产品进行语言、文化的本地化的方法的规范。本地化...

武文海
2015/02/06
0
0
Angular.js 相关记录

AngularJS作用域文档:http://docs.angularjs.org/api/ng.$rootScope.Scope ng-view 指令的角色是为当前路由把对应的视图模板载入到布局模板中。 AngularJS内置过滤器:http://code.angular...

彭博
2014/04/25
0
2
读书笔记“使用AngularJs开发下一代web应用”

国内一个挺好的读书笔记 http://www.sunzhongwei.com/angularjs.html 源码下载地址https://github.com/shyamseshadri/angularjs-book Angular SEO http://www.yearofmoo.com/2012/11/angula......

lilugirl
2014/01/06
0
0
Angular 5 快速入门与提高

一、概述 尽管被称为,实际上它只是这个诞生于2012年的前端框架的的第四个版本: 看起来差不多半年就发布一个新版本,不过实际上从重写的版本开始,开发接口与核心思想就稳定下来了,并基本保...

笔阁
2017/11/03
0
11
初学angular 看到网上有angular js 也有angular2 ,到angular官网发现最近版本是6了,那么现在大家说的angular js到底是什么啊?

初学angular 看到网上有angular js 也有angular2 ,到angular官网发现最近版本是6了,那么现在大家说的angular js到底是什么啊? angular2和现在官网的angular6 就是 angular js 只是版本不同...

Jordan裔
05/19
0
0
【前端】—聊聊我认识的Angular

前言 最近接触的项目前端用到了Angular框架,之前略有耳闻,从vue换到Angular,感觉东西差不多,还是要系统学习的,先来了解下。 正文 1、Angular 的发展 AngularJS 是一款来自Google的前端J...

zt15732625878
05/19
0
0
7本学习AngularJS的免费电子书

电子书可以给我们一个有结构有组织的方式学习新的知识。学习 AngularJS也一样。现在最棒的事情莫过于电子书中提供大量实践练习,帮助我们理解各种方面。 让我们度下面7本书探究 AngularJS 吧...

咲晚杍
2015/01/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Ubuntu 安装 Redis (非源码Build方式)

安装redis : apt-get install redis-server # 安装完会自动自动 使用命令 ps -aux|grep redis 查看是否启动 ---------------------------------- redis 服务操作方式 /etc/init.d/redis-serv......

Alex142857
5分钟前
0
0
mysql字段中去掉括号

eg: select * from (select *,substring_index(substring_index(remarks,"[",1),']',-1) as carCard from test ) as t where carCard LIKE '%C999%'...

writeademo
9分钟前
0
0
web3.py简介

与web3.py库交互的共同入口是web3对象。web3对象提供API,用于python开发的应用与以太坊区块链进行交互,通常是通过连接JSON-RPC服务器进行。 Providers提供者 Providers使web3连接到区块链上...

笔阁
10分钟前
0
0
jquery 获取父页面某一个input框值得写法

//login_name 为父页面的input框的ID var login_name= $('#login_name', window.parent.document).val();//当前用户登录名...

gulf
11分钟前
0
0
mybatis高级查询

说实话不怎么想写这些,可能是我昨天太累了,妹的那个错误一直找不到。醉了,写一下把,分别是多表联合查询以及汇总 <resultMap id="mdxlResult" type="java.util.Map"> <id column="id" ...

木九天
13分钟前
0
0
Spring5(Java8版本)中的反射工具类和注解工具类

1.反射工具类 学习反射时很好的反射教程.这个工具类是基于Java8的。 package org.springframework.util;import java.lang.reflect.Constructor;import java.lang.reflect.Field;imp...

hutaishi
15分钟前
0
0
java io

Java IO在实际开发中的应用 http://www.cnblogs.com/ldh-better/p/7158658.html

小鱼吃大鱼
15分钟前
0
0
初结 react(当 React 版本是 ^16.2.0,当前时间 2018-01-12)

最近一段时间在零零碎碎地看 react 。在此,向所有自学 react 的朋友点个赞。多说一句,在自学道路上一定要戒骄戒躁,坚持下来。-----因为自学过程真的是心累啊(不同版本的博客不同的说法)...

秋季长青
16分钟前
11
0
grub2要启动整个iso的菜单命令如下

grub2要启动整个iso的菜单命令如下 menuentry "启动 Deepin OS Live System" --class deepin { set isofile=/DeepinOS.iso search -f --no-floppy --set=root $isofile set gfxpayload=keep ......

ziluopao
23分钟前
1
0
vuer如何使用富文本编辑器wangEditor自定义图片上传(解决跨域问题)

html定义一个装编辑器的DIV <template> <div id="editor"></div></template> npm安装wangEditor npm install wangeditor --save /*wangeditor需要小写*/ vue页面导入wangEditor im......

心鑫
26分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部