一、环境搭建
开发依赖：
{
"angular": "angularjs#1.3.8",
"angular-ui-router": "0.2.11",//路由
"ng-file-upload": "^12.2.13",
"ng-file-upload-shim": "^12.2.13",//文件上传
"angular-cookies": "1.2.9"//cookie
}主页：index.html(入口）
<body ng-app="myapp">
<div ng-controller="myctrl">
<ui-view></ui-view>//路由出口
</div>
</body>配置：
const app=angular.module('myapp',['ui.router','ngCookies']);路由分配：
function config($stateProvider, $urlRouterProvider, $locationProvider)
{
//当访问一个不存在的网址的时候，会自动跳转到 /index代表路由的名称
$urlRouterProvider.otherwise('/index');
$stateProvider
.state('home',{ //首页
url:'/home',
templateUrl:"../views/home.html",
controller:"homeController"
})
.state('about',{ //关于
url:"/about",
templateUrl:"../views/about.html",
controller:"aboutController"
})
}
app.config(config).run();控制器：
app.controller('indexController', function ($scope, $http, $cookieStore, $location)
{
//home路由分配的控制器
$http.get("../api/data.php?action=headerNav").success(function(data){
$scope.mydata= data;
});//向后台发送get请求
})
app.controller('aboutController',function(){
//about路由分配的控制器
})视图层：
//home.html
//假设indexController控制器的$scope.mydata="hello world";
<div>
<h1 ng-bind="mydata"></h1>//hello world
</div>
//about.html
//假设aboutController $scope.abdata="about me";
<div>
<h1>about页面</h1>
<p ng-bind="abdata"><p>//about me
</div>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
