Angular – Setup in your local computer with QuickStart seed

angular

Deprecated: get_the_author_email is deprecated since version 2.8.0! Use get_the_author_meta('email') instead. in /home/cloudber/public_html/wp-includes/functions.php on line 4713
Prerequisites:
Git is required for Clone method
Node.js and NPM are required.

Use either clone or download.

Clone

Run in either bash or command prompt. With this command, it downloads Angular QuickStart into a folder e.g. quickstart.

git clone https://github.com/angular/quickstart.git quickstart

 

Download

Download the QuickStart seed and unzip it into your project folder e.g. quickstart.

After Angular Quick-Start is cloned or Angular Quick-Start files are downloaded, run the following command to install dependencies.

cd quickstart
npm install

FYI. There are 3 core files under src directory in project folder.

  • app.component.ts is the root component of the project.
    app/app.component.ts
    import { Component } from '@angular/core';
    
    @Component({
      selector: 'cloudberry-app',
      template: `

    Welcome to {{name}}

    ` }) export class AppComponent { name = ‘CloudBerry Angular Tutorials’; }

  • app.module.ts is the root module of the project. To declare components you needed in the project, and also to bootstrap the root component.
    app/app.module.ts
    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { AppComponent }  from './app.component';
    
    @NgModule({
      imports:      [ BrowserModule ],
      declarations: [ AppComponent ],
      bootstrap:    [ AppComponent ]
    })
    export class AppModule { }
  • main.ts to bootstrap root module.
    main.ts
    import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
    
    import { AppModule } from './app/app.module';
    
    platformBrowserDynamic().bootstrapModule(AppModule);

Run the app

Open index.html under src directory.
We have to change <my-app> in index.html to the value of selector in app.component.ts which in this case is cloudberry-app.

index.html
<body>
    <cloudberry-app>Loading AppComponent content here ...</cloudberry-app>
</body>

Run the project in your default browser by executing this command in either terminal or command prompt.

npm start

Author: Wu Chia Chong

My main areas of interest are software architectures and software design methods, patterns, and new trends in software development.

Author: Wu Chia Chong

My main areas of interest are software architectures and software design methods, patterns, and new trends in software development.