你的位置:首页 > 软件开发 > Java > angularJs的ui

angularJs的ui

发布时间:2015-09-09 19:00:16
一:跑通ui-router.跑通后的样子:这个不解释了,都是很基本的东西.二:切换视图:跑起来后的后果:三:如何通过链接切换视图. 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> ...

angularJs的ui

一:跑通ui-router.

angularJs的ui

跑通后的样子:

angularJs的ui

这个不解释了,都是很基本的东西.

二:切换视图:

angularJs的ui

跑起来后的后果:

angularJs的ui

angularJs的ui

angularJs的ui

三:如何通过链接切换视图.

 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4   <meta charset="UTF-8"> 5   <title></title> 6 </head> 7 <body ng-app="app" ng-controller="ctrl"> 8 <a href="" ui-sref="main">main</a> 9 <a href="#/main2">main2</a>10 <a href="" ng-click="gomain3()">main3</a>11   <div ui-view>12     <p>ui-view没有被替换掉,你就能看到我了</p>13   </div>14 </body>15 <script type="text/javascript" src='/images/loading.gif' data-original="../js/angular1.4.3.js"></script>16 <script type="text/javascript" src='/images/loading.gif' data-original="../js/angular-ui-router.min.js"></script>17 <script>18   angular.module('app',['ui.router'])19       .config(['$stateProvider','$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {20         $urlRouterProvider.otherwise("/main");21         $stateProvider.state('main',{22           url:"/main",23           template:'<div>main1:{{title}}</div>',24           controller:['$scope', function ($scope) {25             $scope.title='hello angular';26           }]27         }).state({28           name:"main2",29           url:"/main2",30           template:'<div>main2:{{title}}</div>',31           controller: function ($scope) {32             $scope.title="hello angulr main2";33           }34         }).state("main3",{35           url:"/main3",36           template:"<div>main3:{{name}}</div>",37           controller: function ($scope) {38             $scope.name="hello 张三"39           }40         });41       }]).controller('ctrl', function ($scope,$state) {42           $scope.gomain3= function () {43             $state.go("main3");44           }45       })46 47 </script>48 </html>

 

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com

原标题:angularJs的ui

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。