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 条评论
登录 后参与评论

相关文章

来自专栏Java3y

从零单排学Redis【黄金】

好的,今天我们要上黄金段位了,如果还没经历过青铜和白银阶段的,可以先去蹭蹭经验再回来:

1042
来自专栏编程

小白爬虫之爬虫快跑,多进程和多线程

使用多线程时好像在目录切换的问题上存在问题,可以给线程加个锁试试 Hello 大家好!我又来了。 你是不是发现下载图片速度特别慢、难以忍受啊!对于这种问题 一般...

1937
来自专栏Greenplum

Linux 常用命令(二)

Linux是一套免费使用和自由传播的类Unix操作系统(主要用在服务器上),接下来详细的介绍一下linux的一些知识。

730
来自专栏博岩Java大讲堂

Java日志体系(log4j2)

2959
来自专栏互联网杂技

react+redux+webpack教程5

现在项目已经有了,但是要把它放到生产环境中还是有些事情要做,在这最后一节,来把它们一一搞定。 这一节其实更多是关于webpack的内容。不过要想把react用得...

34211
来自专栏CSDN技术头条

一组 Redis 实际应用中的异常场景及其根因分析和解决方案

在上一场 Chat《基于 Redis 的分布式缓存实现方案及可靠性加固策略》中,我已经较为全面的介绍了 Redis 的原理和分布式缓存方案。如果只是从“会用”的...

2123
来自专栏流柯技术学院

nmon指标

nmon [ -s < seconds > ] [ -c < count > ] [ -b ] [ -B ] [ -g < filename > ] [ -k ...

912
来自专栏程序员宝库

vue-cli 脚手架中 webpack 配置基础文件详解

vue-cli是构建vue单页应用的脚手架,输入一串指定的命令行从而自动生成vue.js+wepack的项目模板。这其中webpack发挥了很大的作用,它使得我...

1793
来自专栏前端布道

HTML5离线应用与客户端存储

支持离线 Web 应用开发是 HTML5 的另一个重点。所谓离线 Web 应用,就是在设备不能上网的情况下仍然可以运行的应用。

961
来自专栏Python数据科学

Python爬虫之urllib库—爬虫的第一步

第一个爬虫代码的实现我想应该是从urllib开始吧,博主开始学习的时候就是使用urllib库敲了几行代码就实现了简单的爬数据功能,我想大多伙伴们也都是这么过来的...

841

扫码关注云+社区