Front end Artifact Avalonjs Getting Started (iii)

This chapter describes how to use Avalon to implement the front-end routing feature.

We need to use two Avalon routing companion modules--mmhistory.js and Mmrouter.js. Where Mmhistory is used for historical management, it will hijack all click links on the page, and when these links start with #/ ,#!/ , try to match the routing rules, Prevents page refreshes (by hashing or HTML5 replacestate). Mmrouter is to define the routing rules for us, and the routing rules can specify more finely the matching rules for each parameter (param), and if they do, they execute the corresponding callbacks, and if they do not, go to the error callback.

For a more specific description of the routing system, you can check here.

As an example, we intend to create a site's User Center page, where the left side is the navigation list and the right side is the content display area controlled by the list on the left:

There are several requirements for this User Center page:

⑴ page does not jump, only do local (that is, content area part) refresh;

⑵ can enter the corresponding page through different URLs (that is, the content area displays the corresponding content);

⑶ Browser can remember the status of the URL, such as from the "Account Details" point into the "I want to recharge" page, and then click the Browser Back button, you can correctly return to the "Account Details" page.

Because it is not the Stone age, naturally will not choose the IFRAME this high-friction, unfriendly elements to structure the page (and the IFRAME can not achieve the next two requirements AH). Then we will soon associate Ajax technology, the idea is very essential, but the simple Ajax can not achieve our requirements, so we need to introduce the first mentioned two Avalon routing module.

We can first write a simple page prototype:

Index.html:

<! DOCTYPE html>
User.js:
Require.config ({    baseUrl: ' js/lib/',     paths:{           Avalon: ' Avalon ',        domready: ' Domready ',        Mmhistory: ' Mmhistory ',        mmrouter: ' Mmrouter ',        jquery: ' JQ '    },    shim:{        Avalon: {exports: " Avalon "},        mmhistory:{deps: [' Avalon ']},        mmrouter:{deps: [' Avalon ']}}}    ); Require ([' Avalon '," domready! "], function () {    var vm = avalon.define ({        $id:" User ",        username:conf.username    });    Avalon.scan ();});
USER.CSS:
Body,html{padding:0;margin:0;background: #EEE;}. Ms-controller{visibility:hidden;} Header{height:50px;background:white;} header>span{display:block;padding:16px;} nav{position:absolute;left:0;margin-top:50px;width:200px;} nav>ul>li{margin-top:12px;} Nav>ul>li>a{text-decoration:none;color:blue;} nav>ul>li>a:hover{color:red;} Article{padding:15px;margin-left:200px;min-height:600px;background:white;}
The results of the operation are as follows:
Then we want to create a new three pages--mine.html, detail.html and recharge.html, respectively, corresponding to the "My Home", "Account Details" and "I want to recharge" the right side of the content, we have to write something in the meaning of the content can be, Like mine.html I wrote a sentence:
We then introduce mine.html into the index.html by default, where we use the ms-include-src interface of Avalon to modify the next index.html:
<nav>    <ul>        <li><a href= "#!/index" > My home </a></li>        <li><a href= "#!/detail" > Account Details </a></li>        <li><a href= "#!/recharge" > I want to recharge </a></li >    </ul></nav><article ms-include-src= "Pageurl" > <!--use the MS-INCLUDE-SRC interface here, It introduces the file corresponding to the Pageurl property--></article>
Then modify the parts of the user.js:
Require ([' Avalon ', ' domready! '], function () {    var vm = avalon.define ({        $id: "User",        Username: Conf.username,        pageurl: "mine.html"  //default is mine.html    });    Avalon.scan ();});
Run as follows:
Then it's time for Mmhistory.js and Mmrouter.js to play their part, and we'll modify some of the code for User.js:
Require ([' mmhistory ', ' mmrouter ', ' domready! '], function () {    var vm = avalon.define ({        $id: "User",        Username:conf.username,        pageurl: "mine.html"  //default is mine.html    });    function callback () {        if (this.path=== "/index") {            vm.pageurl= "mine.html";        } else {            var path_tail = this.path.replace (/\//, "");            Vm.pageurl = Path_tail + ". html";  Dynamically modify Pageurl property value        }    }    avalon.router.get ("/*path", callback);//hijack URL hash and trigger callback    Avalon.history.start (); History Stack Management    Avalon.scan ();});
Note that since we have defined mmhistory.js and mmrouter.js in Require.config's shim to be dependent on Avalon, there is no need to introduce Avalon modules. Requirejs will load the Avalon first before executing the code snippet.
We performed routing and history management through these two lines of code:
    Avalon.router.get ("/*path", callback); Hijack URL hash and trigger callback    Avalon.history.start ();//History Stack Management
Where the first parameter of Router.get () represents a route matching rule, such as "/*path" here means matching all paths, matching to trigger callback callback function.
More matching rules We can view the comment information directly in the Mmrouter.js:
Router.get () generates a This.path property for callback call before triggering callback (you can also define a parameter for the callback function with the default value equalto path), whose value is the path currently matched to. For example, when the URL suffix becomes #!/recharge, the This.path value is the matching "/recharge". Having learned this, the callback function is well understood:
    function callback () {        if (this.path=== "/index") {            vm.pageurl= "mine.html";//if the URL suffix becomes "#!/index", Pageurl is " Mine.html "        }else {            var path_tail = this.path.replace (/\//," "); Remove the This.path value of the first slash            Vm.pageurl = Path_tail + ". html";  Dynamically modify the Pageurl property value        }    }
The results of this operation are as follows:
We have achieved our needs since then. But that's not perfect--how do you handle each page's style?
We can write <style> tag directly on the page, or directly write a <link> to introduce external style files, but the former is not good maintenance, the latter is not inserted into the head of the less standard. So can we also use REQUIREJS Modular dynamic introduction of style files? The answer is yes, but with the aid of its component css.js.
Take "Account Details" (detail.html) as an example, we create a detail.css file, which is set. detail{color:red;}.
First make sure that the component is added to the paths in Require.config:
    paths:{   //The address configured here is relative to the above BaseURL        Avalon: ' Avalon ',        domready: ' Domready ',        mmhistory: ' Mmhistory ' ,        mmrouter: ' Mmrouter ',        css: ' CSS '  //plus css.js    }
Then modify the contents of the detail.html page:
<section ms-controller= "detail" class= "detail Ms-controller" >    yo yo, here is the details page, {{username.name}} Hello </ Section><script>    require ([' Avalon ', ' CSS!.. /.. /css/detail.css '], function () {    //The following is actually recommended as a module detail.js and then introduced by require        Avalon.define ({            $id: "Detail",            username:conf.username        });        Avalon.scan ();    }) </script>
"Css!/xxx.css" is the css.js of the writing, pay attention to "css!" Start.
The results of the operation are as follows:
These are the simple implementations of Avalon front-end routing, which can be downloaded from the sample code in this chapter.
Subsequent chapters may start writing the Avalon API. Mutual Encouragement ~
Front end Artifact Avalonjs Getting Started (iii)