`

用angular-js实现web开发的mvc框架

阅读更多

在 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'));

 框架图:



 

  • 大小: 8 KB
分享到:
评论

相关推荐

    angular-seed-master-master.zip

    使用Node.js作为后端开发环境,"nodejs"标签表明这个项目可能依赖于Node.js生态系统中的工具,如npm(Node包管理器)进行包管理,或者使用Express.js等框架来构建服务器端逻辑。 综上所述,"angular-seed-master-...

    前端项目-angular-sortable-view.zip

    其中,AngularJS作为Google推出的MVC框架,以其强大的数据绑定和依赖注入特性受到了广泛欢迎。而今天我们要探讨的是一个基于AngularJS的排序组件——angular-sortable-view,它为AngularJS应用带来了便捷的多列排序...

    requirejs + angular + angular-route HTML5单页面架构

    在现代Web开发中,构建高效的单页面应用(SPA, Single-Page Application)是常见的需求,它能够提供流畅的用户体验,仿佛在浏览一个完整的桌面应用程序。本教程将介绍如何使用requirejs、angular和angular-route这三...

    js在线文件管理插件angular-filemanager-master

    "js在线文件管理插件angular-filemanager-master"是一款基于JavaScript技术构建的文件管理工具,它主要利用了AngularJS和jQuery库,同时结合了Bootstrap的UI框架,为用户提供了一个直观、易用的界面来管理和操作...

    angular-file-upload 上传控件

    Angular-File-Upload控件在.NET平台上运行良好,与ASP.NET MVC或Web API等框架结合使用,可以实现前后端的无缝对接。但需要注意的是,由于其依赖于HTML5的特性,对于不支持这些特性的浏览器,尤其是旧版的Internet ...

    前端项目-angular-translate-storage-local.zip

    在前端开发领域,Angular Translate是广泛使用的国际化(i18n)解决方案之一,它允许开发者轻松地在应用中切换和管理多语言内容。本项目“angular-translate-storage-local.zip”聚焦于Angular Translate的一个特定...

    前端项目-angular-gantt.zip

    Angular-Gantt是一款专为AngularJS框架设计的甘特图组件,用于在Web应用中展示任务进度和时间线。它提供了丰富的功能,帮助开发者构建强大的项目管理工具,以视觉化的方式展示任务和依赖关系,便于用户理解和跟踪...

    Angle-3.4-mvc5-angular

    在这个项目中,`backend-mvc5-angular` 可能是后端的核心部分,使用MVC5框架构建,提供了API接口供前端Angular或AngularJS调用。它可能包含了数据库连接、业务逻辑和身份验证等后端服务。 而`backend-mvc5-angular-...

    前端项目-angular-summernote.zip

    1. **AngularJS**: AngularJS是Google开发的一个MVC(模型-视图-控制器)框架,用于构建动态的Web应用。它扩展了HTML,通过数据绑定和依赖注入简化了前端开发。在这个项目中,AngularJS被用来管理应用的状态和逻辑。...

    angular-1.3.0.14

    AngularJS 是一个强大的JavaScript框架,主要用于构建动态web应用。它通过MVC(Model-View-Controller)模式,简化了前端开发工作,使开发者能够更高效地处理数据绑定、依赖注入和DOM操作。"angular-1.3.0.14"是...

    前端项目-angular-file-upload.zip

    【前端项目-Angular File Upload】是一个专门为AngularJS框架设计的模块,用于实现前端的文件上传功能。在现代Web应用中,用户交互往往涉及到文件的上传,如图片、文档等,而Angular File Upload则提供了方便的API和...

    angular-phonecat

    AngularJS,是由 Google 推出的一个强大的前端 JavaScript 框架,它主要用于构建动态、单页 web 应用。该框架的核心特性包括数据绑定、依赖注入、指令系统和模块化,这些都极大地简化了 MVC(模型-视图-控制器)架构...

    angular-bootsrtrap-spring-mybatis-master框架搭建

    这个项目旨在提供一个完整的、开箱即用的开发环境,适合快速构建Web应用程序。下面我们将详细探讨这些技术以及它们如何协同工作。 **Angular** 是一个强大的JavaScript框架,用于构建单页应用(SPA)。它提供了双向...

    angular-ui-bootstrap

    Angular UI Bootstrap 是一个由 AngularJS 社区开发的库,它提供了基于 Bootstrap 的组件和服务,使得在 AngularJS 应用程序中使用 Bootstrap 的 UI 组件变得更加简单和方便。这个库将 Bootstrap 的 CSS 和 ...

    PyPI 官网下载 | django-angular-scaffold-0.1.5.tar.gz

    这个包的名称表明它是结合了Django和Angular.js的开发框架,用于构建复杂的Web应用程序。下面我们将详细探讨Django、Angular.js以及它们如何通过scaffold工具协同工作。 Django是Python的一款著名Web框架,以其...

    前端项目-angular-gettext.zip

    Angular.js由Google维护,是一款基于MVC(Model-View-Controller)模式的JavaScript框架,旨在简化前端开发,通过数据绑定和依赖注入机制,使得动态内容的管理变得简单。它支持指令、服务、过滤器等特性,极大地提高...

    angular-mobile-master

    AngularJS 是 Google 推出的一款强大的前端JavaScript框架,而 Angular Mobile 则是其在移动端的延伸,它通过一系列特定的模块和服务,解决了在手机和平板电脑上开发Web应用时遇到的性能和交互问题。 **一、...

    前端项目-angular-material-data-table.zip

    Angular是一款由Google维护的开源JavaScript框架,用于构建单页应用程序(SPA)。它采用模型-视图-控制器(MVC)架构模式,并引入了组件化、依赖注入和双向数据绑定等特性,极大地提高了开发效率和代码可维护性。 *...

    angular-cesium:用于 AngularJS 的 CesiumJS 库

    然而,对于使用AngularJS(一个流行的前端MVC框架)的开发者来说,直接集成CesiumJS可能有些复杂。为了解决这个问题,社区创建了`angular-cesium`,这是一个专为AngularJS设计的CesiumJS库的封装,使得在AngularJS...

    7-Java-web开发17-Java-web开发17-Java-web开发17-Java-web开发17-Java-web开发

    15. **前端技术**: HTML、CSS和JavaScript是构建Web界面的主要技术,现代Web开发中还涉及到Vue.js、React、Angular等前端框架。 了解和掌握这些Java Web开发的关键知识点,将有助于构建高效、可维护的企业级Web应用...

Global site tag (gtag.js) - Google Analytics