Angular-ui-router 详解
在最近的项目当中，由于需要嵌套 所以用到了前天路由。用了之后感觉不错，挺好的，现在把这个和大家分享出来，
首先整个项目的目录是
首先 页面上需要引入
<script src = "bli/angular。1.5.5.js"></script>
<script src = "bli/angular-ui-router.0.4.2.js"></script> 然后，这是html页面。
<!--* project:* site:cbim,* author：lize,* time:2017/7/11--><!DOCTYPE html><html lang="en" ng-app = "myApp"><head> <meta charset="UTF-8"> <title>app_nav</title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href=" css/main.css"> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src = "bli/angular。1.5.5.js"></script> <script src = "bli/angular-ui-router.0.4.2.js"></script> <script src = "js/app.js"></script> <script src = "js/config.js"></script> <script src = "js/app_router.js"></script> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script></head><body> <div ui-view = ""></div></body></html> 接下来 看js页面先是 app.js页面
var app = angular.module("myApp",[‘ui.router‘,‘ngWaterfall‘,‘oc.lazyLoad‘]);
因为还有到了其他的一些插件所以也注入了一些其他的。
接下来再看 app_router.js
$urlRouterProvider.otherwise(‘/index‘)
$stateProvider .state(‘index‘,{ url:‘/index‘, views:{ ‘‘:{ templateUrl:‘temp/index.html‘ }, ‘[email protected]‘ :{ templateUrl: "temp/header.html" }, ‘[email protected]‘ :{ controller: ‘TestController‘, templateUrl: "temp/nav.html", resolve:{ loadMyCtrl: [‘$ocLazyLoad‘, function($ocLazyLoad){ return $ocLazyLoad.load([ ‘js/ctrl.js‘ ]); }] } }, ‘[email protected]‘ :{ controller:‘myCtrl1‘, templateUrl: "module/a.html", resolve:{ load: [‘$ocLazyLoad‘, function($ocLazyLoad){ return $ocLazyLoad.load([ ‘js/myCtrl1.js‘, ‘js/childRouter.js‘ ]); }] } }, ‘[email protected]‘ :{ templateUrl: "temp/footer.html" } } })});
里面用上了懒加载的东西 所以，加上了 resolve函数。
好了 集体看详细的吧 详细地址是在github上：https://github.com/QueerUncle/Angular_nav
写的不是很好看 别见怪哦 这个项目里面不只是ui-router还有一些其他的东西。
时间： 2024-08-22 05:03:43