专栏首页IMWeb前端团队Angularjs 初步使用总结

Angularjs 初步使用总结

本文作者:IMWeb yang7660317 原文出处:IMWeb社区 未经同意,禁止转载

背景

在最近的一个管理后台的项目中,决定用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 条评论
登录 后参与评论

相关文章

  • Angularjs 初步使用总结

    背景 在最近的一个管理后台的项目中,决定用angularjs去试一下水,后台采用express4.0的node来写,前端就直接用angularjs来实现。第一...

    IMWeb前端团队
  • 分享几个便利的工具软件

    clover 官方网址:http://cn.ejie.me/ 方便的 Tab 页功能 要掌握功能强大,操作简单的标签页,只需记住Ctrl+T新开页面,Ctrl+...

    IMWeb前端团队
  • 如何搭建高质量、高效率的前端工程体系--页面结构继承

    本文作者:IMWeb 莫卓颖 原文出处:IMWeb社区 未经同意,禁止转载 {{tags: 工具建设 开发模式}} 序言 相信很多程序员都会经历两件...

    IMWeb前端团队
  • Angularjs 初步使用总结

    背景 在最近的一个管理后台的项目中,决定用angularjs去试一下水,后台采用express4.0的node来写,前端就直接用angularjs来实现。第一...

    IMWeb前端团队
  • python爬虫

    py3study
  • 回放订阅 | NVIDIA CEO 黄仁勋 GTC CHINA 2019 主题演讲

    Orin是英伟达花费4年时间投入数十亿美元打造,性能比最新一代Xavier提升7倍,算力最高可达200TOPS。

    AI研习社
  • SDN产业联盟与ONOS战略合作

    4月22日,“2015中国SDN/NFV大会”在京举行。大会上SDN产业联盟与开源组织ONOS(Open Networking Operating System...

    SDNLAB
  • WebView与js交互

    在Project模式,main目录下,和java文件同级创建assets目录,assets目录下创建test.html,图片你随便找两张也放在asset是目录下...

    cMusketeer
  • Android多点触控技术实战,自由地对图片进行缩放和移动

    在上一篇文章中我带着大家一起实现了Android瀑布流照片墙的效果,虽然这种效果很炫很酷,但其实还只能算是一个半成品,因为照片墙中所有的图片都是只能看不能点的。...

    用户1158055
  • WKWebView 白屏问题

    czjwarrior

扫码关注云+社区

领取腾讯云代金券