Angular.js初步认知

第一部分  Angular.js简介

Angular.js是一款基于JavaScript语言的框架,目的是为了克服HTML在构建应用上的不足.

注意这里说的Angular.js是框架而不是类库,类库和框架都是用来解决静态页面技术上构建动态应用的问题的,但是两者却不是一个概念.

类库: 指一些函数的集合,封装一些可复用的代码块,但是类库本身需要开发者主动调用各种方法才能实现功能,如jQuery等.

框架: 指一种特殊的,已经实现了的WEB应用,框架会根据开发者填充的具体业务逻辑来调用开发者写的代码,如angularjs等.

框架的类型有许多,有的是基于js的,有的是基于css的.

Angular.js最为核心的特性有:MVC,模块化,自动化双向数据绑定等.

其中MVC指的是Model View Controller,M是指业务模型,V是指用户界面,C则是控制器,使用MVC的目的是将M和V的实现代码分离,从而使同一个程序可以使用不同的表现形式.

第二部分 Angular.js的主要组成

1. 表达式

  在Angular.js中,可以在HTML的body中使用{{}}来表示一个angular表达式,在表达式中可以包裹以下几种情况:

  a 字符串,以及字符串的拼接,表达式会将处理的结果输出

  b 数字,以及数字的基本运算,表达式会将运算结果输出

  c 三元表达式,表达式会先判断三元表达式的处理结果,然后将最终结果输出

  d 布尔值,如果表达式内为判断式,会先进行判断,将判断出来的布尔值进行输出

  e 数组,直接输出成字符串

  f 对象,直接输出成字符串

2. 指令

  指令是Angular.js对HTML标签的拓展属性,都是以ng-开头的属性名称

  Angular.js提供的指令有许多,在现在初步认知中需先掌握以下几种指令的意义及用法

  a ng-app: 划分Angular.js程序的管理范围,通常是给body或者div等设置属性,设置完成后对应标签内的与Angular有关的代码会被Angular程序解析执行

  b ng-init: 初始化参数,直接写在需要初始化参数的标签中

  c ng-model: 将设置的参数与标签的value值绑定,这里绑定完成后会实现双向数据绑定,value值通常为表单元素的内容取值

  d ng-bind: 也是讲设置的参数与标签中的内容绑定,但是这里相当于给标签设置innerHTML值,并且只能设置不能获取值

  e ng-click: 标签被点击时触发

3. Angular模块

  在业务逻辑较为简单的情况下,我们可以考虑不使用js带来实现功能,但是如果需要实现的功能较多,或者实现的功能逻辑较为复杂的情况下,我们还是会使用JS码来实现Angular.js中的功能.

  当然Angular也有较为规范的代码顺序:

  a 在HTML中引用angular.js的文件

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

  b 在一对script标签中创建模块和控制器

<script>

angular.module(‘default‘,[])

    .controller(‘default‘,function ($scope) {})

</script>

  c 在控制器处理函数中,设置参数或者方法,这个过程在angular中也可以称为暴露参数和暴露行为

  d 划定angular模块的管理范围,和划定控制器的管理范围

<body ng-app="myApp" ng-controller="myController" >

  e 将对应控制器暴露的参数和行为绑定到对应的位置

  在对应位置设置ng-model="",或者设置ng-click=""等

angular的代码顺序可以看出来angular的模块化的特性

第三部分 Angular.js的初步注意点

1. 在一个HTML页面中只会执行一个angular模块内的代码,如果在一个页面中定义了两个或以上的angular模块,只会将第一个模块内对应的angular代码解析并执行,其他的angular代码不会被执行,会原样输出

2. 控制器内对应的代码只有控制器在模块范围内才会被解析执行

3. 一个模块中可以存在多个控制器,每个控制器控制不同的参数和行为

4. angular.js可以配合jQuery使用,但是jQuery需要在angular.js之前被HTML引用

时间: 10-24

Angular.js初步认知的相关文章

Angular js总结

之前看过一些angular js的相关技术文档,今天在浏览技术论坛的时候发现有问angular js是做什么用的? 于是有了一个想法,对于自己对angular js 的认知做一个总结. 总结: angular js是一个js框架,这个框架极大的方便了前台元素的加载.值获取.验证.事件等等. 使用在元素中添加属性的方式进行定义(指令),使用表达式进行元素操作,控制器概念(MVC),总之就是 方便了前台元素.数据的操作.

