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));}
这样就完成了功能。