javascript - AngularJS modules vs CommonJS/ECMA6 modules -

-

i've joined ongoing web project frontend written in angular 1 mvc framework , using webpack build system , i'm feeling neo in matrix 2 in stack of nested matrices.

the project split separate .js files, each annotated module in either commonjs style (with require , module.exports) or ecma6 style (with imports , exports). webpack transpiles ecma6 ecma5 babel , creates single bundle them.

within commonjs modules reside angularjs modules. living inside commonjs, angular task of dependency injection of own angular's requirejs-esque module system.

i'm feeling same job of dependency management done twice.

is true, when angular written, angular developers had in mind multi-module angular projects should've been concatenated e.g. grunt concat single bundle , served client, angular $injector responsible dependency management? so, our webpack build over-complication on top of that?

example project:

file model.module.js:

import angular "angular";  import {entityviewcontroller} './entity_view_controller'  // @nginject function routes($stateprovider) {     $stateprovider.state("modeller.entity.view", {         url: "/:id/view",         controller: entityviewcontroller,         templateurl: "/states/modeller/model/entity_view.html"     }); }  export default angular.module("states.modeller.entity", [])     .config(routes)     .controller("entityviewcontroller", entityviewcontroller);

file entity_view_controller.js:

"use strict"  export /* nginject */ function entityviewcontroller($scope, $stateparams, entitymodel) {     $scope.entity = {};     $scope.attributes = [];     entitymodel.get({id: $stateparams.id}, (data) => {         $scope.entity = data.entity;         $scope.attributes = data.attributes;     }); }

it true angular concat-friendly , doesn't require other modular solutions. development styles (notably jp) imply usage of iife's avoid global namespace pollution. 1 can write iife's hand or delegate job webpack or other modular systems.

the usage of modular systems introduces design solutions unsuitable plain js.

class inheritance in angular components (e.g. controllers) ugly angular di. , when using classes app-wide iife modules 1 may need maintain exports manually - again, that's job modular systems.

considerable amount of app components can framework agnostic, expands options architectural decisions (framework migration, isomorphic apps) , allows units tested separately framework.

js modules , angular modules/di play nicely in experience.


Comments

Post a Comment

Popular posts from this blog

Hatching array of circles in AutoCAD using c# -

-
i beginner in autocad plugins .i have created array of circle using following code. now, have hatch circles in array .how that??how hatch circles @ once? moreover, how can return hatch method , use hatch objects.sorry language.thanks in advance. [assembly: commandclass(typeof(beamsection.class1))] namespace beamsection { public class class1 { //class1 obj = new class1(); [commandmethod("beamatsupport")] public void addlightweightpolyline() { // current document , database document acdoc = application.documentmanager.mdiactivedocument; database accurdb = acdoc.database; promptpointresult ppr = acdoc.editor.getpoint("\nselect starting point "); var ucs = acdoc.editor.currentusercoordinatesystem; point3d startingpt = ppr.value.transformby(ucs); list<double> radius = new list<double>(); radius.add(0.5);
Read more

ios - UITEXTFIELD InputView Uipicker not working in swift -

-
hello trying pop uipickerview view programmatically when user clicks on textfield. have tried doesn't doing anything. isn't working. nothing happening when click textfield class userprofiletableviewcontroller: uitableviewcontroller,uitextfielddelegate,uipickerviewdelegate,uipickerviewdatasource { var itempicker: uipickerview! = uipickerview() @iboutlet weak var gendertxtfield: uitextfield! var gender = ["male","female"] override func viewdidload() { super.viewdidload() gendertxtfield.delegate = self itempicker!.delegate = self itempicker!.datasource = self itempicker!.backgroundcolor = uicolor.blackcolor() self.gendertxtfield.inputview = itempicker } func numberofcomponentsinpickerview(pickerview: uipickerview) -> int{ return 1 } // returns # of rows in each component.. func pickerview(pickerview: uipickerview, numberofrowsincomponent component:
Read more

Python Pig Latin Translator -

-
so have been working on @ codecademy.com while trying learn python. don't know if blind , can't see why won't work or what. here's code won't let me use. function print variable if had typed in , print "empty" if didn't type anything. print "welcome english pig latin translator!" original = raw_input("what's name?") if len(original) > 0 print original else print "empty" if len(original) > 0 else the above lines contains syntax errors. try: if len(original) > 0: else: note added colons, ( : ).
Read more