CODEWITHSUNDEEP
javascriptangular
ng.newbie
ng.newbie

Reputation: 3218

angular 2 - How do you include javascript for a component?

I am completely new to Angular, and I have started directly with Angular 2. One of the things that are great about Angular is that I can modularize every feature of my web page. Components have their own html and stylesheet.

But what about their own javascript file ? How can I incluse its own particular javascript file ? I have seen this SO question is the only way available is to use SystemJS ?

For example lets say that one Component uses the Google Maps API or one component uses a charting library, how is that handled ?

Upvotes: 2

Views: 2762

Answers (2)

Eswar
Eswar

Reputation: 4983

I am using facebook sdk like below

FacebookService.ts modified from https://github.com/zyramedia/ng2-facebook-sdk. FacebookService file is partial, not pasting full file

analyze appendFacebook method to load external scripts globally but we are invoking when component requires, once external script loaded then we won't load it again as we are checking script id

@Injectable()
export class FacebookService {

    /**
     * This method is used to initialize and setup the SDK.
     * @param params
     */
    init(params: FacebookInitParams): Observable<any> {
        return new Observable(observer => {
            if (!window['fbAsyncInit']) {
                this.appendFacebook();
                window['fbAsyncInit'] = function() {
                    FB.init(params);
                    observer.next('FB initialized');
                    observer.complete();
                };
            } else {
                observer.next('FB initialized');
                observer.complete();
            }
      });

    }

    appendFacebook() {
        var js,
        id = 'facebook-jssdk',
        ref = document.getElementsByTagName('script')[0];

        if (document.getElementById(id)) {
            return;
        }

        js = document.createElement('script');
        js.id = id;
        js.async = true;
        js.src = "//connect.facebook.net/en_US/sdk.js";

        ref.parentNode.insertBefore(js, ref);
    }
}

then in component.ts file

constructor(private facebookService: FacebookService) {}

loginByFacebook() {
    let facebookParams: FacebookInitParams = {
      appId: environment.facebookAppId,
      xfbml: true,
      version: 'v2.7'
    };

    let facebookSubscription = this.facebookService.init(facebookParams).mergeMap(data => {
        return this.facebookService.login({scope: "public_profile,user_friends,email"});
    }).subscribe((response: FacebookLoginResponse) => {
      console.log(response);
    }, error => {
      console.log(error);
    });
}

Upvotes: 1

Gavin Haynes
Gavin Haynes

Reputation: 1992

In general, your app (the module) is considered to have one global set of dependencies. The way to handle this is to have all dependencies included before any of your app files.

With your example, your index.html would include the maps Javascript and the charts Javascript before it includes any component of the main application.

Upvotes: 0

Related Questions