Angularjs 初步使用总结

背景

在最近的一个管理后台的项目中,决定用angularjs去试一下水,后台采用express4.0的node来写,前端就直接用angularjs来实现。第一次边学边用,这里记录下使用过程中的心得。

开发思路

1、首先url的定位到了指定的html页面。

Angularjs比较适合做SPA,所以在express中只需要把地址指导制定的html页面就好,其余的接口,全部都是面向数据即可。

router.get('/', (req, res) => res.sendfile(path.join('public', 'views', 'index.html')));

在index.html页面中首先引入angularjs,之后再根据需要,将对应的js文件引入。

2、定义Anguarjs module。

  • 依赖注入已经初始化好的对象。
var myMod = angular.module('myMod',['ngRoute', 'ngAnimate']);

Angularjs依赖注入机制对应的服务都需要唯一的名字,上述的举例的两个一个是路由管理,一个是动画实现,这些都需要我们单独引入angular-animate.js,angular-route.js文件。有很多服务都是已经实现的,也比较通用的,例如关于angularjs ui的模块,可以去Angularjs ui查找对应的服务。

Angularjs中建议我们一个app对应一个module,而module将会对应很多controller (controller 只在需要的时候才会初始化,一旦不需要就会被抛弃),所以这里的module就像一个全局变量一样,将属于angularjs的内容全部控制在module之下。

3、定义service, controller

  • 单单向moudule中注入已经存在的对象,显然无法满足我们的需求,我们需要依赖注入我们自定义的service 。
  • controller就是不同的业务的逻辑代码处理存放的位置。这里建议一个子页面对应一个controller
//用factory定义service
myMod.factory('formatDate', function() {
    var service = {};
    service.method1 = function(){};
    return service;
});
//定义controller,并在其中使用上面定义的service
myMod.controller('CtrlName', function($scope, formatDate) {
    $scope.data = {};
    formatDate.method1();
});

angularjs不同页面的逻辑,都会集中在页面所对应的controller中,但是有很多是公用的逻辑,就需要我们抽象出来。这里,Angularjs提供了三种方法创建并注册我们自己的 service:Factory,Service,ProviderFactory,Service,Provider区别其实并不大,Providers 是唯一一种你可以传进 .config() 函数的 service。当你想要在 service 对象启用之前,先进行模块范围的配置,那就应该用provider。关于具体的区别,感兴趣的可以查询下。

4、定义filter

  • 过滤器,angularjs自带了很多过滤器,使用的时候只需要在模版中类似于 {{ 5.6 | currency }} ,显示的就是$5.60,这里currency是自带的过滤器,用来给数字加上美元符号,开发中我们用到最多的就是date过滤器。
//定义filter,这里同样可以注入我们自己定义的服务
myMod.filter('filterName', function(){
    //返回函数,参数就是压力过滤的值
    return function(input){
        var a = {
            1:"帅哥",
            2:"美女",
            3:"未知"
        };
        return a[input];
    }
})

这样我们使用的时候{{ 1 | filterName }}返回的值就是帅哥了。所以有很多操作我们就可以定义在filter中,会大大的精简模版的代码量,也便于代码的管理。

5、定义route

  • 之前提到过,controller就是不同的业务的逻辑代码处理存放的位置。这里建议一个子页面对应一个controller。
