Intro to Angular

Angular is an opensource Javascript Framework used to build dynamic mobile and desktop web applications using TypeScript/JavaScript and other languages.

History

In 2012 Google introduced a new Javascript Framework called AngularJS, the framework was written using pure Javascript and deloveloped using Model-View-Controller concept. The framework uses HTML as a templating language by extending HTML attributes with directives and linking the data to HTML with expressions, this makes possible quick development of dynamic webapps with source code that is easier to read, understand and maintain.

An example of creating a simple dynamic AngularJS web app :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="">
 
<p>AngularJS web app</p>
<p>Name: <input type="text" ng-model="name" placeholder="What's your name?"></p>
<p ng-bind="name"></p>

</div>

</body>
</html>

AngularJS is also known as Angular 1, in the following years after AngularJS was released google and the opensource community released a second version of AngularJS but they called it Angular 2, the suffix ‘JS’ from AngularJS was removed and this has been so even now with the latest version of angular released being version 7. Angular 2 was a re-design of AngularJS not an increment of it, Angular 2 apps/code is not backward compartible to AngularJS apps/code, but they do share some of the concepts and philosophies except Angular has had more improvements and features added to it, while angularJS has remained at version 1.

Knowledge of NodeJS and Typescript is necessary to develop Angular apps. Javascript can be used instead of Typescript but such a practice is not widely used and sometimes not recommended by some of Angular users/developers.

You can create an Angular app using this few commands below. Please ensure you have Nodjs installed on your system.

Open your CMD/Terminal and type :

1

npm install -g @angular/cli
More about NPM/Node Package Manager, NPM commands.

2

ng new my-dream-app
(a) Select (y) if you want angular to add routing and (N) if not. Introduction to angular Routing.

(b) Select CSS or your preferred CSS preprocessor. Introduction to different types of css preprocessor.

3

cd my-dream-app
List of commonly used CLI/Command Line Interface commands to navigate/create/modify files in an operating system.

4

ng serve
Look for a line similar to this “Angular Live Development Server is listening on localhost:4200”, and open your browser to url localhost/27.0.0.1 include specified port, example: for me I would open the browser and type “localhost:4200” and I will see Angular app webpage. To understand files produced, structure and their purpose look here.

To improve the app further

Add new components.

Add Angular Material.

Add Angular dependancies.

Run and watch tests.

Build for production.

Angular Features and Benefits

  • Create desktop installable app using same code for Linux, windows, Mac.

  • Build native mobile apps using Cordova, Ionic, Nativescript, etc.

  • Develop high perfomance Native like Progressive web apps.

  • More features and benefits here.

Angular introductory resources

Angular home.

Angular documentation.

Angular tutorial.

Angular CLI documentation.

RAW CONTENT URL