`

AngularJS 核心概念理解

阅读更多
AngularJS使用MVC的架构,具体的功能如下:
1)M;模型,这个比较抽象,它其实完成的功能是调用后台服务来获取相应的数据;
2)V:视图,注意这里的视图只是每个特定功能的页面,具体的可以参见单页应用http://gaofulai1988.iteye.com/admin/blogs/2253015 ;
3)C:控制,这个是连接模型与视图的桥梁,那它是怎么关联的呢,通过$scope来关联。

从controller说起,它主要的结构如下:

myAppModule.controller("accountManage",[xxx,xxx]{

     var data=service.getUserList();
     $scope.data=data;
}

这里用几个概念得说明一下:
Module:你可以理解成java package,将一些文件有机的放在一起,不要与MVC中的module混淆了;
Service:它主要完成逻辑功能,如发送http请求,获取http返回的结果,服务有内置服务,也有自己自定义的服务;
$Scope:这里是作用范围,一个controller有它作用的范围,在这个范围内,它能取到它的值,包含控件和方法;
双向绑定:页面的变化能引起M的变化,一般有两种方式实现:一是ng-bind,另一个是表达式{{}},$scope.data=data,这里其实就是应用的双向绑定的思想,返回的data会立即反映在页面上;
路由:这个这篇文章中http://gaofulai1988.iteye.com/admin/blogs/2252913提到过,不懂的请参考下;
Directive:这个是扩展了html的属性,想想我们平时总写ng-model,ng-init,ng-bind,ng-click,ng-show,这些在普通的html中,你会见到吗?当然也分为内置的,就是上面提到的这些,你也可以自己自定义一些directive。

以上的概念是很核心的,对于理解AngularJS来讲,是比较重要的,当然也有其它的概念没有提到,我觉得只要你把上面的内容理解清楚了,基本上对于AngularJS来讲,还是有自己的体会的。
分享到:
评论

相关推荐

    angularJS_学习资料

    ### 一、AngularJS核心概念 1. **指令(Directives)**: AngularJS 的指令是用于扩展HTML的自定义元素、属性或类,如`ng-repeat`用于循环渲染数据,`ng-if`用于条件渲染,`ng-click`处理用户交互。 2. **数据绑定...

    Angularjs 合集 Angularjs 合集

    《AngularJS by Example》这本书通过实例教学,让读者能够快速理解AngularJS的核心概念和实际应用。AngularJS的核心特性包括双向数据绑定、依赖注入、指令系统、过滤器和服务等。例如,双向数据绑定使得视图与模型...

    angularJS理论与实战.ppt

    一、AngularJS核心概念 1. MVC架构:AngularJS基于MVC模式,将应用分为模型、视图和控制器三个部分,使得代码结构清晰,易于维护。 2. 数据绑定:AngularJS的核心特性之一,实现了视图与模型之间的双向绑定,即模型...

    Angularjs_in_action

    本书适合有一定JavaScript基础的开发者阅读,旨在帮助读者深入了解AngularJS的核心概念和技术细节,并能够实际应用到项目中去。 #### 四、书籍结构 - **第一部分**:熟悉AngularJS。这一部分主要介绍了AngularJS的...

    AngularJS 中文API参考手册

    一、AngularJS核心概念 1. 双向数据绑定:AngularJS的一大特色是双向数据绑定,它允许视图与模型之间的数据自动同步。当模型发生变化时,视图会自动更新;反之,当用户在视图中操作时,模型也会相应更新。 2. 模块...

    创建你自己的angularjs

    这个过程中会涉及的知识点包括但不限于AngularJS的核心概念、测试驱动开发(TDD)的模式、JavaScript的高级特性等。 首先,AngularJS是基于MVC(模型-视图-控制器)架构的JavaScript框架,由Google维护。它通过双向...

    AngularJS书两本

    首先,《AngularJS_权威教程》可能涵盖了AngularJS的基础概念和核心特性,包括双向数据绑定、依赖注入、指令系统、服务、过滤器等。双向数据绑定是AngularJS的核心特性之一,它使得模型和视图之间的数据同步变得极其...

    angularJs权威和精通angularjs

    本资源包含了《精通AngularJS》和《AngularJS权威指南》两本著作,将帮助你全面深入地理解AngularJS的核心概念和实用技巧。 **1. 双向数据绑定:** AngularJS的一大特色是其双向数据绑定功能,它自动保持视图和模型...

    Clip-Two AngularJs-Admin

    1. **AngularJS核心概念**: - **双Way Data Binding**:AngularJS的核心特性之一,允许视图和模型之间的数据自动同步,减少了手动更新视图的工作。 - **Directives**:AngularJS中的指令用于扩展HTML,如ngRepeat...

    AngularJs 1.5.8

    1. **模块化**:AngularJS的核心概念之一就是模块(Module),它允许开发者将应用的不同部分组织成独立的模块,方便管理和重用。在1.5.8版本中,模块机制更加成熟,能够更好地支持依赖注入和服务注册。 2. **组件化...

    AngularJS初学者参考手册

    此外,它可能会详细解释控制器、$scope、模块、表达式、过滤器和路由等核心概念。对于初学者来说,这些基础知识是理解AngularJS工作方式的关键。 其次,AngularJS开发指南.pdf可能会提供更深入的实践指导,涵盖如何...

    AngularJS笔记

    ### AngularJS核心知识点详解 #### 一、AngularJS概述与初始化 AngularJS是一个开源的JavaScript框架,由Google维护,主要用于构建动态的Web应用程序。它的设计理念是将MVC(Model-View-Controller)模式应用于...

    AngularJS_Up_and_Running

    指令是AngularJS中的核心概念之一,它们用来创建可复用的组件。指令可以扩展HTML元素,通过定义新属性、元素甚至是CSS类,可以构建出自定义的HTML标签。基本指令和高级指令的使用是提升AngularJS开发效率的关键所在...

    AngularJS--angular-phonecat

    "AngularJS--angular-phonecat"是一个经典的入门教程,旨在帮助初学者理解AngularJS的核心概念和工作原理。尽管描述中提到这个项目可能与网上的教程存在一些小差异且没有包含测试部分,但它仍然是学习AngularJS的一...

    AngularJS学习 chm 文件

    通过"AngularJS学习笔记.chm"文件,你可以系统地学习AngularJS的基本概念、核心特性和实践技巧。文件中的章节可能包括AngularJS的安装与设置、基础语法、指令详解、服务的使用、数据绑定的深入理解、模块和路由的...

    angularjs Web页面框架 jsp源码

    1. **AngularJS核心概念**: - **双向数据绑定**:AngularJS的核心特性之一,允许视图和模型之间的数据自动同步。任何一方的改变都会反映到另一方。 - **指令**:AngularJS扩展HTML的方式,如`ng-repeat`用于循环...

    AngularJs权威指南(高清版)

    ### 一、AngularJS核心概念 1. **数据绑定**:AngularJS的核心特性之一,实现了视图和模型之间的双向同步。通过`{{ }}`双括号语法,可以轻松地在HTML中展示和修改数据。 2. **MVC模式**:AngularJS遵循Model-View-...

    angularjs 書籍

    最后,"AngularJS by Example.pdf"通过实例教学,让学习者能够直观地理解AngularJS的核心概念。书中的每个示例都将理论与实践相结合,让读者能够在实践中学习和掌握AngularJS的关键技术。 总的来说,这个书籍合集为...

    AngularJS高级编程(含源码)

    本资源集“AngularJS高级编程(含源码)”旨在帮助开发者深入理解AngularJS的核心概念和技术,以及如何在实际项目中应用它们。 **核心概念**: 1. **双数据绑定**:AngularJS 的核心特性之一,允许视图和模型之间...

    AngularJs简介及例子

    学习AngularJS不仅需要理解上述概念,还需要实践编写控制器、服务、指令、模板等,通过`AngularJs第二版.pptx`中的教程和示例,你可以更深入地了解并掌握这个强大的框架。同时,结合实际项目练习,将有助于你更好地...

Global site tag (gtag.js) - Google Analytics