Home>

Angularjs is a javascript framework. Through the angularjs library, you can implement the currently popular single-page applications.angularjs also has the characteristics of two-way data binding,More adapted to dynamic page content.

The so-called single-page application is to dynamically load different content on the same page.The "jump" here can be understood as the jump of a partial page.

AngularJS is to load different page content to the specified location by changing the location address.Here is an example of a simple application of angularjs routing to "page forward" a page:

Use app.config to define different location addresses to load different pages,And has an independent controller;

var app=angular.module ("myapp", ["ngroute"]);
  app.config (function ($routeprovider) {
   $routeprovider
    .when ("/", {//"/" means the page initially loads content;
     controller:"homectrl", //controller
     templateurl:"../view/home.html" //Displayed content
    })
    .when ("/reservation", {//means the content loaded when the address ends with reservation;
     controller:"reservationctrl",     templateurl:"../view/reservation.html"
    })
  });

Use ng-view to define where dynamic content loads;

<! Doctype html>
<html lang="en" ng-app="myapp">
  <head>
    <script src="../angular.js"></script>
    <script src="../angular-route.min.js"></script>
    <script src="../js/main.js"></script>
    <script src="../js/homecontroller.js"></script>
    <script src="../js/reservationcontroller.js"></script>
    <meta charset="utf-8">
    <title></title>
  </head>
<body>
<div ng-view>
<!-Here is the dynamic loading area->
</div>
</body>
</html>

As mentioned above,Each page will have a separate controller,When the page is loaded, the functions in the controller are executed;

app.controller ("homectrl", function ($scope, $location) {//control function of the page;
  $scope.gotourl=function (path) {//This method can change the location address;
    $location.path (path);
  }
});

The html page corresponding to the above controller is:

<div>
  <p>Order</p>
</div>
<div>
  <button ng-click="gotourl ("/reservation ")"
  <button ng-click="gotourl ("/showlist ")">see order</button>
</div>

The ng-click method executes a specified function method for the click event execution.

  • Previous Difference between @Autowired and @Resource annotations in Spring Framework
  • Next Detailed performance monitoring of Mysql server using Prometheus and Grafana