Angularjs 初步使用总结

背景

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

开发思路

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

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

代码语言：javascript复制

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

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

2、定义Anguarjs module。

依赖注入已经初始化好的对象。

代码语言：javascript复制

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

代码语言：javascript复制

//用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,Provider。 Factory,Service,Provider区别其实并不大，Providers 是唯一一种你可以传进 .config() 函数的 service。当你想要在 service 对象启用之前，先进行模块范围的配置，那就应该用provider。关于具体的区别，感兴趣的可以查询下。

4、定义filter

过滤器，angularjs自带了很多过滤器，使用的时候只需要在模版中类似于 {{ 5.6 | currency }} ,显示的就是$5.60，这里currency是自带的过滤器，用来给数字加上美元符号，开发中我们用到最多的就是date过滤器。

代码语言：javascript复制

//定义filter，这里同样可以注入我们自己定义的服务
myMod.filter('filterName', function(){
    //返回函数，参数就是压力过滤的值
    return function(input){
        var a = {
            1:"帅哥",
            2:"美女",
            3:"未知"
        };
        return a[input];
    }
})

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

5、定义route

之前提到过，controller就是不同的业务的逻辑代码处理存放的位置。这里建议一个子页面对应一个controller。

代码语言：javascript复制

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文件。

代码语言：javascript复制

<!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~

angularjs

0 人点赞