Detailed explanation of the use of angular's routing ui-router
This time I will bring you a detailed explanation of the use of angular routing ui-router. What are the precautions when using angular routing ui-router. The following is a practical case, let's take a look.
UI-router
Installation: npm install --save angular-ui-router
Configure routing status
angular.module("myApp").config(function($stateProvider，$urlRouterProvider){
$stateProvider
.state({
name:'main',
url:'./',
template('<div>this is a main</div>')
})
.state({
name:'home',
url:'/home',
template:'<p>this is home</p>'
})
.state({
name:'about',
url:'/about',
template:'<h3>Welcome hello</h3>'
}) //设置默认跳转
$urlRouterProvider.otherwise('/')
}
)Multiple modules, multiple routes, multiple Controller Processing method
Introduction module
<script src="./angularjs/angular.js"></script> <script src="./js/ctrl1.js"></script> <script src="./js/ctrl2.js"></script> <script src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>
Module dependency
var app = angular.module('myApp', ['ui.router', 'myApp.ctrl1', 'myApp.ctrl2']);Routing configuration
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider.state({
name: 'main',
url: '/my',
templateUrl: './test.html',
controller: 'ctrl1'
}) /*
1.设置一个为空匹配 url:'/my'
2. 在增加一个 路由名字前半部份相同但是后面不同的名字
* */
.state({
name:'my.page',
url:'/:page'
})
.state({
name: 'home',
url: '/home',
templateUrl: './angularjs/app.html',
controller: 'ctrl2'
})
.state({
name: 'about',
url: '/about',
template: '<div>about</div>',
controller: 'ctrl3'
})
$urlRouterProvider.otherwise('/')
})$stateParams Get parameters.
Inject in the controller. Can get the parameters following the address bar.
-<ui-view ui-sref=' '></ui-view>
ui-sref can be used to pass parameters
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!
Recommended reading:
Detailed explanation of JavaScript timer
Events and callback functions of JavaScript running mechanism
Detailed explanation of the multi-threading mechanism of the browser
The use of single-threaded JS and multi-threaded browsers
The above is the detailed content of Detailed explanation of the use of angular's routing ui-router. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Detailed explanation of the mode function in C++
Nov 18, 2023 pm 03:08 PM
Detailed explanation of the mode function in C++ In statistics, the mode refers to the value that appears most frequently in a set of data. In C++ language, we can find the mode in any set of data by writing a mode function. The mode function can be implemented in many different ways, two of the commonly used methods will be introduced in detail below. The first method is to use a hash table to count the number of occurrences of each number. First, we need to define a hash table with each number as the key and the number of occurrences as the value. Then, for a given data set, we run
How to install Angular on Ubuntu 24.04
Mar 23, 2024 pm 12:20 PM
Angular.js is a freely accessible JavaScript platform for creating dynamic applications. It allows you to express various aspects of your application quickly and clearly by extending the syntax of HTML as a template language. Angular.js provides a range of tools to help you write, update and test your code. Additionally, it provides many features such as routing and form management. This guide will discuss how to install Angular on Ubuntu24. First, you need to install Node.js. Node.js is a JavaScript running environment based on the ChromeV8 engine that allows you to run JavaScript code on the server side. To be in Ub
Detailed explanation of obtaining administrator rights in Win11
Mar 08, 2024 pm 03:06 PM
Windows operating system is one of the most popular operating systems in the world, and its new version Win11 has attracted much attention. In the Win11 system, obtaining administrator rights is an important operation. Administrator rights allow users to perform more operations and settings on the system. This article will introduce in detail how to obtain administrator permissions in Win11 system and how to effectively manage permissions. In the Win11 system, administrator rights are divided into two types: local administrator and domain administrator. A local administrator has full administrative rights to the local computer
Detailed explanation of division operation in Oracle SQL
Mar 10, 2024 am 09:51 AM
Detailed explanation of division operation in OracleSQL In OracleSQL, division operation is a common and important mathematical operation, used to calculate the result of dividing two numbers. Division is often used in database queries, so understanding the division operation and its usage in OracleSQL is one of the essential skills for database developers. This article will discuss the relevant knowledge of division operations in OracleSQL in detail and provide specific code examples for readers' reference. 1. Division operation in OracleSQL
Detailed explanation of remainder function in C++
Nov 18, 2023 pm 02:41 PM
Detailed explanation of the remainder function in C++ In C++, the remainder operator (%) is used to calculate the remainder of the division of two numbers. It is a binary operator whose operands can be any integer type (including char, short, int, long, etc.) or a floating-point number type (such as float, double). The remainder operator returns a result with the same sign as the dividend. For example, for the remainder operation of integers, we can use the following code to implement: inta=10;intb=3;
Token-based authentication with Angular and Node
Sep 01, 2023 pm 02:01 PM
Authentication is one of the most important parts of any web application. This tutorial discusses token-based authentication systems and how they differ from traditional login systems. By the end of this tutorial, you will see a fully working demo written in Angular and Node.js. Traditional Authentication Systems Before moving on to token-based authentication systems, let’s take a look at traditional authentication systems. The user provides their username and password in the login form and clicks Login. After making the request, authenticate the user on the backend by querying the database. If the request is valid, a session is created using the user information obtained from the database, and the session information is returned in the response header so that the session ID is stored in the browser. Provides access to applications subject to
Angular components and their display properties: understanding non-block default values
Mar 15, 2024 pm 04:51 PM
The default display behavior for components in the Angular framework is not for block-level elements. This design choice promotes encapsulation of component styles and encourages developers to consciously define how each component is displayed. By explicitly setting the CSS property display, the display of Angular components can be fully controlled to achieve the desired layout and responsiveness.
Detailed explanation of the linux system call system() function
Feb 22, 2024 pm 08:21 PM
Detailed explanation of Linux system call system() function System call is a very important part of the Linux operating system. It provides a way to interact with the system kernel. Among them, the system() function is one of the commonly used system call functions. This article will introduce the use of the system() function in detail and provide corresponding code examples. Basic Concepts of System Calls System calls are a way for user programs to interact with the operating system kernel. User programs request the operating system by calling system call functions
