Different Web pages are set by Ui-router in Angularjs

Source: Internet
Author: User

Controller.js

Angular.module (' myApp ', []) </span>
  run ([' $location ', ' $rootScope ', function ($location, $rootScope) {
    $rootScope. $on (' $stateChangeSuccess ', function (event, tostate, Toparams, FromState, Fromparams) {
      $ Rootscope.title = Tostate.title
    });
  


Router.js

$stateProvider
      . State (' Global.search ', {
        title: ' Here's the title of each page ',
        URL: '/global/search?q& Company&user&region&account_type&call_type&registered ', views
        : {
          ' main ': {
            TEMPLATEURL:HELPER.GETURL (' Global.search '),
            controller: ' Searchctrl ',
          }
        }
      }

Index.html
<!doctype html>
<html lang= "Zh-cmn-hans" ng-app= "myApp" >

<head>
  <meta charset= " UTF-8 ">
  <title ng-bind=" title > This is the default title. </title>
</head>

<body>
  < Div ui-view></div>
</body>

</html>


Bind the title under $rootScope to an HTML page with the ng-bind instruction

Set a property in $stateprovide.state force the title content, which is set to the title property

Run the Run () function under Angualr.module () on the home page to get the title attribute from router, which triggers the $statechangesuccess event whenever a page change jumps

The $statechangesuccess event here can not be replaced with the $routechangesuccess event, if the Ui-router plugin is not used, the code is as follows:


Router.js

. config (function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider. Otherwise ('/home ');
$stateProvider
    . State (' home ', {
        URL: '/home ',
        templateurl: ' views/home.html ',
        data: {pagetitle: ' Home '}

    }
    . State (' about ', {
        URL: '/about ',
        templateurl: ' views/about.html ',
        data: {pagetitle: ' About '}}}
     );

Controller.js

$rootScope. $on ("$routeChangeSuccess", Function (Currentroute, previousroute) {
    $rootScope. PageTitle = $ Route.current.data.pageTitle;
  });


Index.html

<title ng-bind= "<span style=" font-family:arial, Helvetica, Sans-serif; >pageTitle</span> "></title>





Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

Tags Index: