Geekly Articles each Day
📜 ⬆️ ⬇️

AngularJs, a short tutorial on creating PhoneCat Application

image

This article will be useful to those who have not yet encountered the development of AngularJs and want to learn the basic principles of the framework in a short time. If you are not in a hurry, the Google developers have long taken care of you and have written a wonderful tutorial .

In order for you to immediately see what we are going to create, I will leave this demo here .

So, let's begin.
')
Since we will work with ajax requests, do not forget that the project should be placed on a local server. Create index.html and write basic markup, which will become common for all pages of our application. I will not describe the connection of all libraries (after all, this is clear to everyone), but I will simply list them:

- angular;
- angular-route;

In the end, you should get something like:

<html lang="en" ng-app="phonecatApp"> <head> <meta charset="utf-8"> <!-- Template Title --> <title>PhoneCat App</title> <!-- Custom stylesheet --> <link href="style.css" rel="stylesheet"> </head> <body ng-controller="PhoneListCtrl"> <!-- ====== Menu Section ====== --> <section id="menu"> <div class="navbar" role="navigation"> <ul class="nav navbar-nav navbar-right"> <li><a href="#/home">Home</a></li> <li><a href="#/about">Description</a></li> <li><a href="#/contact">Contact</a></li> </ul> </div> </section> <!-- ====== End Menu Section ====== --> <!-- ====== Ng-veiw Section ====== --> <section ng-view id="search"></section> <!-- ====== End Ng-veiw Section ====== --> <!-- Angular JS --> <script src="libs/angular.min.js"></script> <script src="libs/angular-route.min.js"></script> <!-- Custom JS --> <script src="js/controllers.js"></script> <script src="js/filters.js"></script> <script src="js/main.js"></script> </body> </html>

In the code above, you might encounter attributes unknown to you, such as ng-app , ng-controller , ng-view . These are all AngularJs directives, each of them has its own characteristics. So, for example, the ng-app tells the Angular the root element of our application, and the ng-controller assigns the behavior of the scope. The ng-view directive enables the display of the template at the current address. Let's create the templates we need: home.html, about.html, contact.html, phone-detail.html.

Now we need to somehow link these pages with index.html, here begins the magic of AngularJs. Open the file controllers.js and write the following in it:

 var phonecatApp= angular.module('phonecatApp', ['ngRoute','ngAnimate']); phonecatApp.config(['$routeProvider',function($routeProvider){ $routeProvider .when('/',{ templateUrl:"template/home.html", controller:"PhoneListCtrl" }) .when('/about',{ templateUrl:"template/about.html", controller:"AboutCtrl" }) .when('/contact',{ templateUrl:"template/contact.html", controller:"ContactCtrl" }) .when('/phones/:phoneId',{ templateUrl:"template/phone-detail.html", controller:"PhoneDetailCtrl" }) .otherwise({ redirectTo: '/' }); }]); phonecatApp.controller('PhoneListCtrl',['$scope','$http','$location', function($scope,$http, $location){ }]); phonecatApp.controller('AboutCtrl',['$scope','$http','$location', function($scope,$http, $location){ }]); phonecatApp.controller('ContactCtrl',['$scope','$http','$location', function($scope,$http, $location){ }]); phonecatApp.controller('PhoneDetailCtrl',['$scope','$http','$location','$routeParams', function($scope,$http, $location, $routeParams){ }]);

Let's break down line by line what we did. First of all, we announced a new angular module called “phonecatApp” and prescribed its dependencies. Next, we set up the config for our application, where we specify using $ routeProvider routes (links) to our templates and the corresponding controllers for each of them. Then we initialize the above controllers. As a result of our actions, navigation has earned us on the page.

Go ahead, we need to create a file phones.json, which wakes contain an array with brief information about the phones. Since this is a very time consuming task, all files with the corresponding arrays and images can be downloaded from this repository (phones and img folders), which are provided by the creators of the Google textbook about AngularJs.

And now it is time to edit home.html. This template should contain an input form (to implement a search by page elements) and a cycle (implemented using ng-repeat), which will display information about the phones from the phones.json file.

 <div class="search-input"> <input type="text" placeholder="Search" ng-model="query"> </div> <div class="phone-wrap animation" ng-repeat="phone in phones | filter: query"> <div class="phone_img-wrap"> <img ng-src="{{phone.imageUrl}}" alt="{{phone.name}}"> </div> <h3>{{phone.name}}</h3> <div class="phone_text-wrap"> <p class="phone-text">{{phone.snippet}}</p> </div> <a class="btn-see" href="#/phones/{{phone.id}}"> <p>VIEW</p> </a> </div>

The ng-model directive in real time assigns the characters of the query variable that we input, with which the built-in out-of-the-box filter in AngularJs will match the elements displayed by the loop and remove all unnecessary (ng-repeat = "phone in phones | filter: query").

But in order for all this to work, we need to register this http request in the 'PhoneListCtrl' controller:

 $http.get('phones/phones.json').success(function(data,status,headers,config) { $scope.phones=data; });

Our application is almost ready, it remains only to create individual pages of each phone. To do this, let's write the following htttp request in the 'PhoneDetailCtrl' controller:

 $http.get('phones/'+$scope.phoneId+'.json').success(function(data){ $scope.phone=data; })

For complete readiness, our application lacks only any information on a unique phone page, which is pretty easy to fix. Let's display on it the name of the selected position:

 <h1>{{phone.name}}</h1>


That's all! You and I have just created your first single page application on AngularJs.

Source: https://habr.com/ru/post/271765/

More articles:


All Articles