Digital Transformation
Red Cross Button
Close this menu


Django, Flask

Wagtail, Django CMS, CKAN



Laravel, Symfony

Magento, Opencart

Wordpress, Drupal, Joomla



React, Angular, Vue




Ionic, Cordova



Swift, Objective C

Digital Transformation

Medical Data Processing

Retail Digitalisation

Programming Workforce

New at Nixa

Because we have fun and learn a lot of stuff, we want to share with you ❤️

Software development

Learn AngularJS

Angular is a client-side MVC framework, developed in JavaScript by Google, it is an Open Source framework that is rapidly gaining popularity. Its purpose is to simplify the javascript syntax, by adding new functionalities to it and thus facilitating the creation of web applications.


AngularJS relies in particular on an MVC framework which stands for Model-View-Controller used in many programming languages to provide an architecture to a web application. This MVC infrastructure is extremely productive and efficient and stands out as the benchmark for new JavaScript frameworks.

Learning AngularJS not only leads to increased productivity, but also easier to write, more expressive code, and less difficulty testing and debugging your application.


The model represents an entity of the application: data processing, interactions with the database. It describes the data manipulated by the application, generally transmitted in JSON.


This is what the user interacts with, it has the function of presenting the results returned by the model and receiving any action from the user. When you use an MVC framework, you use the data from the Model to update your View and display the correct information in your HTML code. These different events are sent to the controller.


The controller supports synchronization event handling to update the view or model and synchronize them. It receives all the events of the view and triggers the actions to be performed.

Start your AngularJS project


<!doctype html>
<html lang="fr" ng-app="myApp">
<meta charset="UTF-8">
<title>Apprendre AngularJS</title>
<div ng-controller="MainCtrl">
<input type="text" ng-model="name" placeholder="Votre nom">
<p>Hello {{name}}</p>
<li ng-repeat="user in users">
{{}} – {{}}
<script src=""></script>
<script src="app.js"></script>


var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', ['$scope', function ($scope) {
$scope.title = "Learn AngularJS"
$ = "";
$scope.users = [{ name: 'Seifeddine Selmi', city: 'Montréal' }];


The scope is a javascript object that makes the link between the controller and the view. The properties that are added to it (variables and functions) are accessible in the view, they are in a way public. But it is also possible to create private variables and functions (not accessible in the view).


The ng-app directive tells AngularJs that it must be active on this section of the page. In our case, it is the whole page since it is located on the <html> tag, but we could very well put it on a <div> for example.


The ng-controller directive describes a controller to talk to the view. This section of the page is managed by the MainCtrl controller. The variables and functions declared in the scope of this controller are accessible just in this area of the html.


Everything between double braces will be interpreted. Controller variables and functions can be used here. If the data changes in the controller, the changes will be sent to the view. It's one-way data binding. In the example above, {{title}} simply displays the contents of $scope.title.


It's two-way data binding. If the data is updated in the controller, the changes will be pushed to the view, and if the data is updated in the view, the changes will be pushed to the controller. In the example above, the user types some text into the input, which updates the controller's $ variable, and the change is instantly returned to the view side in {{name}}.

Declarations of functions and variables in the controller:

//Public (accessible in the controller and in the view)
$scope.maVariable1 ="Ici ma variable est public!";

//Declaration of a public function
$scope.maFonction1 =function () {
return 1;

//Private (accessible only in the controller)
var maVariable2 = "Ici ma variable est privé!";

//A first way to declare a private function
var maFonction2 = function () {
return 2;

//A second way to declare a private function
function maFonction3() {
return 3;


Directives are used when you want to modify or transform the DOM (Document Object Model).

Angular provides a number of directives. Let us recall a few:

ngApp: simply initializes your application.

ngController: directive to attach a controller to the view.

ngModel: directive allowing to bind the input, textarea or select to a property of the current context.

ngInit: directive to initialize a collection.

ngRepeat: directive to repeat elements of a collection multiple times.

<html ng-app="myApp">
<div class="container" ng-init="names=['Selmi','Seifeddine','Nixa','Développement','Web','Montréal']">
<h3>Répéter avec la directive ng-repeat </h3>
<li ng-repeat="name in names">{{ name }}</li>

There are many directives predefined by AngularJS. I invite you to consult the official documentation for more details Directives - AngularJS.

Very often you will need to create your own guidelines.


They are singletons, ie unique instances of objects. The role of a service is to provide a set of tasks necessary for the operation of your application.

Créez vos propres services already provides very useful services like:
$location: interact with your browser's URL.
$route: change views based on URL.
$http: communicate with servers.v

Create your own services

A service is considered as a simple module which is responsible for returning an object. This object will have a set of functions that will be responsible for performing a number of services.

It is therefore sufficient to initialize a new module while specifying whether this module is of type factory, service or provider.


When you use the service, it is an instance of the service that is passed to the controller. You are therefore not responsible for returning a value in your service. You just need to attach your functions and attributes to this.

app.service("serviceExample", function(){
this.service1 = function(){...};
this.service2 = function(){...};

app.controller("serviceCtrl", function($scope, serviceExample{


When you create a factory, you are responsible for returning an object that has a number of utilities that perform your services.

app.factory("factoryExample", function(){
service1: function(){...},
service2: function(){...},

app.controller("factoryCtrl", function($scope, factoryExample {


Filters are, like directives and services, Angular modules. Their role is to transform the data in order to display it in a more elegant way.

These are therefore elements that will enrich your template and whose syntax remains quite simple:

{{expression | filter : parameter 1 : parameter 2 : ...}}

Angular provides, like for directives and services, predefined filters. Here are some examples:

date : this filter is very useful since it allows you to format a date in the correct format (English, French, with the names of months, days...). Here is an example template:

<html ng-app="myApp">
<div ng-controller="MainCtrl">
<!-- This will produce the following result: June 29, 2015 -->
<span>{{'2015-06-29' | date: 'dd mm yyyy'}}</span>
<!-- Order users by name and display names in uppercase -->
<li ng-repeat="user in users | orderBy:'name'">
{{ | uppercase }}
<input type="text" ng-model="nameText" placeholder="Votre nom">
<!-- Order users by name and filter them by entered value -->
<li ng-repeat="user in users| filter:nameText |orderBy:'name'">
{{}} – {{}}


Order users by name and filter them by entered value

var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function ($routeProvider) {
controller: 'Mainctrl',
.when('/view2', {
controller: 'Mainctrl',
.otherwise({ redirectTo:'/' });

ngView: View loaded dynamically in a page:

ngView is a directive that complements the $route service by including the rendered model of the current route in the main layout file (index.html). Requires the ngRoute module.
We add <div ng-view></div> or <ng-view></ng-view> in index.html

Nixa can help you in the development of your applications in AngularJS.

In Montreal, Nixa is the web development company of choice for your projects in Angular, Backbone or Ember.


Contact Us