Angular.js 的初步认识

MVC模式 模型(model)-视图(view)-控制器(controller) Angular.js采用了MVC设计模式的开源js框架 1.如何在angular.js建立自己的模块(model),控制器(controller),操作模型数据. <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/angular.

青出于蓝而胜于蓝 — Vue.js对Angular.js的那些进步

Angular.js与Vue.js是非常有渊源的两款前端框架,据Vue.js的官方网站描述,在其早期开发时,灵感来源就是Angular.js.而在很多方面,Vue.js也正像是中国的那句古话,"青出于蓝而胜于蓝".今天,K就从下面几个方面来跟大家一起探讨一下,Vue.js到底在哪些方面更"胜于蓝". (一)简单的操作 这是K看来Vue.js最杰出的的方法,Vue.js致力于视图层的展现,这使它在与其他项目进行整合的时候会变得非常easy,这也使它更容易"嵌

通过Web Api 和 Angular.js 构建单页面的web 程序

在传统的web 应用程序中,浏览器端通过向服务器端发送请求,然后服务器端根据这个请求发送HTML到浏览器,这个响应将会影响整个的页面,比如说:用户通过一个连接导航到一个页面,会发送一个请求到服务器端,接下来服务器将会发送一个新的页面给浏览器. 但是在单页面应用程序中,整个页面只是在浏览器一开始请求的时候才会加载,接下来的请求,下来的交互请求都是通过ajax 来完成的,这就意味着只有部分的页面会更新,并不需要去加载整个的页面,这就减少了对用户操作的响应时间,从而使用户有一个更流畅的体验.但是在传统

精通 Angular JS 第一天——Angular 之禅

简介 Angular JS是采用JavaScript语言编写的客户端MVC框架,它为业界带了重大的变化,包括对模板化的创新实现,以及数据的双向绑定,这些特性使得它强大而易用.它可以用来帮助开发者编写单页面应用,尤其适合编写有大量CRUD操作的,具有Ajax风格的富客户端应用.大多数开发者认为,与其它框架相比,AngularJS明显缩减了项目所需的代码量. 2012年6月,Angular JS正式发布1.0版,在各种客户端MVC框架中,属于后起之秀.AngularJS主页(http://www.a

Angular JS从入门基础 mvc三层架构 常用指令

Angular JS从入门基础  mvc模型 常用指令 ★ 最近一直在复习AngularJS,它是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVC.模块化.自动化双向数据绑定.语义化标签.依赖注入等等. 1.常用指令 AngularJS 通过指令扩展了HTML,且通过表达式绑定数据到 HTML.下面我们看一下AngularJS中的常用指令. (1).基本概念 指令:AngularJS中,通过扩展HTML的属性提供功能.所以,ng-

使用angular.js获取form表单中的信息

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册</title> <script src="./node_modules/angular/angular.js"></script> </head> <body ng-app="s1

activiti自定义流程之整合(二):使用angular js整合ueditor创建表单

注:整体环境搭建:activiti自定义流程之整合(一):整体环境配置 基础环境搭建完毕,接下来就该正式着手代码编写了,在说代码之前,我觉得有必要先说明一下activit自定义流程的操作. 抛开自定义的表单不谈,通过之前的了解,我们知道一个新的流程开始,是在启动流程实例(processIntence)的时候,而流程实例依赖于流程定义(processDefinition),流程定义又依赖于流程模型(model). 我们用到的自定义表单需要在创建模型,画模型图的时候就指定表单的名称formKey,需

Angular JS知识小总结

1.什么是Angular JS? AngularJS 是一个为动态WEB应用设计的 JavaScript结构框架. 2.Angular JS的用处? --它是为了克服HTML在构建应用上的不足而设计; --适用于CRUD应用,是为了消除页面上的DOM操作而生.它的核心理念是借鉴了MVC框架,但是它其实更接近于MVVM.viemmodel是一个原生的javascript对象,angularJS把view和model加到viemmodel上,从而实现数据的绑定.而且这种绑定是双向的,即view变化