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.
MVC
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.
Model
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.
Seen
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.
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
index.html
<!doctype html>
<html lang="fr" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Apprendre AngularJS</title>
</head>
<body>
<div ng-controller="MainCtrl">
<h1>{{title}}</h1>
<input type="text" ng-model="name" placeholder="Votre nom">
<p>Hello {{name}}</p>
<ul>
<li ng-repeat="user in users">
{{user.name}} – {{user.city}}
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>
app.js
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', ['$scope', function ($scope) {
$scope.title = "Learn AngularJS"
$scope.name = "";
$scope.users = [{ name: 'Seifeddine Selmi', city: 'Montréal' }];
}]);
$scope
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).
ng-app
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.
ng-controller
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.
ng-model
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 $scope.name 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;
}
Guidelines
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>
<ul>
<li ng-repeat="name in names">{{ name }}</li>
</ul>
</div>
</html>
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.
Services
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.
Service
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{
serviceExample.service1();
});
Factory
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(){
return{
service1: function(){...},
service2: function(){...},
}
});
app.controller("factoryCtrl", function($scope, factoryExample {
factoryExample.service1();
});
Filters
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>
<ul>
<!-- Order users by name and display names in uppercase -->
<li ng-repeat="user in users | orderBy:'name'">
{{ user.name | uppercase }}
</li>
</ul>
<input type="text" ng-model="nameText" placeholder="Votre nom">
<!-- Order users by name and filter them by entered value -->
<ul>
<li ng-repeat="user in users| filter:nameText |orderBy:'name'">
{{user.name}} – {{user.city}}
</li>
</ul>
</div>
</html>
Routes
Order users by name and filter them by entered value
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function ($routeProvider) {
$routeProvider
.when('/',{
controller: 'Mainctrl',
templateUrl:'View1.html'
})
.when('/view2', {
controller: 'Mainctrl',
templateUrl:'View2.html'
})
.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.