在 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'));
框架图:
相关推荐
02 angular.js AngularJS is an MVC framework for building web applications. The core features include HTML enhanced with custom component and data-binding capabilities, dependency injection and strong ...
Angular JS 是一个有Google维护的开源前端web应用程序框架。它最初由Brat Tech LLC的Misko Hevery于2009年开发出来。Angular JS是一个模型-视图-控制器(MVC)模式的框架,目的在于使HTML动态化。与其他框架相比,它...
使用Node.js,Angular.js和SQL Server的用户身份验证该项目演示了JavaScript(Node.... 特性使用模型视图控制器(MVC)架构SQL Server存储过程JavaScript框架REST Web服务如何使用# Clone this repository$ git clone ...
是一个 MVC 框架,用于开发实时 Web 应用程序。 它会自动生成一个 RESTful JSON API。 是一个 javascript 库,它允许您使用自定义标签增强 HTML,以便在 HTML 代码和 javascript 变量之间进行丰富的交互。 我最近...
AngularJS是一个用JavaScript编写的,基于MVC的Web应用程序框架。 这样就可以在前端使用Model-View-Controller模式。 它还带有几个附加模块。 在此示例中,我还使用了angular-resource ,它是用于创建RE
1.AngularJSAngular JS 是一个有Google维护的开源前端web应用程序框架。它最初由Brat Tech LLC的Misko Hevery于2009年开发出来。Angular JS是一个模型-视图-控制器(MVC)模式的框架,目的在于使HTML动态化。与其他...
为此,我们尝试将我们在其他 Web 框架中看到的最好的东西结合起来,包括用其他语言实现的框架,例如 Ruby on Rails、ASP.NET MVC 和 Sinatra。 Laravel 易于访问,但功能强大,为大型、健壮的应用程序提供了强大的...
Node.js 是一种领先的服务器端编程环境,MongoDB是最流行的NoSQL数据库,而AngularJS 正迅速成为基于MVC的前端开发的领先框架。它们结合在一起使得能够完全用JavaScript 创建从服务器到客户端浏览器的高性能站点和...
之前的开发选择的是完全舍弃服务端,仅保留最简单web服务器提供angular经打包的静态资源,此外所有的业务与数据请求都访问一个分离的WebApi来实现。不过最近碰到一个需求,有必要使用多个客户端,而各客户端本身都是...
快速启动的 Web应用程序,集成并演示了一些有用的开源项目,例如Yank,Sundial(Quartz叉),Bower,Flot JS图表,Angular-nvD3 JS图表,Bootstrap,AngularJS,HSQLDB,XChart位图图表,JUnit,等。演示如何使用...
一个动漫主题的网站,支持播放、评论、弹幕、收藏等操作; 并提供画板、商城、游戏等其他附属板块 该系统分为主站和后台管理两...Web MVC框架: Struts2 ORM框架: Hibernate for JPA IOC与AOP框架: Spring 安全框架: Shiro
并通过丰富的开发实例向读者展示了构建复杂应用的完整过程,包括学习使用AngularJS特有的基于DOM的模板系统,实现复杂的后端通信,创建漂亮的表单,制作导航,使用依赖注入系统,提高Web应用的安全性,使用Jasmine...
angular是一个比较完善的前端MVC框架,包含了模板,数据双向绑定,路由,服务,过滤器,依赖注入等等所有的功能,基本上只要你做web开发,angular都会提供一个,换句话说,相对于一些其它的只关注前端某一方面的框架...
为了帮助解决这个问题,我们创建了 TodoMVC——一个提供相同 Todo 应用程序的项目,该应用程序使用当今大多数流行的 JavaScript MV* 框架中的 MV* 概念实现。 在 Web IDE 中查看和运行 单击下面的按钮以在 Web IDE ...
Angular:一个用于构建Web应用的前端框架。 Vue.js:一个渐进式JavaScript框架,用于构建交互式界面。 Sass 和 Less:CSS预处理器,用于简化和加强CSS的功能。 Bootstrap:一个用于快速开发响应式网站的前端框架。 ...
烧烤 - 迷你角 BBQ 是在学术禁止使用 Angular 的情况下创建的。... 我在这里发布它并不是因为我相信您应该在生产中使用它,而是为了表明 Angular 不是魔术——即使是本科生也可以创建一个简单的 MVC Web 框架。
网络编程实例 该项目包含在服务器端使用Java的Web应用程序的代码示例。技术清单这些示例涉及的主要技术是: Spring:Java框架。 这些示例基于Spring Boot,Spring MVC,Spring Data,Spring Security和Spring Test。...
它是一个使用全栈 JavaScript 技术开发的 Web 应用程序,包括 angular.js、node.js、express.js 和 mysql。 此存储库中的文件是我编写的代码片段,用于在 denalijs 中实现报告。 它们遵循基于 MVC 的应用程序框架 ...
该项目利用了基于springboot + vue + mysql的开发模式框架实现的课设系统,包括了项目的源码资源、sql文件、相关指引文档等等。 【项目资源】:包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理...
它具有比Angular、Ember或ReactJS更简单的数据绑定特性且使用--Distributed Data Protocol和一个发布/订阅来自动将数据更改传播到客户端,无需开发人员编写任何同步代码。全栈反应确保从数据库到模板的所有层都可以...