在 AngularJS 里,View 和 Model 是在 Controller 里面绑定的,所以无论你在 View 的表单中修改了内容,还是在 Controller 里通过代码修改了 Model 值,两边都会即时发生变化,同步更新。因为 AngularJS 会监控 Model 对象的变化,随时反映到 View 中。
MVC 是一种使用(模型-视图-控制器)设计创建 Web 应用程序的模式。
Model用来处理数据库中的数据,如处理存储在本地的localstorage中的key(数据名)和value(数据值),并与Controller交流。
View指页面显示的内容,如处理数据显示。
Controller代表控制器,用来读取view的数据以及对页面一些显示功能的控制,并向Model发送数据。
MVC 模式同时提供了对 HTML、CSS 和 JavaScript 的完全控制。
angular.js也是一个客户端的mvc框架,他有自己的控制器,对程序结构进行有效规范,例如,我们可以通过 $routeProvider,定义整个应用的路由表;
示例代码:
myModule.config(function($routeProvider) { $routeProvider.when("/",{ templateUrl: "pages/activity_list.html", controller: ActivityListController }).when("/create",{ templateUrl:"pages/create_activity.html", controller:CreateActivityController }).when("/sign",{ templateUrl:"pages/sign_up.html", controller:SignUpController }).when("/bid_list",{ templateUrl:"pages/bidding_list.html", controller:BiddingListController }).when("/bid_sign",{ templateUrl:"pages/bidding_sign.html", controller:BiddingSignController }).otherwise({ redirectTo: "/" }); })
when中的第一个参数为本地路径
比如在命令行输入Rwebserver打开http://127.0.0.1:8000/网址,如果when后面的地址为'/'则表示此为默认地址,也就是上面路由表中pages/activity_list.html页面对应的网址为http://127.0.0.1:8000/
如果when后面的地址为"/create",则pages/create_activity.html页面对应的网址为http://127.0.0.1:8000/create/
后面的的templateUrl参数定义处理完成后的页面
再后面controller参数定义了控制器的名字。
可以这样理解mvc框架:
$routeProvider定义路由表。controller中定义相当于应用控制器的函数(方法),在一个controller中,可以定义多个方法,执行时可以相互调用,也可以调用modal中数据库的内容。通过$scope作用域实现数据共享,直接把从modal得到的数据放到作用域。这个$scope作用域只和本页面有关。通过ng-model,ng-repeat,{{name}}实现数据绑定与逐个展示。
view中的一个按钮:
%button.btn.btn-4(ng-tap = 'go_create()')
当点击此按钮时触发ng-tap = 'go_create()'事件,执行$scope.go_create()方法,
function ActivityListController($scope, $navigate) { $scope.go_create = function () { $navigate.go('/create') }; }
$scope实现controller与view的交互,$navigate通过$routeProvider路由表实现页面之间的跳转'/create'对应路由表中所指向的页面地址(view)和控制器(controller)
view中的数据绑定{{activity.name}}
.wrapper.wrapper %ul.list-style-2() %li(ng-repeat ="activity in activities" ) %h3 {{activity.name}}
用ng_repeat实现数组activities中的每个元素activity逐个显示在view中,list-style-2是一种列表样式。
controller中的用$scope对view传值;
$scope.activities = JSON.parse(localStorage.getItem('activities'));
框架图:
相关推荐
使用Node.js作为后端开发环境,"nodejs"标签表明这个项目可能依赖于Node.js生态系统中的工具,如npm(Node包管理器)进行包管理,或者使用Express.js等框架来构建服务器端逻辑。 综上所述,"angular-seed-master-...
其中,AngularJS作为Google推出的MVC框架,以其强大的数据绑定和依赖注入特性受到了广泛欢迎。而今天我们要探讨的是一个基于AngularJS的排序组件——angular-sortable-view,它为AngularJS应用带来了便捷的多列排序...
在现代Web开发中,构建高效的单页面应用(SPA, Single-Page Application)是常见的需求,它能够提供流畅的用户体验,仿佛在浏览一个完整的桌面应用程序。本教程将介绍如何使用requirejs、angular和angular-route这三...
"js在线文件管理插件angular-filemanager-master"是一款基于JavaScript技术构建的文件管理工具,它主要利用了AngularJS和jQuery库,同时结合了Bootstrap的UI框架,为用户提供了一个直观、易用的界面来管理和操作...
Angular-File-Upload控件在.NET平台上运行良好,与ASP.NET MVC或Web API等框架结合使用,可以实现前后端的无缝对接。但需要注意的是,由于其依赖于HTML5的特性,对于不支持这些特性的浏览器,尤其是旧版的Internet ...
在前端开发领域,Angular Translate是广泛使用的国际化(i18n)解决方案之一,它允许开发者轻松地在应用中切换和管理多语言内容。本项目“angular-translate-storage-local.zip”聚焦于Angular Translate的一个特定...
Angular-Gantt是一款专为AngularJS框架设计的甘特图组件,用于在Web应用中展示任务进度和时间线。它提供了丰富的功能,帮助开发者构建强大的项目管理工具,以视觉化的方式展示任务和依赖关系,便于用户理解和跟踪...
在这个项目中,`backend-mvc5-angular` 可能是后端的核心部分,使用MVC5框架构建,提供了API接口供前端Angular或AngularJS调用。它可能包含了数据库连接、业务逻辑和身份验证等后端服务。 而`backend-mvc5-angular-...
1. **AngularJS**: AngularJS是Google开发的一个MVC(模型-视图-控制器)框架,用于构建动态的Web应用。它扩展了HTML,通过数据绑定和依赖注入简化了前端开发。在这个项目中,AngularJS被用来管理应用的状态和逻辑。...
AngularJS 是一个强大的JavaScript框架,主要用于构建动态web应用。它通过MVC(Model-View-Controller)模式,简化了前端开发工作,使开发者能够更高效地处理数据绑定、依赖注入和DOM操作。"angular-1.3.0.14"是...
【前端项目-Angular File Upload】是一个专门为AngularJS框架设计的模块,用于实现前端的文件上传功能。在现代Web应用中,用户交互往往涉及到文件的上传,如图片、文档等,而Angular File Upload则提供了方便的API和...
AngularJS,是由 Google 推出的一个强大的前端 JavaScript 框架,它主要用于构建动态、单页 web 应用。该框架的核心特性包括数据绑定、依赖注入、指令系统和模块化,这些都极大地简化了 MVC(模型-视图-控制器)架构...
这个项目旨在提供一个完整的、开箱即用的开发环境,适合快速构建Web应用程序。下面我们将详细探讨这些技术以及它们如何协同工作。 **Angular** 是一个强大的JavaScript框架,用于构建单页应用(SPA)。它提供了双向...
Angular UI Bootstrap 是一个由 AngularJS 社区开发的库,它提供了基于 Bootstrap 的组件和服务,使得在 AngularJS 应用程序中使用 Bootstrap 的 UI 组件变得更加简单和方便。这个库将 Bootstrap 的 CSS 和 ...
这个包的名称表明它是结合了Django和Angular.js的开发框架,用于构建复杂的Web应用程序。下面我们将详细探讨Django、Angular.js以及它们如何通过scaffold工具协同工作。 Django是Python的一款著名Web框架,以其...
Angular.js由Google维护,是一款基于MVC(Model-View-Controller)模式的JavaScript框架,旨在简化前端开发,通过数据绑定和依赖注入机制,使得动态内容的管理变得简单。它支持指令、服务、过滤器等特性,极大地提高...
AngularJS 是 Google 推出的一款强大的前端JavaScript框架,而 Angular Mobile 则是其在移动端的延伸,它通过一系列特定的模块和服务,解决了在手机和平板电脑上开发Web应用时遇到的性能和交互问题。 **一、...
Angular是一款由Google维护的开源JavaScript框架,用于构建单页应用程序(SPA)。它采用模型-视图-控制器(MVC)架构模式,并引入了组件化、依赖注入和双向数据绑定等特性,极大地提高了开发效率和代码可维护性。 *...
然而,对于使用AngularJS(一个流行的前端MVC框架)的开发者来说,直接集成CesiumJS可能有些复杂。为了解决这个问题,社区创建了`angular-cesium`,这是一个专为AngularJS设计的CesiumJS库的封装,使得在AngularJS...
15. **前端技术**: HTML、CSS和JavaScript是构建Web界面的主要技术,现代Web开发中还涉及到Vue.js、React、Angular等前端框架。 了解和掌握这些Java Web开发的关键知识点,将有助于构建高效、可维护的企业级Web应用...