What is AngularJS?

  • AngularJS is an open-source javascript framework.
  • AngularJS is used to extend HTML with new attributes.
  • AngularJS is most suitable for creating one-page web applications.

Before using AngularJS, You should already have basic understanding of: –

  • HTML
  • CSS
  • Javascript

MVC Architecture: –

  • AngularJS follows the MVC Architecture.
  • MVC stands for Model View Controller.
  • Nowadays, MVC is the most common designing patterns used by developers for web applications.
Let’s have a brief look at MVC: –
  • Model – Data is generally called as Model. It deals with users data and databases.
  • View – It explains how data or model will be displayed. It deals with the templating part of the web application.
  • Controller – It binds data with the Model or View. It controls and interacts with data and gives functionality to view.

Reasons to use AngularJS: –

  • AngularJS supports easy HTML Dom Manipulation.
  • AngularJS is used to create dynamic content.
  • AngularJS works faster because it works with ajax and load only the content needed.

Core Features Of AngularJS: –

  • Directives – Directives are basically a command to tell the angular to do a job. It starts with ng- and is added to the HTML tags.
    • Some of the common directives are: –
      • ng-app: It tells the angular library to load.
      • ng-model: It binds with input field such as input, select and textarea etc., and defines the model that uses the variable to store these fields value.
      • ng-bind: It tells angular to change the content of HTML element with the value of the expression. It also updates the content when the value of the expression changes.
    • For more directives, check out this link: – https://docs.angularjs.org/api/ng/directive
  • Data Binding – AngularJS helps Data or model to directly tied up with the expression.
  • Filters – AngularJS has a filtering language so that data can be organized in a proper way.
  • Modules – AngularJS breaks codes and functionality into different parts called modules. It helps to manage and use codes in an efficient manner.
  • Routes – It helps to locate data available at different locations of the application.
  • Controller – Controller helps to control data for the different view.

Including AngularJS library file in the application: –

Including AngularJS is as simple as including another javascript library in the project.

  • Go to  http://angularjs.org website.
  • Click on Download buttons and select different types of AngularJS library option available in the pop-up generated.
  • Now, download the selected library files in the JS folder of your application.
  • Include the downloaded library files in the main HTML page under head tag as, 
    <script src="/path to JS folder/angular.min.js"></script>

Important:

Usually we include Javascript file at the bottom of our page but, in case of AngularJS, the AngularJS library should be included at the begining of the page under <head> tag.

The reason behind doing so is that AngularJS came into action immediately after the HTML DOM loads. So, including at top we allow angular to execute its task at high priority.

OR

You can simply add CDN link for AngularJS library in HTML file head section as,

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js"></script>

Installation Guide For Angular 4: –

Prerequisites for the installation process –

  • Node.js
    OR
  • Python

Installation Through Node.js: –

  1. Go to https://nodejs.org/en/ and download the current version.
  2. Install node.js .
  3. Next, we have to set up angular by using Angular CLI (Command Line Interface).
    Angular CLI is used to include all the dependency libraries in our project.
  4. Open Command Prompt and type – 
    npm install -g @angular/cli

    This line means globally install the node package manager of Angular CLI.

  5. As soon as you strike enter, Angular will start downloading and will be automatically installed.

Setting Up An Angular.js Project: –

  1. Create a folder named “myproject” on desktop.
  2. Open Command Prompt.
    Now, you have to change your directory to Desktop by typing – 

    cd desktop

    As you are now on desktop, in order to access the folder, type – 

    cd myproject

  3. Now you have to type – 
    ng new myapp

    This line means that set up a new angular.js project named myapp in myproject folder and will install all the necessary packages after execution.

  4. After the project myapp is successfully created, enter it by changing the directory through the line – 
    cd myapp

  5. Ultimately type – 
    ng serve

    in order to initiate the angular project.

  6. To access this project, simply open your browser and type localhost:4200
    This is the default port where all the angular.js application runs.

Conclusion:

Hope you got the concept of AngularJS and also included its library file in your application. Keep in touch with us and keep reading our blog for more knowledge in AngularJS. Don’t forget to share your feedback with us from space given below.

Related Posts: