AngularJS学习笔记1-阿里云开发者社区

开发者社区> 水车306> 正文

AngularJS学习笔记1

简介: 简介   AngularJS 是一个为动态WEB应用设计的结构框架,提供给大家一种新的开发应用方式,这种方式可以让你扩展HTML的语法,以弥补在构建动态WEB应用时静态文本的不足,从而在web应用程序中使用HTML声明动态内容。
+关注继续查看

简介

  AngularJS 是一个为动态WEB应用设计的结构框架,提供给大家一种新的开发应用方式,这种方式可以让你扩展HTML的语法,以弥补在构建动态WEB应用时静态文本的不足,从而在web应用程序中使用HTML声明动态内容。

AngularJS有五个主要核心特性,如下介绍:

  1.双向数据绑定 —— 实现了把model与view完全绑定在一起,model变化,view也变化,反之亦然。

  2.模板 —— 在AngularJS中,模板相当于HTML文件被浏览器解析到DOM中,AngularJS遍历这些DOM,也就是说AuguarJS把模板当做DOM来操作,去生成一些指令来完成对view的数据绑定。

  3.MVVM —— 吸收了传统的MVC设计模式针但又并不执行传统意义上的MVC,更接近于MVVM(Moodel-View-ViewModel)。

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

  5.指令 —— 可以用来创建自定义的标签,也可以用来装饰元素或者操作DOM属性。

创建应用

AngularJS是以一个JavaScript文件形式发布的,可通过script标签载入AngularJS脚本

例:

<script src="/scripts/angular.min.js"></script>

hello world

<div ng-app="" ng-init="name='World'">
Hello {{ name }}!
</div>

指令介绍

  AngularJS有一套完整的、可扩展的、用来帮助web应用开发的指令集,它使得HTML可以转变成“特定领域语言(DSL)”,是用来扩展浏览器能力的技术之一,在DOM编译期间,和HTML关联着的指令会被检测到,并且被执行,这使得指令可以为DOM指定行为,或者改变它。

  AngularJS通过称为指令的新属性来扩展的HTML,带有前缀ng-,我们也可以称之为“指令属性”,它就是绑定在DOM元素上的函数,可以调用方法、定义行为、绑定controller及$scope对象、操作DOM,等等。

  AngularJS指令指示的是“当关联的HTML结构进入编译阶段时应该执行的操作”,它本质上只是一个当编译器编译到相关DOM时需要执行的函数,可以写在元素的名称里,属性里,css类名里,注释里。

  当浏览器启动、开始解析HTML时,DOM元素上的指令属性就会跟其他属性一样被解析,也就是说当一个Angular.js应用启动,Angular编译器就会遍历DOM树来解析HTML,寻找这些指令属性函数,在一个DOM元素上找到一个或多个这样的指令属性函数,它们就会被收集起来、排序,然后按照优先级顺序被执行。

  Angular.js应用的动态性和响应能力,都要归功于指令属性,常见的有:ng-app、ng-init、ng-model、ng-bind、ng-repeat等等。

指令:ng-app

ng-app指令来标明一个AngularJS应用程序,并通过AngularJS完成自动初始化应用和标记应用根作用域,同时载入和指令内容相关的模块,并通过拥有ng-app指令的标签为根节点开始编译其中的DOM。

引用方法很简单,如下:

<div ng-app="">
 
</div>

  如上引用,一个AngularJS应用程序初始化就完成了并标记了作用域,也就是div元素就是AngularJS应用程序的"所有者",在它里面的指令也就会被Angular编译器所编译、解析了。

指令:ng-init

ng-init指令初始化应用程序数据,也就是为AngularJS应用程序定义初始值,通常情况下,我们会使用一个控制器或模块来代替它,后面我们会介绍有关控制器和模块的知识。

如下所示,我们为应用程序变量name赋定初始值。

<div ng-app="" ng-init="name='Hello World'">
 
</div>

  

我们不仅可以赋值字符串,也可以赋值为数字、数组、对象,而且可以为多个变量赋初始值,如下所示:

<div ng-app="" ng-init="quantity=1;price=5">
 
</div>
//或者
<div ng-app="" ng-init="names=['Tom','Jerry','Gaffey']">
 
</div>

  

AngularJS 数据绑定:表达式

AngularJS框架的核心功能之一 —— 数据绑定,由两个花括号{{}}组成,可以把数据绑定到HTML,类似Javascript代码片段,可以包含文字、运算符和变量,通常在绑定数据中用到,表达式可以绑定数字、字符串、对象、数组,写在双大括号内:{{ expression }}。

1. 如前面的示例,我们就可以使用表达式这样调用初始化的变量值,如下。

<div ng-app="" ng-init="name='Hello World'">
  {{ name }}
</div>

  

2. 当然我们也可以使用表达式输出数字、数组等等,如下所示:

  2.1. 输出数字,如下示例:

<div ng-app="" ng-init="quantity=12;price=5">
<p>总价: {{ quantity * price }}</p>
</div>

  

  2.2. 输出对象,如下示例:

<div ng-app="" ng-init="names=['Tom','Jerry','Gaffey']">
  <p>名字为: {{ names[0] }}</p>
</div>

  

指令:ng-model

在AngularJS中,只需要使用ng-model指令就可以把应用程序数据绑定到HTML元素,实现model和view的双向绑定。

如下示例,使用ng-model指令对数据进行绑定。

<div ng-app="">
  <p>请输入任意值:<input type="text" ng-model="name"></p>
  <p>你输入的为: {{ name }}</p>
</div>

  ng-model把相关处理事件绑定到指定标签上,这样我们就可以不用在手工处理相关事件(比如change等)的条件下完成对数据的展现需求。

  以上介绍了ng-model的单向绑定(view->model)!

指令:ng-bind

指令ng-bind和AngularJS表达式{{}}有异曲同工之妙,但不同之处就在于ng-bind是在angular解析渲染完毕后才将数据显示出来的。

如下使用ng-bind指令绑定把应用程序数据。

<div ng-app="">
  <p>请输入一个名字:<input type="text" ng-model="name"></p>
  <p>Hello <span ng-bind="name"></span></p>
</div>

  PS:使用花括号语法时,因为浏览器需要首先加载页面,渲染它,然后AngularJS才能把它解析成你期望看到的内容,所以对于首个页面中的数据绑定操作,建议采用ng-bind,以避免其未被渲染的模板被用户看到。

指令:ng-click

AngularJS也有自己的HTML事件指令,比如说通过ng-click定义一个AngularJS单击事件。

对按钮、链接等,我们都可以用ng-click指令属性来实现绑定,如下简单示例:

<div ng-app="" ng-init="click=false">
  <button ng-click="click= !click">隐藏/显示</button>
  <div ng-hide="click">
    <p>请输入一个名字:<input type="text" ng-model="name"></p>
    <p>Hello <span ng-bind="name"></span> </p>
  </div>
</div>

  PS:ng-hide="true",设置HTML元素不可见。

ng-click指令将DOM元素的鼠标点击事件(即mousedown)绑定到一个方法上,当浏览器在该DOM元素上鼠标触发点击事件时,Angular就会调用相应的方法!

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
4006 0
怎么设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程
6359 0
[HTML5和Flash视频播放器]Video.js 学习笔记(一 ) HLS库:videojs-contrib-hls
DEMO地址:https://github.com/Tinywan/PHP_Experience   https://github.com/videojs/videojs-contrib-hls  下载JS文件,直接使用 var player = videojs('example-video'); player.play(); videojs-contrib-hls支持一堆HLS功能。
3402 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
3956 0
如何理解深度学习分布式训练中的large batch size与learning rate的关系?
在深度学习进行分布式训练时,常常采用同步数据并行的方式,也就是采用大的batch size进行训练,但large batch一般较于小的baseline的batch size性能更差,请问如何理解调试learning rate能使large batch达到small batch同样的收敛精度和速度?
1814 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
5670 0
2013 年 AngularJS 学习资源精选
2014年被认为是AngularJS之年,现在是时候总结一下2013年的AngularJS优秀学习资源,希望能帮助你迎头赶上。只有最好的文章才能榜上有名。
24 0
+关注
水车306
笑看前端程序员写后端
192
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载