Learn AngularJS

There are a lot of JS frameworks available on the internet. AngularJS was one of them and it could be used to for developing mobile and web applications. A lot of Apps developed in AngularJS are still working around the internet.

AngularJS Local computer setup process:

Local setup link: https://angular.io/guide/setup-local

A. To install through terminal window, download a text editor eg. ‘Atom

(Once Atom installed and opened first time, better to right click on it and click on ‘Pin to taskbar’, for easy access later.)

B. Install terminal window in Atom. To install:

  1. Open file>settings.
  2. Click “+” (install)
  3. Search for a terminal package called “platformio-ide-terminal”
  4. Click “install”.
  5. Press Crtl + ` to toggle the terminal.

C. Create a folder for project in your computer. Open ‘Atom’. Click on ‘File’ menu on top left corner of Atom and click on ‘Add Project Folder’ in Atom. Add the empty created in computer, for project.

D. After that paste this npm command inside Terminal window and press Enter:

npm install -g @angular/cli

(If it don’t install, there maybe need to install NodeJS on your computer first.

Read all the messages showing in terminal to understand if any error comes. They can be copied and searched on google for possible solutions.)

E. Once, the execution of last command completes, next run this command in terminal:

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

F. After that run this command:

ng new my-app

(‘my-app’ is the name of your project, in above command. You can change its name as per your project.)

G. Enter ‘y’ for yes, when asked during setup process.

H. Change path of project in terminal window by typing:

cd my-app

(Remember ‘my-app’ is the name of your project, which you need to change in above command.)

I. After that enter enter command:

ng serve --open

(After that press Enter key on keyboard and for message shown press Enter again.

It will automatically open a new browser window with output of current AngularJS files on Computer installed.)

J. Click on ‘Learn Angular’ to follow learning procedure.

K. Once you completed working on project, you can close ongoing process in CLI by press Ctrl+C

Learn AngularJS:

A. To start coding in it, go to app.component.ts file in project,

Your Project Folder > src > app > app.component.ts

(Here you can change your project’s Title text. Changes you make in files, automatically reflect in output browser window opened by command

ng serve --open

.)

B. HTML part of project can be coded in file app.component.html in ‘app’ folder.

(You can leave the toolbar, <style> or CSS code related to it and {{ title }} part of code, to get readymade toolbar and delete rest of the HTML code, to code own project. You can change logo image and menu items in this code, related to project.)

C. In src/styles.css file you can type your CSS code.

D. Follow rest of the instructions at Angular – Create a new project to learn basic coding pattern of AngularJS.

Move AngularJS Project to Live Server:

Run command:

ng build

(It will create ‘dist’ folder in project. Copy inner files of ‘dist’ folder and upload on live server. It will run the project on live website.

All app.component files mixed code move to “main.js” file. So best to create project on local and once ready, then move to live server. Editing can be best done on local files as well, then upload on live server.)

AngularJS support for any further issues or upgradations has been ended on December 31, 2021 however there a lot of other JS frameworks available now like ReactJS, VueJS, etc. Contact for tasks in AngularJS.

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *