Home > Developer > Web Develop
Share a little demo I made using Ui-router
1. The first step is to set the portal file index.html, note the order of loading, load the package first, and then load the controller that you wrote.
<!DOCTYPE HTML><HTMLLang= "en"Ng-app= "Routerapp"><Head> <MetaCharSet= "Utf-8"> <Metaname= "Viewport"content= "initial-scale=1, maximum-scale=1, User-scalable=no, Width=device-width"> <title>Test</title> <!--Lib is the folder of the angular package - <Scriptsrc= "Lib/jquery/jquery-1.11.3.min.js"></Script> <Scriptsrc= "Lib/angular/angular.js"></Script> <Scriptsrc= "Lib/angular-ui/angular-ui-router.js"></Script> <!--JS Controller's folder - <Scriptsrc= "Js/app.js"></Script> <Scriptsrc= "Js/indexctrl.js"></Script> <Scriptsrc= "Js/resultctrl.js"></Script></Head><Body><DivUi-view></Div></Body></HTML>
2.app.js file, Dependency injection, set route, here the route is using Ui-router route, here is a simple demonstration of two templates between the parameters, pass the template test.html and receive parameters template result.html
var Routerapp = angular.module (' Routerapp ', [' ui.router ']); Routerapp.run (function ($rootScope, $state, $stateParams) { $rootScope. $state = $state; $rootScope. $stateParams = $stateParams;}); Routerapp.config (function ($stateProvider, $urlRouterProvider) { $urlRouterProvider. Otherwise ('/index '); $stateProvider . State (' index ', {//template parameter URL: '/index ',//url parameter templateurl: ' templates/test.html ',// The location of the template controller: ' Mycontroller ' }) . State (' result ', { URL: '/result/:id/:number ',//Key name of the parameter to be passed templateurl: ' templates/result.html ', controller: ' Resultctrl ' });3. First main page template test.html, and set click event Toresult ()
<charset= "UTF-8"><Div>Hello World</div><type= "button" Ng-click = "Toresult ()" value = "Toresult" >
4.test.html controller Indexctrl.js, set the parameters to be passed $SCOPE.ABC and $scope.toresult, click event Toresult () is actually a $state.go (' template parameters ', { App.js the key name of the parameter that needs to be passed in: The parameter value to be passed}) method
Routerapp.controller (' Mycontroller ', function ($scope, $state) { $scope. ABC = "nice";//The parameter value to be passed $scope. def = 10 The parameter value to be passed $scope. Toresult = function () { $state. Go (' result ', {ID: $scope. Abc,number: $scope. def});} });5. Template result.html for receiving parameters
<charset= "UTF-8"><Div> Hello world2</div>
6.result.html controller resultctrl.js, here use $stateparams method to receive the parameters passed over the previous page
Routerapp.controller (' Resultctrl ', function ($scope, $state, $stateParams) { var id = $stateParams. id; var number = $stateParams. number; Console.log (ID); Console.log (number);});Project directory
Js\app.js, Indexctrl.js, resultctrl.js
Lib\
Jquery\jquery-1.11.3.min.js
Angular\angular.js
Angular-ui\angular-ui-router.js
Templates\test.html, result.html
Index.html
In fact, the whole process is not difficult, just interspersed between the template and the controller, easy to let people can not touch the mind, as long as the specific parameters are clearly corresponding to which, it is easy to understand.
ANGULAJS Routing Ui-router Parameters
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
