What is ui-router in Angularjs

in #utopian-io • 7 years ago (edited)

AngularJS_logo.svg.fw1.fw.png

Repository

AngularJs GitHub Address:
https://github.com/angular/angular.js

My GitHub Address:
https://github.com/pckurdu

This Project GitHub Address:
https://github.com/pckurdu/what-is-ui-router-in-angularjs

What Will I Learn?

  • You will learn what is ui-router ?
  • You will learn what is the difference between ui.router and ngRouter ?
  • You will learn what is state and what are its features ?
  • You will learn what is ui-sref ?
  • You will learn what is ui-view ?
  • You will learn how to use ui-router in angular application ?

Requirements

Requirement Atom Editor
Requirement Bootstrap CDN
Requirement AngularJs CDN
Requirement Angular UI Router CDN

Difficulty

  • Advanced

Tutorial Contents

Routing is an essential component of Angularjs applications.
Taking full advantage of client-side routing in your angular application allows you to get better structured code and a better experience for your users. Routing is a must for building a single page application.
This tutorial we'll be looking at routing using ui-router.

Why ui-router appeared

Angular router does not use more than one <ng-view>. This is a big problem for creating a single page application. To solve this problem, AngularUI team has created ui-router.

Differences between ngRoute and ui.router

ngRoute;

  • URL provides focused transitions
  • Only one ng-view has to be used
  • It is difficult and problematic to insert a view inside.

ui.router;

  • Provides state-focused transitions
  • Allows the use of multiple ui-views
  • Created to insert views inside.

What is state

state is an AngularJs service and is located under the ui-router module.
Angularjs state corresponds to one direction and orientation in our application in terms of interface.
If your web page is defined in an AngularJS "state" and you invoke this state, your page will be loaded with the properties of the corresponding "state".

state content can be populated with the following properties.

-abstract:

it indicates that the "state" is abstract, so if the end user does not have a web page to display, and if there are child "states", these child "states" can present values defined in their "controller" so you can get the same value from multiple "controllers".

-url:

this type of syntax refers to passing the "trace" parameter and the "query" parameter to this "state" when the corresponding "state" is called.

-template:

The "template" value defines the structure of the page to be displayed when the "state" is called.

-templateUrl:

The address of the web page written to the value of "templateUrl" is the address of the page that will be displayed to the end user when the page "state" is called.

-controller:

It indicates the "controller" to be used when "state" is called / activated. Optional. If there is a "root state" to which the corresponding "state" belongs, you can use "conroller" of this parent "state" and you can not define "state" in "controller".

Let's create our example using ui-router

I will create a single page in my example, which will bring the other pages into this page by routing. I created 3 side pages for this;

-introduction.html
-statistics.html
-languages.html

I will bring these pages to the index.html page with the help of a button.

The index.html is designed as follows.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    (html comment removed:  (load bootstrap) )
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

     (html comment removed:  (load angularjs, ui-router, and our custom script.js file) )
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.min.js"></script>
    <script type="text/javascript" src="script.js">

    </script>
  </head>
  <body ng-app="myApp">
    <nav class="navbar navbar-inverse">
    </nav>
    <div class="container">
      <div class="row">
      <div class="col-md-3">
        
      </div>
      <div class="col-md-9">
        
      </div>
    </div>
    </div>
  </body>
</html>

That's what our HTML page looks like. I'll use Bootstrap to do CSS settings. I split the screen into two parts, the routing buttons will be on the left side of the screen and the pages will be drawn on the right side.

The angular and angular-ui-router cdns have been uploaded to index.html page so that we can now use angularjs and ui-router codes.

I set the script.js file to write angular code. Let's start writing angular codes.
var app=angular.module('myApp',['ui.router']);

To use ui-router we need to add angulara as a module.

app.config(['$stateProvider',function($stateProvider){

$stateProvider
.state('introduction',{
  abstract:false,
  url:'/introduction',
  templateUrl:'introduction.html',
  controller:'introduction'
  })
  }]);

We need to configure the config for the routing process. The State object is located in the $ stateProvider. We can adjust the routing process by making the necessary settings in the state definition.

app.controller('introduction',['$scope',function($scope){
  $scope.nick="pckurdu";
  $scope.title="software developer";
}]);

