Monday, 5 December 2016

Angular 2 Getting started



Angular 2 is one of the fastest web app java script framework for building our web application.
It can be added to our HTML page using the <script> tag.

1) Angular 2 application anatomy:

 

                   

>These components can be pulled together to form an application by defining an "Angular Module".
 
>Every Angular application has atleast one Angular module called the "Angular root module"(app) and also an application can have any number of additional angular modules including Angular feature module that consolidates the components into specific application feature.



 2) Languages that can be used for developing Angular JS (Language Selection)

       a)    The JS Language specification feature is officially called the ECMAScript (ES).

               Different versions of ES:
               * ES 3 - Supported by older broswers
               * ES 5- Current version
               * ES 2015 (ES 6) - Must be Transpiled (compiled by a tool to ES 5) before the browser     executes it...
  
                             

 3) Selecting an Editor :

      

4) Setting up Enviornment:


     npm  –  Is a CLI utility that interacts with the repository of open source projects.

--   Package manager for java script

--   To install all lib of angular
            --   Download from npmjs.com

   Setting up the Angular JS application manually: (Can be referred for documentation in www.angular.io)

         

    Alternate steps:


                           a) Tooling :Angular CLI:
                           
Its a CLI for generating the setup files and boilerplate code for A2 application (including Scaffolding unit and end to end test)

b) Starter files for building our application, i have referred from git hub
              https://github.com/Sachin-Suresh/Angular2-Getting-started--Components-Interpolation-and-Databinding-



From the above github link, i have  downloaded and pasted the APM Start into my work space folder in my drive say and opened using my VS code editor.

                


                  


Understanding the directory structure:

> All the files specific for our application are under the app folder.

> These are the setup files:

   


5) Now we have to install all the libraries required for running our Angular 2 application:

   * Open any terminal (i have used Babun tool) with the application root directory and type 'npm install'

       

   * This installs all the libraries we need and typescript. Ignore the warnings.

   * We get a tree structure in the end which shows the installation is complete.

  * We get a node modules folder and typings folder post npm installation:

    

   * Type npm start to start the application server.

   * Once the server is started hit the below URL:

 

   * Notice the code structure:

    

     

 For every .ts file we get .map file and .js file

Process: The start script started the TypeScript compiler, which transpiled all the .ts file to ES js file (.js file) that browser can understand.

.map file: is the source map generated by the compiler which helps debug .ts code


To stop the server: use Ctrl +C 


6) Modules

 * Modules are used to resolve namespace issue in Angular2 application.

 *  In ES 2015, a module is a file and vice versa.

 * We just create a file and write some code and import/export, the file becomes a module.

  * Angular 2 has something called Angular 2 modules.




7) Component:

    A component includes:

    a) A View defined in a template
 
    b) Its associated code defined within a Class (Properties, Methods)
         A Class becomes a function when we give a metadata.

    c) Metadata defined with a  Decorator (an angular component function)
             Decorator is a function that adds Metadata to a class, its members.
             Always prefixed with @

           

   
Example of a component in a TypeScript: