Author avatar

Gaurav Bhavsar

Getting Started with AngularJS

Gaurav Bhavsar

  • Jan 10, 2019
  • 6 Min read
  • 20,428 Views
  • Jan 10, 2019
  • 6 Min read
  • 20,428 Views
Front-End JavaScript
Introduction

Introduction

In this article I am going to introduce step-by-step the basics of using AngularJS. Lets start with the basic file structure in AngularJS.

  • app.js
  • controller.js
  • index.html

Quick note

Here, app.js is a JavaScript file in which I created an instance of an Angular module. The controller.js Javascript file has an Angular controller that is registered with the app.js Angular module and contains business logic (programming between end UI and database). index.html is the view page where I place my html code and loaded app.js and then controller.js script files.

app.js

Let's implement app.js first.

1var app = angular.module('myApp',[]);

The angular.module is a global place for creating, registering, and retrieving Angular modules. Modules are containers for the various parts of an application, such as controllers and directives.

Module

1// Create a new module
2var myModule = angular.module('myModule', []);
3
4// Register a new controller
5myModule.controller('myController',['$scope',function($scope){}])
6
7// Configure existing services inside initialization blocks.
8myModule.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
9
10}]);

The angular.module is the entry point of Angular applications. Each application has just one module that gets the rootElement <html> or <body> tag.

We created an angular.module called myApp in app.js file.

controller.js

1app.controller('myCtrl',['$scope', function($scope) {
2  $scope.name = 'Angular ';
3}]);

In controller.js, we register our Controller with the angular.module (i.e app) initialized in app.js

app.controller has two parameters: the name of our controller and the required angular services/dependencies. For example, we loaded the $scope service and created an instance in the function.

$scope

Scope is a pre-defined object in Angular which uses $watch to watch the status of model. It's importnant to know that $scope has hierarchical structure, so scope inherits from its parent scope and is capable of creating child scopes.

1// parent scope
2var parent = $rootScope();
3
4// child scope
5var child = parent.$new();

Using $scope (and its built-in $watch command), we can bind html and js, causing changes in html to translate to changes in our js, and vice versa. In our example, we created a scope object called $scope.name and finished binding in view(html page).

index.html

1<html ng-app="myApp">
2
3    <head>
4        <title>AngularJS App</title>
5        <script data-require="[email protected]" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
6        <script src="app.js"></script>
7        <script src="controller.js"></script>
8    </head>
9
10    <body ng-controller="myCtrl">
11
12        <input ng-model="name" />
13        <p>Hello {{name}} !</p>
14
15    </body>
16
17</html>
html

When index.html is loaded, it injects angular.js, app.js, and controller.js into the browser per our defined script from index.html. As a result, angular.module is placed at rootElement, and myApp and MyCtrl become available for index.html.

1<html ng-app="myApp">
html

Directives

Angular has Directive components such as ngBind, ngValue, nclass and many more. In this article I explained just some of the ngApp and ngController directives. I will talk about other directives in my next tutorial.

ng-app

ngApp is Angular's pre-defined directive, meaning that Angular will default to ngApp if no other directive is present.

If ngApp is not placed in rootElement, then the controller will fail to load. This failure arises because controller(myCtrl) is registered with ngApp("myApp"), the unspecified default option.

ng-controller

1 <body ng-controller="myCtrl">
html

The ngController directive binds the controller class to the view. This is a key aspect of how Angular supports the principles behind the Model-View-Controller (MVC) design pattern.

MVC components in angular

  • Model — Models are data assingned to scope variable for the Document Object Model (DOM), and consumed by API $watch.

  • View — The html template that rendered and bound to the value in DOM.

  • Controller — In this case, the ngController directive specifies a Controller class that contains business logic behind the application's functions.

Data-Binding

1<body ng-controller="myCtrl">
2    <input ng-model="name" />
3    <p>Hello {{name}} !</p>
4</body>
html

{{name}} serves as a variable to store the $scope.name value present in the ngController myCtrl.

ng-model

1<input ng-model="name" />
html

ng-model provides a unique two-way-binding feature; it binds value to input.

Angular Expressions - {{Exp}}

Expressions are used to get or print the values of variables in the view. Direct directives appropriate the scope value for interpolation binding. However functionExpressions fail on this task. For Example:

1// work for
2<p>{{scopeValue}}</p>
3
4// fail for
5<button ng-click="{{functionalExpressions()}}">Click me !</button>
6
7// for directive used directly
8<button ng-click="functionalExpressions()">Click me !</button>
9<input ng-model="name" />
html

Anything written in input tag will be observed by scope API $watch and will display the value of the $scope.name object in paragraph tag.

1<p>Hello {{name}}!</p>
html

Result

Source Code

See plunker for live example.

ScreenShot

description

This is how we implement angular.module, register ngController to the Angular module, and use the scope variable with the controller and the view to bind with AngularJS's ngModel.

I hope you found this article informative! See you soon with my next article on AngularJS.

LEARN MORE