angular浅入浅出:[2]概念篇

2025-04-19 05:35:17

本篇介绍angular涉及到的一些基本概念,后续篇章中将详细介绍各块内容及使用。

基本概念

1、Model,模块,实现某功能的部件,模块开发有便于开发、重用、测试,并可根据需要加载,提交性能(当然可能会有依赖关系)。一个Model可以是一个完成的应用程序也可以是应用程序中的某一块完整的功能。例:var myAppModule = angular.module('myApp', []);

2、MVC框架,Template,模板,一般指不含数据的基本HTML页面结构。Model,数据模型,如一条可操作数据。View,视图,由Model与Template模板构建出出的页面,如数据的编辑页面。Controller,控制器,处理应用程序中视图上的用户交互逻辑。Router,路由,负责在不同视图之间切换。MVC =Model+View+Controller,MVC已经是成熟的设计模型,通过将复杂的应用程序分层,将数据、逻辑、视图分离,以便分组开发,使不同的人专注于不同部分,同时提高可测试性。

3、Directive,指令,angular中核心的东西,可定义为含有逻辑的标签,通过指令可实现JS数据与HTML元素的动态关联(数据和视图间的自动绑定,当然是由angular默默的菸氖疴徊监听相应数据并及时做出反应)。AngularJS有一套完整的、可扩展的指令集,它使得快速进行Web应用开发。例:<!doctype html><html ng-app> <head> <script src="http://code.angularjs.org/angular-1.1.0.min.js"></script> <script src="script.js"></script> </head> <body> <div ng-controller="Ctrl1"> Hello <input ng-model='name'> </div> </body></html>

4、Scope,作用域,每一个angular应用都有一个根作用域,还可能有多个子作用域(模块,控制器,指令都会有自己的作用域),作用域作为控制器和视图之间的“胶水”提供表达式执行的上下文,能实现监控表达式和传递事件等。例:function MyController($scope) { $scope.username = 'World'; $scope.sayHello = function() { $scope.greeting = 'Hello ' + $scope.username + '!'; }; $scope.$on('MyEvent', function() { $scope.count++; });}

5、Service,服务,常见操作的功能集,angular提供了一组以$开头禅旄褡瘦命名的的基础服务(如$location、$http),使用者也可根据需要创建服务,服棣蚺幌盗务可可通过简单的注入到控制器中使用。例:angular.module('MyServiceModule', []).factory('notify', ['$window', function(win) { var msgs = []; return function(msg) { msgs.push(msg); if (msgs.length == 3) { win.alert(msgs.join("\n")); msgs = []; } };}]);

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
相关推荐
  • 阅读量:31
  • 阅读量:86
  • 阅读量:91
  • 阅读量:76
  • 阅读量:22
  • 猜你喜欢