Correct paradigm for mixing angular code with external code

Question

Angular Newbie here. I'm trying to understand the paradigm to use when developing an Angular app so I can use external libraries while keeping the Angular app reusable.

So imagine I've got a form that uses ng-submit:

<form ng-submit="submit()">...<!--code goes here --></form>

And then inside the corresponding ng-app and ng-controller (assume those are declared in a parent element), I've got my submit function. But say, on this page only, I want to use a custom alert library after submitting:

$scope.submit = function(){
// code goes here to submit form data
//now tell the user that save was successful
customAlertLibrary.alert("your data has been saved")
}

Now that's not reusable code, is it? I may want to reuse this ng-app on another page to modify and submit data, but don't want to use the custom alert library. It seems like you're trapped because the ng-submit attribute restricts you to functions inside the corresponding ng-app, not external functions. So what is the correct way to invoke other Javascript code alongside my Angular code without baking it into the model?

score 1 · Answer 1 · edited May 23 '17 at 12:20

1

This question is very similar to this question about making lodash available in templates. There are many ways of adding external (or in-app) code or data-structures to your Angular scope. I prefer to add special-purpose stuff to each scope individually, and general-purpose utilities (such as lodash or momentjs) globally:

app
.run(['$rootScope', function($rootScope) {
    $rootScope._ = _;
    $rootScope.moment= moment;

    // or:
    // $rootScope.util = {
    //      _: _,
    //      moment: moment
    // };
});

edited May 23 '17 at 12:20

Community

1
1

answered Jan 22 '15 at 21:49

Domi

22,151
15
92
122

Ah, ok. I'm new to Angular. How do I go about adding things (I want to add a method) to the scope locally, just for a particular page without modifying the global, reusable template? The example you provide here from `lodash` is for adding to the global scope, correct? – J-bob Jan 23 '15 at 16:25
Yes, this one is global. I'm sure, you are already aware of how to assign stuff to your scope. Like: `$scope._ = _;`... – Domi Jan 23 '15 at 16:36
I am, but I only know how to access that `$scope` variable inside `app.controller("myController", function($scope){... $scope.attribute = ...}`. Isn't that the global script that will be imported everywhere this Angular model is used? Maybe I'm not totally familiar with the Angular paradigm yet. – J-bob Jan 23 '15 at 16:47
@J-bob I'm not following? – Domi Jan 23 '15 at 16:49
Isn't the idea of Angular that you can declare this model in an external js file and then import and use it on any page? If I do `$scope.myCustomFunction = some-function-thats-only-used-on-this-page` aren't I cluttering the global scope with functions only used in one place? – J-bob Jan 23 '15 at 16:53
Generally speaking, `$scope` is local. It's contents won't be seen anywhere but inside of your controller's or directive's scope. I'd recommend [brushing up on Angular basics](http://www.ng-newsletter.com/posts/beginner2expert-scopes.html) – Domi Jan 23 '15 at 17:11
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/69466/discussion-between-j-bob-and-domi). – J-bob Jan 23 '15 at 17:17

score 0 · Answer 2 · answered Jan 22 '15 at 22:53

If customAlertLibrary isn't crucial to your app, I'd say do something like this

$scope.submit = function(){
  // code goes here to submit form data
  //now tell the user that save was successful
  if ($window.customAlertLibrary) {
    customAlertLibrary.alert("your data has been saved");
  }
}

Otherwise, I'd suggest using Bower to manage dependencies. You install packages with Bower, and your own app can be a package that gets included and installed by other apps. Any dependency your app has gets installed as well (the user still has to include it on their own end in a <script> tag)

Correct paradigm for mixing angular code with external code

2 Answers2