What is AngularJS:

AngularJS is a JavaScript framework. It is a library written in JavaScript.

How to setup AngularJS inside your project:

You can install this package either with npm or with bower.

npm

npm install angular

Then add a <script> to your index.html:

< script src ="/node_modules/angular/angular.js"></ script > < script src ="/node_modules/angular/angular-route.js"></ script >

bower

bower install angular

Then add a <script> to your index.html:

< script src ="/bower_components/angular/angular.js"></ script > < script src ="/bower_components/angular/angular-route.js"></ script >

Or CDN

Need to add angularJs library and angularJs route library inside the head tag.

a. https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js

b. https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js If you learn AngularJS, first you will learn the basics of AngularJS: directives, expressions, filters, modules, and controllers.

Create a single page application step by step:

Need a html template.

a. I use a bootstrap html template:

i. https://startbootstrap.com/template-overviews/agency/ Define route.

a. Home, About, services, portfolio, team, clients, contact

b. Add Attributes href=”#!yourRouteName” Divided page content based on route.

a. Example: About route content

i. About.html

ii. About page content display page content. The ng-app directive define the application, the ng-controller directive defines the controller. Write AngularJS code inside a js file. Create a js file app.js

a. Inside this file you define your app.

b. var app = angular.module( “myApp” , [ “ngRoute” ]);

c. Inside this file you define route.

i. Declare route https://www.w3schools.com/angular/angular_routing.asp Create another js file appCtrl.js

a. Inside appCtrl file you declare all controller. You can create multiple file based on controller.

b. Create a controller and create a object: app.controller( "aboutCtrl" , function ($scope) { $scope .aboutInfos =[{ dateTime : 'March 2011' , title : 'An Agency is Born' ,message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!' ,imageUrl: 'about/1.jpg' },{dateTime: '2009-2011', title: 'Our Humble Beginnings' ,message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!' ,imageUrl: 'about/2.jpg' } ]; }); Add attribute index.html page Inside html tag ng-app=”myApp” You show every page data base on controller.

a. Example: about.html

b. About page Controller: aboutCtrl You already know we have a about.html page. I use aboutCtrl inside about.html page. The controller attribute use the ng-controller directive and use it to top of the page.

Display data:

Display data using about.html page. I used ng-repeat directive.

< ul class= "timeline" > < li ng-repeat= "aboutInfo in aboutInfos" ng-class-even= "'timeline-inverted'" > < div class= "timeline-image" > < img class= "img-circle img-responsive" src= "img/{{aboutInfo.imageUrl}}" alt= "" > </ div > < div class= "timeline-panel" > < div class= "timeline-heading" > < h4 >{{aboutInfo.dateTime}}</ h4 > < h4 class= "subheading" >{{title}}</ h4 > </ div > < div class= "timeline-body" > < p class= "text-muted" >{{aboutInfo.message}}</ p > </ div > </ div > </ li > < li class= "timeline-inverted" > < div class= "timeline-image" > < h4 >Be Part < br >Of Our < br >Story!</ h4 > </ div > </ li > </ ul >

If you want to learn AngularJS the following links are usefull:

https://www.w3schools.com/angular/

https://docs.angularjs.org/api/

I have developed a single page application demo project using php and angularJs. It can be found in the link below:

https://drive.google.com/file/d/0B9-gYLBrBvAyNms1Z3J1dno0eG8/view?usp=sharing

Contributor: Mamun Or Rashid, Nascenia