AngularJS Framework : Shopping cart sample

The source code is available from https://github.com/Einsteinish/AngularJS_Shopping_Cart_Sample.git. Actually, the code was built using this guide: https://angular.io/start.

For a local deploy, check Setting up the local environment and workspace.

To create a new workspace and initial starter app, run the CLI command ng new and provide the name my-app. The ng new command prompts us for information about features to include in the initial app. Accept the defaults by pressing the Enter or Return key:

$ ng new my-app
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE my-app/README.md (1023 bytes)
CREATE my-app/.editorconfig (274 bytes)
CREATE my-app/.gitignore (631 bytes)
CREATE my-app/angular.json (3566 bytes)
CREATE my-app/package.json (1249 bytes)
CREATE my-app/tsconfig.json (458 bytes)
CREATE my-app/tslint.json (3185 bytes)
CREATE my-app/.browserslistrc (853 bytes)
CREATE my-app/karma.conf.js (1018 bytes)
CREATE my-app/tsconfig.app.json (287 bytes)
CREATE my-app/tsconfig.spec.json (333 bytes)
CREATE my-app/src/favicon.ico (948 bytes)
CREATE my-app/src/index.html (291 bytes)
CREATE my-app/src/main.ts (372 bytes)
CREATE my-app/src/polyfills.ts (2835 bytes)
CREATE my-app/src/styles.css (80 bytes)
CREATE my-app/src/test.ts (753 bytes)
CREATE my-app/src/assets/.gitkeep (0 bytes)
CREATE my-app/src/environments/environment.prod.ts (51 bytes)
CREATE my-app/src/environments/environment.ts (662 bytes)
CREATE my-app/src/app/app-routing.module.ts (245 bytes)
CREATE my-app/src/app/app.module.ts (393 bytes)
CREATE my-app/src/app/app.component.css (0 bytes)
CREATE my-app/src/app/app.component.html (25757 bytes)
CREATE my-app/src/app/app.component.spec.ts (1057 bytes)
CREATE my-app/src/app/app.component.ts (210 bytes)
CREATE my-app/e2e/protractor.conf.js (869 bytes)
CREATE my-app/e2e/tsconfig.json (294 bytes)
CREATE my-app/e2e/src/app.e2e-spec.ts (639 bytes)
CREATE my-app/e2e/src/app.po.ts (301 bytes)
Packages installed successfully.
    Successfully initialized git.

The Angular CLI installs the necessary Angular npm packages and other dependencies. This can take a few minutes. The CLI creates a new workspace and a simple Welcome app, ready to run.

Replace the /src folder with the one from https://github.com/Einsteinish/AngularJS_Shopping_Cart_Sample.git.

.
├── README.md
├── angular.json
├── e2e
├── karma.conf.js
├── node_modules
├── package-lock.json
├── package.json
├── src
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.spec.json
└── tslint.json    

The Angular CLI includes a server, so that we can build and serve our app locally. Navigate to the workspace folder, such as my-app. Run the following command:

$ cd my-app

$ ng serve --open
Compiling @angular/core : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/platform-browser : es2015 as esm2015
Compiling @angular/router : es2015 as esm2015
Compiling @angular/platform-browser-dynamic : es2015 as esm2015
Compiling @angular/forms : es2015 as esm2015
Compiling @angular/common/http : es2015 as esm2015

chunk {main} main.js, main.js.map (main) 48.4 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 142 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 18.2 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 2.99 MB [initial] [rendered]
Date: 2020-09-21T06:29:22.866Z - Hash: e0e1a331986e17eabdbf - Time: 11921ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
: Compiled successfully.

Date: 2020-09-21T06:29:25.975Z - Hash: e0e1a331986e17eabdbf
5 unchanged chunks

Time: 2583ms
: Compiled successfully.

The ng serve command launches the server, watches our files, and rebuilds the app as we make changes to those files. The --open (or just -o) option automatically opens a browser to http://localhost:4200/ as shown in the Introduction section.

AngularJS