Angular项目构建指南 - 不再为AngularJS构建而犹豫不决_Ubuntu_青云站长教程网
欢迎来到站长教程网!
  • 秒到短信接口 免费试用
  • 微信支付宝接口 秒结算
  • 中文网站排名|申请加入
  • 搜索引擎全站查询
  • 查询移动网站权重数据
  • 海外主机 台湾公司直销
  • Ubuntu

    当前位置:主页 > 服务器教程 > Ubuntu >

    Angular项目构建指南 - 不再为AngularJS构建而犹豫不决

    时间:2019-10-10|栏目:Ubuntu|点击:
  • 接触Angular也有小半个月了,虽然没有使劲折腾,不过正所谓"no zuo no die".学一门新东西,不好好折腾一下总觉得对不起祖国,最不起人民...好像扯远了,想写前言来着.为什么要写这篇构建指南?最大的原因是为了给正在找这方面资料,挣扎于各种说法中的同学一个借鉴,同时我也把自己的经验记录下来,两全其美.

    正文

    如果你不知道什么是Angular或者根本没听说过,那么我接下来所说的对你来说毫无益处,不过如果你打算以后会接触Angular或者干脆要涨涨姿势~读下去还是有点用的.

    Angular和它之前所出现的其余前端框架最大的不同,在于它的核心不再是DOM,而是数据,是model.我们惯用的不管是单纯的jQuery还是MVC的Backbone,它们本质仍是让我们更方便更有条理的操作DOM,但是Angular不是.通过一系列魔术般的手法,它将一切的重心转移到数据上.以开发应用而不是操作节点的方式去开发Web,一切以数据为中心,数据的变化驱动了一切,包括行为.

    文本主题,如何构建一个angular项目?

    坦白说最开始构建一个项目的时候,虽然很小但是很纠结.我本身是有点完美主义的,所以虽然一开始什么都没有也想做到尽善尽美.因为听过很多前辈的经验,说如果框架基础没搭好,等到后来不管是重构还是维护都是一场噩梦.所以一开始小心意义,希望能将项目尽量搭建的结实并且益于维护和开发.

    在搭建伊始首先遇到的一个问题,就是到底要不要引入requirejs或者seajs这类依赖管理的工具?

    我本身没有多少语言或者技术的上的情节,对于各个大神也没有多少膜拜的憧憬(更多的是我根本不清楚谁是大神,也从没去找过).所以对于我来讲不管是requirejs的AMD还是seajs的CMD,从实现的角度上来讲都是做了同一个工作.在考虑一个Angular应用到底需不需要这种工具的时候,我也在网上看了很多人的说法.我总结一句就是,基本都和没说一样,也就是用不用随便,看情况.

    那么我能有什么好的答案,其实我现在的答案就是:"可以不用".怎么说是可以不用呢,如果你不用requirejs也能满足项目的开发以及各种需求,那么就别用了.angular本身的模块已经做到了依赖注入,所以我们不需要通过requirejs进行异步加载也可以很好的用下去.

    当然,如果你开发过程中发觉还是有些地方需要,那么也可以加上去.本文里我会详细说明这两种方式的构建方法.但是这里我的观点已经表明了:在不需要的情况下,不要用.

    带你走近AngularJS系列

    带你走近AngularJS - 基本功能介绍

    带你走近AngularJS - 体验指令实例

    带你走近AngularJS - 创建自定义指令

    如何在 AngularJS 中对控制器进行单元测试

    AngularJS 之 Factory vs Service vs Provider

    (1) 不用requirejs直接构建Angular

    之所以不使用requirejs就直接构建angular,因为angular对于依赖的管理以及angular的使用场景完全可以做到这一点.首先在以来上,angular的依赖注入是个好东西,不了解的同学可以去搜一下资料.我这里简单的说,就是当我需要一个module的时候,我不用管它在哪,它是什么.我只要知道它的名字然后告诉angular就可以了,至于怎么将它的对象传递过来,怎么找到的,angular自己会去处理.

    angular.module('myApp', [
      'ngRoute',
    ]);

    例如这里的ngRoute,我需要知道ngRoute怎么来的,在哪里.只要有一个模块定义为ngRoute我就可以直接拿来用.

    鉴于Angular如此的给力,剩下的事情就好办了.我们只需要从功能和业务两方面将文件划分成module就可以了,然后将所有的库文件在页面上通过script标签引用,再将所有的业务文件也即是我们自己写的js合并为一个all.js加载到页面上即可.

    这里文件的划分遵循angular官方的推荐方式:

    |--js
      |--app.js                    // app启动文件,用于app配置
      |--controllers.js          // controllers也就是存放我们自己的业务文件
      |--directives.js            // 指令文件(指令可共用)
      |--fliters.js                  // 过滤器文件(过滤器可共用)
      |--services.js            //  服务文件(可共用,一般是与服务器交互的服务)
    |--partials
      |--html1.html 
      |--html2.html
    |--index.html

    app.js

    'use strict';


    // Declare app level module which depends on filters, and services
    angular.module('myApp', [
      'ngRoute',
      'myApp.filters',
      'myApp.services',
      'myApp.directives',
      'myApp.controllers'
    ]).
    config(['$routeProvider', function($routeProvider) {
      $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
      $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
      $routeProvider.otherwise({redirectTo: '/view1'});
    }]);

    controllers.js

    'use strict';

    /* Controllers */

    angular.module('myApp.controllers', [])
      .controller('MyCtrl1', ['$scope', function($scope) {

    }])
      .controller('MyCtrl2', ['$scope', function($scope) {

    }]);

    directives.js

    'use strict';

    /* Directives */

    上一篇:C语言学习笔记之getopt()

    栏    目:Ubuntu

    下一篇:热门游戏 2048 C++ 源代码分享

    本文标题:Angular项目构建指南 - 不再为AngularJS构建而犹豫不决

    本文地址:http://www.jh-floor.com/fuwuqijiaocheng/Ubuntu/86909.html

    广告投放 | 联系我们 | 版权申明

    重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

    如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

    联系QQ:888888 | 邮箱:888888#qq.com(#换成@)

    Copyright © 2002-2017 青云站长教程网 版权所有 琼ICP备xxxxxxxx号