Content introduction, why use front-end routing?
Around 2005, a technology called ajax emerged. With ajax, when we submit data to the server, we no longer need to use the from form to submit, because the submission between the from forms will cause the page to be submitted. Switching, which means that a single-page application cannot be implemented.
Defects of ajax
1. It will not leave a history record in the browser.
2. Users cannot bookmark the page or save it or send the URL to others. Others can enter this page by clicking the URL directly
. 3. Ajax cannot achieve SEO Optimization, ajax is not friendly to search engines,
which is one reason why front-end routing is used.
First, let's take a look at the entry file app.js
1 var bookStoreApp = angular.module('bookStoreApp',['ngRoute','ngAnimate','bookStoreCtrls','bookSroreFilters','bookStoreServices','bookStoreDirective']); 2 3 bookStore.config(function($routeProvider){ 4 $routeProvider:when('/hello',{ 5 temolateUrl:'tpls/hello.html', 6 controller:'HelloCtrl' 7 }).when('/list',{ 8 temolateUrl:'tpls/bookList.html', 9 controller:'BookListCtrl' 10 }).otherwise({ 11 redirectTo:'/hello' 12 }) 13 });
We define a module called bookStoreApp.
We call the config method on it.
You will find that there is a routeProvider with a $$ symbol in front of it. This is the routing mechanism provided by AngularJS itself.
According to $routeProvider, we configure the routing.
For example: when the browser address bar finds that the address is an address such as hello, it will use a template such as tpls/hello.html
with the controller HelloCtrl to handle the binding between the template and the data.
When he finds that the address bar of the browser finds that the address is an address such as list, he will call another template, and
all other cases will directly jump to hello,
What everyone needs to pay attention to here is that after AngularJS 1.2, the mechanism has been modularized, that is, the route is not included in the Angular.js file, but it is separated into a module,
you can see Take a look at the directory diagram below to see how the modules in angularJS are segmented.
AngularJS no longer combines all the files in the angular.js file as before,
but is divided into separate js files,
So this leads to the fact that when we need to use routing, we must manually import the angular-route.js file on the page,
1 <script src="framework/1.3.0.14/angular-route.js"></script>
If you forget to add it, the browser may prompt that the routeProvider is not an object or not found. If you have this problem, you must check whether the page has imported the angular-route.js file
[Tips] This is the routing mechanism that comes with AngularJS itself. This routing has a flaw. It cannot implement deeply nested routing.
There is a third-party development called Router.
Welcome to https://angular-ui.github.io/ , https://ui-router.github.io/ng1/docs/0.3.1/index.html#/api/ui.router for details
UI-Router provides a nice mechanism to achieve deep nesting
First, you need to download the UI-Router package from github, and then import it into the page
1 <script src="framework/1.3.0.14/angular-ui-router.js"></script>
If you use angular-ui-router.js, you don't need to use angularJS's native routeProvider, and the
writing method will also change to some extent.
1 < body > 2 //Write a command, which represents a view 3 < div ui-view ></ div > 4 </ body >
Let's take a look at the js part. Here we don't use routeProvider anymore. In fact, the usage is similar. Instead, it is
replaced by another $$stateProvider, $urlRouterProvider.
The usage of urlRouterProvider is very similar to that of angularjs' native routeProvider,
but the name of the method defined by stateProvider is called state,
First of all, we need to call the state method on the stateProvider. Let's configure what kind of template is used when the browser address bar changes.
There are many quicker syntaxes.
We can see that there is only a single div in the html. How to use the div to What about the content that populates the homepage?
1 <div ui-view></div>
Let's look at js. First, there is a url parameter '/index',
and views are filled with several groups of content. In fact, there are three groups of views.
Our page is divided into two parts, the top is a navigation bar, and then the following content will follow. Switching,
we write an empty string at the top", we use tpls3/index.html as the html template of our home page,
in the tpls3/index.html template, we divide the template into two parts, one is called topbar and the other is called main,
1 <div class="container"> 2 <div ui-view="topbar"></div> 3 <div ui-view="main"></div> 4 </div>
We can see that there is a topbar@index in js, and there is a main@index below.
Through the syntax of @, stateProvider knows what kind of template is automatically loaded for each small block.
We can see that the following states are written in the same way. Of course, we can see index.usermng, index.usermng.highendusers, etc.,
that is to say, we can use ''dot'' to divide sub-module sub-regions.
In this case, with ui- After view, we can use this kind of deep nesting,
including a page divided into multiple areas, and multiple areas can define named ui-view,
so that only a small area can be switched, instead of the whole toggle
Front-end Routing Fundamentals
Hash #
can be achieved, the browser does not refresh the page, the change of the url address is realized, most browsers can support
In HTML5 history API,
we can modify the address in the URL address bar through js code. In this case, the browser will leave a history record, but the page will not jump.
The core of routing is to define "state" for the application
Using the routing mechanism will affect the overall coding of the application (the state needs to be defined in advance)
Considering compatibility issues and "graceful degradation"
, the browser will be checked. If the browser is older, it will use the hash method. If it is a new browser, it will use the history API method in HTML5.