Detailed explanation AngularJS1.6 version of the UI-Router routing / #! /

AngularJS routing is to help us distinguish between different logical pages through # + tag and bind different pages to the corresponding controller. Therefore, after setting the routing rule, the HREF routing link to switch different views for the A tag of the HTML page. The Angular1.6 version usually has two ways of writing in HREF = “# …” or href = “# / …”, and the two ways did not respond in Angular1.6.

The result is reviewed the browser address bar. The default view link turned “#! / ..”, yes, there is more in the middle! No.

详解AngularJS1.6版本中ui-router路由中/#!/的解决方法

AngularJS upgraded to a 1.6 version, there are many / #! / Modes. So what changes do you have to do? Can refer to this: https: //github.com/angular/angular.js/commit/aa077e81129c740041438688dff2e8d20c3d7b52


So Add a property value of HREF to the HTML page A tag! No.

  

View student

Angularjs view

  AngularJS view    Add a student       Add Student  {Message}}  

View students
{Message}

Var mainapp = angular.module ("mainApp", ['ngroute']); mainapp.config ([$ ROUTEPROVIDER ", Function ($ routeProvider) { $ routeProvider.when ( '/ addStudent', {templateUrl: 'addStudent.html', controller: 'AddStudentController'}) when. ( '/ viewStudents', {templateUrl: 'viewStudents.html', controller: 'ViewStudentsController'}) . otherwise ({redirectto: '/ addstudent'});}]); Mainapp.controller ("AddstudentController", Function ($ scope) {$ scope.Message = "This page is used to display the input form of student information";}); Mainapp.controller ("ViewStudentScontroller", Function ($ scope) {$ scope.message = "This page is used to display all student information";});

Solution 2:

If you want to make the routing, you can do this with the previous version:

Mainapp.config ([$ locationProvider "," $ ROUTEPROVIDER ", Function ($ locationProvider, $ routeProvider) {$ locationProvider.hashprefix ('');}]);

View students

   Angularjs view 
Angularjs view
  

Add a student

Student

Add Student {Message}}

{{Message}}
 Var mainapp = angular.module ( "mainApp", [ 'ngRoute']); mainApp.config ([ "$ locationProvider", "$ routeProvider", function ($ locationProvider, $ routeProvider) {$ locationProvider.hashPrefix ( ''); $ routeProvider.when ( '/ addStudent', {templateUrl: 'addStudent.html', controller: 'AddStudentController'}.) when ( '/ viewStudents',. {templateUrl: 'viewStudents.html', controller: 'ViewStudentsController'}) otherwise ({redirectTo : '/ addstudent'};}]); Mainapp.controller ("AddstudentController", Function ($ scope) {$ scope.MessaGE = "This page is used to display the input form";});}); "ViewStudentScontroller", Function ($ scope) {$ scope.message = "This page is used to display all student information"; });      When the browser is accessed, there will be no more! The number.     The above is all the contents of this article, I hope that everyone's learning is helpful, I hope everyone will support Tumi Cloud.                      
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment