Create Single Page Application Using AngularJS

7月 11, 2017
admin

Contributor:  Mamun Or RashidNascenia

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

  1. 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
  2. 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:
  1. Need a html template.
    a. I use a bootstrap html template:
    i. https://startbootstrap.com/template-overviews/agency/
  2. Define route.
    a. Home, About, services, portfolio, team, clients, contact
    b. Add Attributes href=”#!yourRouteName”
  3. Divided page content based on route.
    a. Example: About route content
    i. About.html
    ii. About page content display page content.
  4. The ng-app directive define the application, the ng-controller directive defines the controller.
  5. Write AngularJS code inside a js file.
  6. 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
  7. Create another js file appCtrl.js
    a. Inside appCtrl file you declare all controller. You can create multiple file based on controller.
    b. Create 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'} ];
     });
  8. Add attribute index.html page Inside html tag ng-app=”myApp”
  9. You show every page data  base on controller.
    a. Example: about.html
    b. About page Controller: aboutCtrl
  10. 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

No comments

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください