How to use and configure routes in AngularJs_AngularJS

Angular is a single-page application framework developed by Google. It is one of the more mainstream single-page application frameworks now. It has many powerful features, such as two-way data binding, applying the MVC pattern of the back-end to the front-end, and customization Instructions etc.

Since it is a single-page application, page switching is definitely indispensable. Let’s first talk about angular’s ​​routing.

angular uses route when implementing page switching.

<script src="js/plugins/angular/angular.min.js"></script>
<script src="js/plugins/ui-router/angular-ui-router.min.js"></script> 

angular.min.js should be loaded before angular-ui-router.min.js. Then we will register it in the app.

(function () {
angular.module('demo', [
'ui.router', 
])
})(); 

After registration, you need to configure the route

function config($stateProvider, $urlRouterProvider,$httpProvider) {
$urlRouterProvider.otherwise("/home/get");
$stateProvider
.state('login', {
url: "/login",
templateUrl: "../views/login.html",
})
.state('home', {
abstract: true,
url: "/home",
templateUrl: "views/common/content.html",
})
.state('home.get', {
url: "/get",
templateUrl: "views/get.html",
data: { pageTitle: 'Example view' }
})
.state('home.post', {
url: "/post",
templateUrl: "views/post.html",
data: { pageTitle: 'Example view' }
});
}
app = angular.module('demo');
app.config(config); 

The configuration is complete here. Each state in the configuration is a view, which represents a page. State is used for page jumps. The corresponding html file is in the file corresponding to templateUrl.

The above is the knowledge about the usage and configuration of routes in AngularJs shared by the editor. I hope it will be helpful to everyone.