AngularJS

My coding bootcamp journey is coming to an end. This is my last blog as a coding student at Operation Spark. The journey was long, but definitely worth the many late nights. As I said in my last blog, I have begun searching for jobs and some of the front-end frameworks that companies want developers to know is AngularJS. AngularJS was developed in 2009 by Misko Hevery. It was created for building CRUD applications. AngularJS lets you use HTML as the template language and extends the HTML’s syntax to the application components. AngularJS is currently maintained by Google and the latest version is AngularJS 1.7.

Main Features

The main features of AngularJS are:

• AngularJS can create Rich Internet Applications (RIA)
• Allows developers to write JavaScript code in the Model View Controller (MVC) way
• Applications written in AngularJS can be used across multiple platforms
• It is open source, free, and used by thousands of developers world-wide

Angular JS Directives

The AngularJS framework can be put into three categories:

• Ng-app: this directive defines and links the application to HTML
• Ng-model: this directive binds the values of AngularJS application data HTML inputs
• Ng-bind: this directive binds the AngularJS application data to HTML tags

Code Example

In the following code, the ng-init directive initializes the application's data. It is utilized to assign values to the variables. An array of cities is first initialized. JSON syntax is used to define the cities array.

<div ng-app = "" ng-init = "cities = [{locale:'en-US',name:'United States'}, 
   {locale:'South',groupName:'Southern states'}, {locale:'West',groupName:'Western states'}]">
   ...
</div>

In the following code, the ng-model defines the model/variable that will be used in the application. Name is the model defined below.

<div ng-app = "">
  ...
  <p>Enter your Name: <input type = "text" ng-model = "name"></p>
</div>

The ng-repeat directive repeats elements in a collection. In the next example, we iterate over the array of cities.

<div ng-app = "">
   ...
   <p>List of Cities with state flower:</p>

   <ol>
      <li ng-repeat = "cities in united states of america">
         {{ 'City: ' + city.name + ', Flower: ' + city.flower }}
      </li>
   </ol>
</div>

Positives of using AngularJS

• Some positives of using AngularJS are:
• Single Page Applications can be created in a clean, maintainable way
• Allows data binding capability to HTML Components are reusable
• More functionality can be achieved with shorter code
• Code is unit testable
• In AngularJS views are the html pages, and controllers process the JavaScript

Negatives of using AngularJS

AngularJS is a pretty powerful framework, but there are some drawbacks. These include:

• not as secure: Because it is a JavaScript only framework, the application is not safe therefore server side authentication must occur to keep the app secure.
• Not degradable: if the user disables JavaScript, then nothing is visible except for the basic page.

Differences between Modern Angular and AngularJS

AngularJS and modern Angular have different features which make modern Angular more popular. AngularJS uses the MVC architecture while modern angular uses components and directives. AngularJS uses Javascript while modern Angular uses Typescript. AngularJS and modern Angular both use dependency injection (DI), but the method in which they use these is different. In AngularJS DI is injected into link functions, controller functions, and directive definitions. Modern Angular uses a hierarchical DI system that employs declarations, constructor functions, and providers. Modern Angular is more intuitive when it comes to data binding. In AngularJS, a coder has to remember which ng-directive to use for binding a property or event, while modern Angular uses () for event binding and [] for property binding. These are just some of the differences between the two frameworks. Ultimately it is easier and faster to learn AngularJS than Angular because TypeScript must be mastered in order to successfully build applications. I would recommend using Angular for building complex applications and AngularJS for building simple and straightforward applications.

Conclusion

AngularJS looks like an interesting Framework to add to your tool-kit as a web developer. It is easy to learn and understand due to the documentation/ resources available.

Source

TutorialsPoint. Angularjs - overview. Retrieved March 22, 2021, from https://www.tutorialspoint.com/angularjs/angularjs_overview.htm
A, Shanal. Angular vs AngularJS - A Complete Comparison Guide 2019. July 24, 2019. Retrieved March 22, 2021, from https://www.techaheadcorp.com/blog/angular-vs-angularjs/