• AngularJS 项目开发实战


    目录

    1. 啰嗦一下
    2. 你问我答
    3. 目录结构
    4. 压缩
    5. 其他

    啰嗦一下

    最近在开发一个项目时,调研了一下AngularJS,发现这个框架功能很丰富,而且用起来也很方便,所以深入了解了一下,在此分享一下我的感悟。

    AngularJS是一个MVVM框架,所谓MVVM框架,即:Model-View-ViewModel,通俗一点的解释是:当数据发生变化时,框架自动进行数据绑定,自动更新页面上的数据。

    这一点可以说是非常“神奇”的功能,可以减少我们很多的工作量。把我们从复杂的DOM结构中解脱出来,用剩余的时间去干一点有用的事情。

    试想一下,当你和女神谈天说地,聊得不亦乐乎的时候,你突然发现自己的操作DOM的代码有点问题,改来改去改了好久才把问题解决掉,再回头和女神聊天,发现女神的笑容依旧那么美丽,但确是和隔壁使用AngularJS框架的王哥,这是多么悲伤场景啊!也许就在你修改代码期间,一段美好的姻缘就随风消逝了。这不能说是你们没有缘分,而是你选错了框架啊!

    说了很多AngularJS的好话,也要澄清一点,没有东西是完美的,AngularJS也有一些缺点,比如说,AngularJS自身框架的一些bug,不适合界面频繁交互的场景(如:游戏类网站)等,好在现在的网站大部分都是CRUD型的应用,你可以放心用了。

    下面我们就正式介绍一下AngularJS的相关知识点以及在项目中的应用,先进入到你问我答环节,看看群众们有哪些疑惑。

    你问我答

    问: AngularJS 适合构建什么类型的应用?
    答: AngularJS 适合做单页面应用程序(SPA应用),但是需要注意的是,并不是一个项目只能有一个页面应用,例如:做管理系统时,你可能需要为三种不同的账户提供三种不同的页面入口,master、guest、friend,你可以创建三个页面入口,每个页面是一个应用,并提供相应的页面入口即可。

    问: 我以前做前端时,都是使用JQuery开发的,他们有什么区别吗?
    答: 有本质的区别,推荐你看一篇文章 jQuery开发者眼中的AngularJS

    问: AngularJS不能做游戏网站,但是Jquery可以啊,这么说来AngularJS没JQuery好用啊?
    答: 如果你要是做游戏网站的话,你确实需要使用偏底层的JQuery,但是却不能说哪个好不好用,场景不同,需求也就不同,使用的技术也不同。

    问: 如果用了AngularJS,我之前使用的JQuery或JS插件是不是就不能用了啊?
    答: 是的,他们不能同时使用,有一些JS插件通过修改可以在AngularJS中使用,如滑动插件iScroll,但是大多数插件都不行,如果你想实现一些效果,可以在网上找一找AngularJS的插件,很多插件都有相应的AngularJS实现,或者是兼容AngularJS的方法。

    其他问题后期再收集整理,看一下项目规划的目录结构把!

    目录结构

    |-css
    |-js
    	|-controllers
    		|-index
    			|-a.controller.js
    			|-b.controller.js
    		|--demo
    	|-directives
    	|-filters
    	|-services
    	|-main.config.js
    	|-main.route.js
    |-templates
    |-libs
    

    目录结构大概就是这样的,过滤器放在filters中,指令放在directives中,服务放在services中,main.config.js创建本服务的module和监控路由变化的事件等,

    angular.module('moduleApp', ["ngRoute", "ngTouch", "ngAnimate"]);
    

    main.route.js中配置路由信息,如:

     function Route($routeProvider) {
        $routeProvider.when('/demo', {
            templateUrl: 'a.html'
        }).otherwise({
            redirectTo: '/index'
        });
    }
    

    控制器放在controllers中,在controllers中需要分成具体的功能,这样防止在一个controllers有很多个js文件。

    压缩

    当开发完项目时,你会发现,里面有好多个JS文件,每个文件的大小都不大,但是对于前端来说,会发起很多请求,影响性能,所以我们要对文件进行压缩,可以使用gulp压缩,具体的压缩方法可以自己在网上查找,有很多文档可以查找,压缩后最常出现的问题是找不到所对应的依赖,AngularJS是通过参数名称注入的,如果不手动添加依赖,压缩之后就找不到对应的以来名称,如果你按照我前一段时间发的规范Angularjs书写规范开发的话,压缩不会有什么问题。

    手动添加依赖
    angular
        .module('app')
        .controller('Dashboard', Dashboard);
    
    Dashboard.$inject = ['$location', '$routeParams', 'common', 'dataservice'];
    
    function Dashboard($location, $routeParams, common, dataservice) {
    }
    

    其他

    一个项目中会遇到很多问题,只有自己一点点去尝试,过一段时间会把项目中遇到的问题及解决办法整理一下,供大家参考。

    每个人都有自己擅长的做事方法,但是不能因为有一些我们不熟悉就不去接受它的思想

  • 相关阅读:
    网易2019校招C++研发工程师笔试编程题
    牛客网 数串
    ps aux 状态介绍
    阿里在线测评解析
    Ubuntu 18.04安装 Sublime
    file '/grub/i386-pc/normal.mod' not found.解决方案
    解决Windows10与Ubuntu系统时间不一致问题
    进程与线程的区别
    大端模式和小端模式
    2016湖南省赛----G
  • 原文地址:https://www.cnblogs.com/tgwang/p/4830093.html
Copyright © 2020-2023  润新知