Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • SystemJS and main.ts AngularJS 2

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 281
    Comment on it

    Hello everyone,This is the third tutorial of our ongoing series on AngularJS 2.

    Now, let's look at the main.ts file:

    import {bootstrap}    from 'angular2/platform/browser';
    import {AppComponent} from './app.component';
    
    bootstrap(AppComponent);
    

    The main.ts file is actually the entry-point to our web application i.e whenever an AngularJS web application is being rooted, the first file to be executed is main.ts.

    In order to launch the application, we need to import certain  packages comprising 

     bootstrap function and the root component ,which is AppComponent in this particular case, of our application .In actual projects, we'll notice that actually several components are being placed inside a module and then the root module is being imported and bootstrapped.

     

    Please note whenever we are in need of importing some package(s) directly within from node_modules, we simply type the name of the desired package. AngularJS automatically recognizes the relative path node_modules/ before the imported package. And also remember,.(dot) refers to the current directory i.e ts in this case.(See second line above)

     

    At last, by bootstrapping our root component ,we are simply loading the application. Please bear in  mind, in actual projects, as I told earlier we'll be bootstrapping the root module. Here, given the rudimentary and simplistic nature of the demo application being discussed, we've simply made a root component without wrapping it in a root module. But in actual projects ,it won't be the case.

    Now,look at these excerpts from index.html ,which is our home page.

     <script src="node_modules/systemjs/dist/system.src.js"></script>

    JavaScript libraries: the SystemJS library for module loading.

    <!-- Configure SystemJS -->
        <script>
            System.config({
                packages: {
                    app: {
                        format: 'register',
                        defaultExtension: 'js'
                    }
                }
            });
            System.import('app/js/main').then(null, console.error.bind(console));
        </script>

     

      The configuration file for SystemJS, a module loader and System.import() specifies that app/js/main is the entry point to our application.

    Thanks for reading...

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: