Introduction to AngularJS for Beginners.
By: Roubeen Chaudhry
What is AngularJS?
AngularJS is a structural framework for dynamic web applications. AngularJS is a framework of JavaScript. AngularJS extends HTML attributes with Directives, and binds data to HTML Expressions. AngularJS is based on the MVC Model which JavaScript is an object-oriented programming language. AngularJS is what HTML would have been if HTML was designed for web applications. AngularJS contains a collection of libraries which have functions that are quite useful when you are designing web applications. Your AngularJS code will call into these libraries when it needs them like jQuery. It also has some frameworks which is an implementation of web applications where if you’re missing any details the code will help you to solve those missing details. The code you write will call into this collection of frameworks to find the correct framework to solve the puzzle.
What are the benefits of using AngularJS?
AngularJS brings quite a few benefits to your web applications. It’s like another approach to minimize the mismatches that occur between document centric HTML and what an application needs by creating new HTML constructs. It helps teach the browser new constructs through what are called Directives.
Examples of these directives include:
· Data Binding
· Support for forms and form validation
· Grouping of HTML into reusable components
· Attaching new behavior to DOM elements, such as DOM event handling
· DOM control structures for repeating, showing, and hiding DOM fragments.
AngularJS has quite a few extra benefits too like reusable code, faster development process, readable and testable code, more lightweight web applications, efficient problem-solving libraries and patterns. It is a better option to JavaScript even though the framework of AngularJS is from JavaScript. Reason it is a better option than JavaScript is because of quite a few reasons some of the reasons are the syntax difference between the two languages. JavaScript syntax is harder for new developers to learn compared to AngularJS and its syntax. JavaScript also does not support the use of filters whereas AngularJS does support the use of filters. JavaScript and its concept are built upon the principles of dynamic typing whereas AngularJS is an application framework that is based on the MVC architecture. JavaScript does not support dependency injection whereas AngularJS supports both dependency injection and data binding. The conclusion here is that building modern web applications can be accomplished with both JavaScript and AngularJS. But the libraries and frameworks along with the more modernized technologies included within AngularJS are just more user friendly for new developers or for developers who are trying to learn the JavaScript framework.
Disadvantages of using AngularJS in Web Application Projects
While AngularJS does provide us with some very useful tools like libraries, frameworks, dependencies, etc. to use within our web application projects, it also does come with some disadvantages:
· Less Secure: AngularJS doesn’t provide server authorization or authentication meaning it does not grant permission for data access and it does not validate a user by validating their credentials.
· Totally Dependent on JavaScript: AngularJS is a JavaScript framework, so it is fully dependent on JavaScript.
· Memory Leak Issues: Since AngularJS is a JavaScript framework, JavaScript does have memory leak problems. By memory leak we mean the web application is not getting the required memory because it can’t return to the pool of free memory.
· Not Supported Everywhere: AngularJS also has some support issues, so it is not supported everywhere. For example, Internet Explorer 8.0 does not support AngularJS.
Steps to install AngularJS.
The steps to install AngularJS are a little intermediate level. The steps to install and setup the AngularJS Development environment are:
Step 1: Install Node.JS LTS latest version from https://node.js.org/en/download based on your Operating System and if it is 32-Bit or 64-Bit.
Once you finish installing the Node.JS, verify that you have the correct versions by running the following commands: node — version to check your version of Node and npm — version to check your version of NPM.
Step 2: Installing the Angular CLI using NPM.
The Angular CLI can be used to create projects or generate applications and library code and perform a variety of tasks such as deployment and building.
To install the CLI run the following command: npm install -g @angular/cli
Step 3: Create your Angular workspace.
In order to begin building and deploying Angular web applications you first need to create a workspace to create a workspace and initial starting app run the following command in the CLI:
ng new my-app
This command will prompt you to go ahead and enter information about the workspace. Just go ahead and accept the default values that it provides by pressing the enter/return key. The Angular CLI will begin installing the necessary Angular npm packages, frameworks, libraries, and other dependencies. This process can take a few minutes depending on your machine (In my case my installation took 8 minutes).
To view more information about the files generated when you create a new workspace, visit the Workspace and Project Structure information on the AngularJS website.
Step 4: Running the Application with Angular CLI
The Angular CLI provides you with a server to build, develop, implement, and run your web applications locally. In order to run the web application that you develop, you got to navigate to your working directory in the Angular CLI by using the following command: cd my-app
After navigating to the directory you run ng serve — open to run the web application.
The ng serve starts the server and watches your files and automatically updates the browser as you change your code real time and — open automatically opens your browser. Once you run this command, the browser will open up to localhost:4200 and it will display the AngularJS Resources screen which shows Documentations, Angular Blog Link, Learning Angular, and next steps like adding components, Angular Material, Adding Dependencies, and more. Now you have learned how to download and install AngularJS and run an application through the AngularJS CLI Server.
Conclusion
In conclusion to this ‘rant’ about AngularJS, AngularJS simplifies the application development by presenting a higher level of abstraction to the developer. Like any sort of abstraction, it will obviously come at the cost of flexibility. Not every web application is the perfect fit for using AngularJS. AngularJS was built with the CRUD (Create, Read, Update, and Delete) application in mind but luckily CRUD applications are what the majority of todays modern web applications implement. Games and GUI editors are examples of web applications with intensive DOM and AJAX manipulations. These kinds of apps are different from CRUD web applications and are probably not a good fit to use AngularJS. In these cases, it’s better to use a lower level library abstraction like jQuery. AngularJS is also used in modern CRUD web application development stacks like the MEAN (MongoDB, ExpressJS, AngularJS, and NodeJS) stack.
More Information about AngularJS and its CLI Commands
For more information about the concepts and terminology of AngularJS and its single page application design principles read the AngularJS Concepts.
For a tutorial to work through to help familiarize yourself with the application development process while using AngularJS, work through the Tour of Heroes tutorial which is a complete hands on exercise on the official AngularJS Website which helps familiarize the learner to the app development process using the Angular CLI and it walks through some of the important libraries and frameworks and subsystems that are included in AngularJS.
For all the commands in the Angular CLI and to help familiarize yourself with the Angular CLI, visit the Angular CLI Documentation. In addition to learning the CLI commands and how to use it, try challenging yourself by using the CLI to generate actual code for components and services on your web application and use it to build, develop, implement, test, and deploy your web application.
References
What is AngularJS and its Documentation
Differences between using JavaScript and AngularJS
Great benefits of AngularJS Development
8 Benefits of Angular in your Project
TutorialsPoint AngularJS Learning Tutorials
