如何用angular.js实现web开发下的mvc框架

最新推荐文章于 2025-08-16 14:38:43 发布

最新推荐文章于 2025-08-16 14:38:43 发布 · 163 阅读

文章标签：

本文深入探讨了AngularJS作为JavaScript MV*框架在Web开发中的优势，通过MVC（Model-View-Controller）模式，简化了HTML在构建应用时的局限性，介绍了AngularJS如何通过Directives扩展HTML词汇，实现动态内容的声明。详细解释了AngularJS控制器的作用及路由配置，展示了如何利用AngularJS实现UI视图和逻辑控制，包括跳转功能及数据存储。通过示例代码，清晰地阐述了AngularJS在实际Web开发中的应用流程。

AngularJS是Google推出的开源的JavaScript MV*（MVW、MVVM、MVC）框架，目前由Google维护。AngularJS弥补了HTML在构建应用方面的不足，其通过使用标识符（directives）结构，来扩展Web应用中的HTML词汇，使开发者可以使用HTML来声明动态内容，从而使得Web开发和测试工作变得更加容易。
之前在文章中介绍过mvc框架：简单来说，就是模型(model)－视图(view)－控制器(controller)的缩写，使用MVC的目的是将M和V的实现代码分离，从而使同一个程序可以使用不同的表现形式，C存在的目的则是确保M和V的同步，一旦M改变，V应该同步更新。MVC 模式同时提供了对 HTML、CSS 和 JavaScript 的完全控制。

那么，mvc的具体作用具体解释来说就是：Model（模型）是应用程序中用于处理应用程序数据逻辑的部分,常模型对象负责在数据库中存取数；View（视图）是应用程序中处理数据显示的部分，通常视图是依据模型数据创建的；Controller（控制器）是应用程序中处理用户交互的部分，通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。
angularjs有自己的控制器，对程序结构进行有效规范，例如通过$routeProvider，定义整个系统的路由表;

<span style="font-size: 16px;">myModule.config(function($routeProvider) {

    $routeProvider.when("/",{

        templateUrl: "pages/activity_list.html",

        controller: ActivityListController

    }).otherwise({

            redirectTo: "/"
</span>

用angular.js,写UI视图就是写正常的HTML/CSS，写逻辑控制代码就是用JavaScript操控数据（不是DOM），不同的就是增加了directive（directive封装Model与UI视图的关系，基本不必关心Model与UI视图的关系，直接操作Model就行了，UI视图自动更新。），实现DOM与数据的互动。AngularJS只是定义了一个环境和一个数据与视图交互的机制，并提供了若干通用组件和服务，所以AngularJS开发很简单，很高效，很“原生态”。

当想实现点击按钮跳转功能则在view上的代码用haml编辑为

%button.btn.btn-4(ng-tap = "go_page()")返回

然后在controller 里要写go_page()这个方法来实现跳转

$scope.go_page = function () {
   $navigate.go("/") ;
}

如果想要在跳转的同时存储一个数据，则要在model里加入如下代码

Activity.save_data = function (){
   var number = JSON.parse(localStorage.getItem("number"));
   number.push("a")
   localStorage.setItem("number",JSON.stringify(number));
}

这样就完成了功能。