AngularJS – Introduction & Installation
What is AngularJS?
- 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: –
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.
- 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
- Some of the common directives are: –
- 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: –
- 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>
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.
You can simply add CDN link for AngularJS library in HTML file head section as,
Installation Guide For Angular 4: –
Prerequisites for the installation process –
Installation Through Node.js: –
- Go to https://nodejs.org/en/ and download the current version.
- Install node.js .
- 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.
- Open Command Prompt and type –
npm install -g @angular/cli
- As soon as you strike enter, Angular will start downloading and will be automatically installed.
Setting Up An Angular.js Project: –
- Create a folder named “myproject” on desktop.
- Open Command Prompt.
Now, you have to change your directory to Desktop by typing –
- Now you have to type –
ng new myapp
- After the project myapp is successfully created, enter it by changing the directory through the line –
- Ultimately type –
- To access this project, simply open your browser and type localhost:4200
This is the default port where all the angular.js application runs.
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.