Usage and configuration of route in AngularJs

angular is a single page application framework developed by Google, which is one of the most popular single page application frameworks at present. There are many such as two-way data binding, the application of MVC mode on the back end to the front end, custom instructions, etc.

Since it is a single page application, must be inseparable from the page switch. Let's start with the angular route.

angular implemented the page switch using route.

<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 ES19en-ES20en-ES21en. min. js. Then we have to register with app.

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

Once you have registered, you need to configure 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); 

That's it for configuration. There are 1 view for every state in the configuration, representing 1 page. The page jumps to state, and the corresponding html file is in the corresponding file of templateUrl.

Above is the site to share AngularJs route usage and configuration of knowledge, I hope to help you.