Conflicting versions of dependencies in JavaScript/AngularJS - javascript

My earlier question was closed before I had the chance to add more clarity to it.
Might be a very basic question, but if I am using a particular version of a dependency, for example 1.x of dependency1, in my angular directive, and I package this directive to be used as a third party directive in an app that uses version 2.x of the same dependency1, how will the behavior be? I want to understand how shared directives work with multiple apps that might use a different version of a dependency that the directive is using.
I should probably make myself clear that I’m not asking about versions of angular. Let’s say I’m using bootstrap v3.3.7 in my directive whereas another app that uses my directive is using v3.1.1 of bootstrap. I want to understand how this would work and if there would be any conflicts.

Related

Ember Octane and JQuery

For the past few weeks i've been playing with ember octane which in my opinion is awesome.
I've tried a few ember plugins in order to test which plugins are working currently with ember octane, some of them require jQuery to work.
So my question is: if it's possible to add jQuery to ember octane to make those plugins work?
Haven't tested it myself but it should be as easy as:
Add #ember/jquery package as a dev dependency.
Enable optional feature jquery-integration.
An optional feature could be enabled using Ember CLI by running ember feature:enable some-feature or by editing config/optional-features.json manually. You could find more information about optional features in Guides.
One thing to note from #jelhan's answer is that adding #ember/jquery will only allow you to use JQuery internally. It will not allow Ember addons to use JQuery. For the ember addons to use JQuery, you would need to request that the addon add #ember/jquery to their dependencies.

How to upgrade AngularJS 1.6 to Angular 5

I have read Angular's official document for upgrading from 1.x to version 5. But I unable to achieve ngUpgrade.
Can anybody help to resolve this issue or help me how to proceed?
Old Project is in AngularJS 1.6 and I am using ui-router for routing mechanism.
Below is the sample code for the of the controller,
heroController:
myApp.controller("heroController", ["$scope", function ($scope) {
// Controller Code
}]);
index.cshtml code:
<body ng-app="myApp">
<div ui-view></div>
</body>
I have a wrapper of MVC for existing application. Now I want to migrate to newer version of Angular(Version 5 and upcoming versions).
Since the existing application have a lot of controllers, directives, services factories, thus I want to first ngUpgrade thereafter I will start migrating component wise.
NOTE:
I am not using any build tools to bundle js files, I am using MVC's bundle.
Two ways you can do,
(i) Best way is to rewrite the application.
(ii)Or migrate each module wise. You can read on How to migrate from the following blog.
https://vsavkin.com/migrating-angular-1-applications-to-angular-2-in-5-simple-steps-40621800a25b
Faced the same request, from a client, some time ago. After searching the internet for a quick fix for this found this guide. It has multiple steps, takes it one at a time. It is a lengthy process, but at least each step is described:
https://angular-2-training-book.rangle.io/handout/migrate/
Hope it helps
P.S. ngUpgrade needs this first: replace the ng-app directive with angular.bootstrap.
AngularJs and Angular are diffrent, in the sense that all Angular is a complete rewrite of AngularJs.
In other word AngularJs are all version of Angular 1 While Angular is version 2 upword.

Is it possible to use Angular Material without using CDK?

I'm trying to use Material the old school in ES5 using UMD module definition files.
It was all working fine, until I decided to upgrade to version 5. Now it says that it can't find bidi of undefined and as I investigated the issue, I realized that it's because of the new CDK or Component Development Kit.
Now I can't find a packages CDK UMD file that contains all of its parts in one place, and I really don't want to include all of those a11y, i18n, bidi, etc. one by one.
The question is, the more I look at CDK files, the more I realize that I might not even want them at all. I would be fine without them.
Is there a way to not load them and still use Material?

Load external modules (third party libs) in Angularjs

Until recently I used to develop my js applications with Backbone-js.
Now, I wish to start using Angular-js for the first time.
In my backbone-js apps I used requirejs to load any third party library, it let my app stay organized and clean.
Now, when playing around with angular, I see that in many examples they use <script> to load these modules.
Is there a clean way to load modules without using this <script> tag? and keep angular functioning as expected?
Is it common to use require-js for angularjs apps? or is there any alternative?
Thanks.
You don't need to use require since you have a built in dependency injection mechanism. In order to use 3rd party libraries you need to do 3 things:
Use libraries that are compatible with angular in order be synced with the digest cycle. Most of the common libraries have an angular module that encapsulates their code.
Add these modules to your app. You can explicitly add each library with its own script tag or you can create a bundle of all your libraries and include only it.
Declare the use of that module when you create your app and module.
Angular uses whats called dependency injection to handle modules. Here is the documentation: https://docs.angularjs.org/guide/module
You might want to look at https://github.com/substack/node-browserify#usage
The downside is you'll introduce a "compile phase" to your build process.
The plus is the npm integration.
You still need to follow the "angular way" to inject dependencies, using browserify you'll have little yet nice puses https://blog.codecentric.de/en/2014/08/angularjs-browserify/
Hope it helps.

What is the advantage of using requirejs and AMD in an angularjs application? [duplicate]

This question already has answers here:
Does it make sense to use Require.js with Angular.js? [closed]
(14 answers)
Closed 8 years ago.
I've always been a supporter of requirejs and AMD, but since I started to learn AngularJS I feel uncomfortable to combine the two technologies together.
I know it is actually possible to use requirejs to manage and load dependencies in an angularjs application, and the same developers call the two products "orthogonal", but how much value can it add?
The first argument it comes to my mind is dependency injection, it actually decouples the dependencies between modules, that translated it means I don't need to keep track of the dependencies nor of the script loading order (at least most of the time).
On top of that it seems AMD can even go against the principles behind the DI, because it requires to hardcode the dependency somewhere into the scripts...
So would it be wise to say that using AMD in an angulajs application would add only additional complexity without bringing any major advantage?
I don't think of AMD as dependency injection. It's a module loader. The roles are different. RequireJS loads files for you: Angular doesn't do that at all.
For example, I don't list "underscore" in my list of angular dependencies. If I need it in an service, I let RequireJS load it for me. Angular does inject all the application code though.

Categories

Resources