Yes we can set the controller for the routing page. Here I have defined the nick and title variables to be used on the introduction.html page.

Let's open the introduction.html page.

<div>
  hello i am {{nick}}. I am {{title}}
</div>

I used variables that I defined in this page.

The order is to bring the introduction.html page to the index.html page
<a ui-sref="introduction" class="btn btn-primary">Introduction</a>

I define one a tag on the index.html page. I can link ui-sref with state. When we write in response to state name ui-sref, introduction.html can be done.
state and page and controller to define the state of the page to switch to the state and ui-sref to access this state.

If we could use href instead of ui-sref then the state definition would be as follows.
<a href="#/introduction" class="btn btn-primary">Introduction</a>

Now that we've done the redirect, we can proceed to show the page. We can draw the page oriented with ui-view to index.html page.

<div ui-view>
        </div>

Now our page can perform routing.
In this example I showed the variable definition in the controller. We can define arrays or objects in the Controller and use them on the pages.

Let's improve our example.

Let's define two more pages.
-statistics.html
-languages.html

Let us define the buttons to navigate these pages.
The final version of the index.html body part is below.

<body ng-app="myApp">
    <nav class="navbar navbar-inverse">
    </nav>
    <div class="container">
      <div class="row">
      <div class="col-md-3">
        <a href="#/introduction" class="btn btn-primary">Introduction</a>
        <br/>
        <br/>
        <a ui-sref="statistics" class="btn btn-primary">Statistics</a>
        <br/>
        <br/>
        <a ui-sref="softwareLanguages" class="btn btn-primary">Languages</a>

      </div>
      <div class="col-md-9">
        <div ui-view>
        </div>
      </div>
    </div>
    </div>
  </body>

As you can see there are 3 buttons which we will define 3 buttons but we made one ui-view description. Although ui-view is defined once, all pages can come in this area.
We need to define the state in order for the buttons to navigate.

The final state of app.config () is below

app.config(['$stateProvider',function($stateProvider){

$stateProvider
.state('introduction',{
  abstract:false,
  url:'/introduction',
  templateUrl:'introduction.html',
  controller:'introduction'
  })
.state('statistics',{
    abstract:false,
    url:'/statistics',
    templateUrl:'statistics.html',
    controller:'statistics'
    })
.state('softwareLanguages',{
    abstract:false,
    url:'/software-languages',
    templateUrl:'languages.html',
    controller:'software-languages'
  })
}]);

Let's define the controller's page.

app.controller('statistics',['$scope',function($scope){
  $scope.datas=[
    {post:'each function in underscorejs',view:9},
    {post:'What are Standart Dialogs in Electron ',view:7}
  ];
}]);

app.controller('software-languages',['$scope',function($scope){
  $scope.languages=["Angularjs","Electron","Underscorejs"];
}]);

Now we can design pages.

-statistics.html

<div>
  <p class="alert alert-info">posts and views in steemit</p>
  <table>
    <tr>
      <th>
        posts
      </th>
      <th>
        views
      </th>
    </tr>
    <tr ng-repeat="data in datas">
      <td>
        {{data.post}}
      </td>
      <td>
        {{data.view}}
      </td>
    </tr>
  </table>
</div>

-languages.html

<div>
  <ul class="list-group">
    <li class="list-group-item" ng-repeat="lang in languages" >
      {{lang}}
    </li>
  </ul>
</div>

Conclusion

This is an overview of the great tool that is UI-Router. you can now use ui-router. Thanks for be interested.

Proof of Work Done

https://github.com/pckurdu/what-is-ui-router-in-angularjs

#tutorials #angularjs #ui-router
7 years ago in #utopian-io by
$0.02
  • Past Payouts $0.02
  • - Author $0.02
  • - Curators $0.00
10 votes
Reply 4
Sort:  
  • Trending
    • [-]
     7 years ago  

    Thank you for your contribution.

    • Do not put the code into pictures. The user who will follow his tutorial will not be able to copy the code.

    Need help? Write a ticket on https://support.utopian.io/.
    Chat with us on Discord.
    [utopian-moderator]

    $0.00
      Reply
      [-]
       7 years ago  

      I have edited

      $0.00
        Reply