mymod..config(['$routeProvider', function ($routeProvider) {
        $routeProvider
        .when('/page1', {
            templateUrl: 'views/page1.html',
            controller: 'CtrlName'
        })
        .otherwise({
            redirectTo: '/page1'
        });
});

这里when中的第一个参数代表路径,例如访问localhost/index,则当地址为localhost/index#/page1的时候,就会匹配到第一条路由,进而通过page1.html 和 CtrlName生成页面,返回给浏览器。当所有的when中的地址都无法匹配时,触发otherwise中的地址。 这里when中的地址可以加上/page1/:id,则就可以匹配#/page/2的请求了,这时候2的值就存在了$routeParams.id中了。

6、写页面

  • 页面的写法,因为是单页面应用,所以必然入口就是index页面,在index.html中引用自己需要的各个js文件。
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>秩序管理后台</title>
        <script src="/assets/js/angularjs/angular.js"></script>
        <!--这里后续再把之前定义的moudle,route,service,filter, controller引用进来,注意要首先引用moudle定义的js文件。>
    </head>
    <body ng-app="myMod">
        <div ng-view></div>
    </body>
</html>

页面加载的同时,就会生成对应的moudle对象,已经定义的各个route,service,filter, controlle。当我们访问地址的时候,会根据ng-app中的moudle,就会根据匹配到route中的地址,来填充<div ng-view></div>中,触发对应的controller,生成html。

7、文件布局

  • 写到这里,文件的布局也就基本明了了。

整个前端的目录放在public中:

  • assets,用于存放使用的静态资源,比如引入的各个angularjs服务,bootstrap等。
  • controllers,用于存放定义的controller。
  • data,用于存放配置的数据。
  • filter,用于存放自定义的过滤器。
  • routers, 用于存放定义的路由器。 -views,用于存放模版的html文件。

写在最后

很多时候我们必须要在写代码前就清晰的把握好该如何架构。清晰的目录和代码思路会让我们无论是新开发还是添加修改功能都事半功倍。 此文章主要是简单的介绍了自己在使用angularjs的时候整个的开发思路,很多细节上的东西并没有去介绍,总的来说angularjs在面对比较多的数据操作的单页面还是很方便的很强大的,这也是MVVM框架自身的优势。 end~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏三丰SanFeng

Linux进程间通信(一) - 管道

管道(pipe) 普通的Linux shell都允许重定向,而重定向使用的就是管道。 例如:ps | grep vsftpd .管道是单向的、先进先出的、无结构...

2027
来自专栏Pythonista

python操作redis

redis是一个key-value存储系统。和Memcached类似,它支持存储的value类型相对更多,包括string(字符串)、list(链表)、set(...

771
来自专栏PHP在线

SQL语句执行过程详解

一条sql,plsql的执行到底是怎样执行的呢? 一、SQL语句执行原理: 第一步:客户端把语句发给服务器端执行 当我们在客户端执行 select 语句时,客户...

4346
来自专栏博客园迁移

乐观锁与悲观锁

乐观锁与悲观锁 http://www.cnblogs.com/qjjazry/p/6581568.html

863
来自专栏牛肉圆粉不加葱

Spark RPC 简述

Spark 中的消息通信主要涉及 RpcEnv、RpcEndpoint 及 RpcEndpointRef 几个类,下面进行简单介绍

813
来自专栏编程

Web并发页面访问量统计实现

往期精选 页面访问量统计,可能在上学的时候就讲过如何简单实现,例如在servletContext中保存一个页页面访问次数,然后每访问一次加1;或者每访问一次就把...

4149
来自专栏Golang语言社区

社区leaf学习笔记|04. MongoDB测试

大家好,本篇文章给大家带来的是leaf原作者仅支持的mongoDB的相关测试;测试之前我们简单了解下MongoDB

1133
来自专栏xingoo, 一个梦想做发明家的程序员

Elasticsearch集群管理

ES通过设置【节点的名字】和【集群的名字】,就能自动的组织相同集群名字的节点加入到集群中,并使很多的技术对用户透明化。 如果用户想要管理查看集群的状态,可以...

1917
来自专栏程序员宝库

走进 Redis:Redis 的安装、使用以及集群的搭建

一、Redis的安装 Redis的安装是很简单的,安装之前我们需要c语言的编译环境。如果没有gcc需要在线安装。 yum install gcc-c++。 安装...

33512
来自专栏玩转JavaEE

Spring Cloud Stream使用细节

上篇文章我们看了Spring Cloud Stream的基本使用,小伙伴们对Spring Cloud Stream应该也有了一个基本的了解,但是上篇文章中的消息...

3416

扫码关注云+社区