发表于: 2017-07-06 22:05:31
1 983
今天完成了任务6,明天准备开任务7,这篇日报主要是关于整个任务6的思路梳理。
1. 使用angularjs路由
AngularJS 路由允许我们通过不同的 URL 访问不同的内容。通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA),在单页Web应用中 AngularJS 通过 # + 标记实现,所以单页html文件,使用<body ng-app="theApp"></body>来引入angular,所有被插入的内容,都放在<div ui-view=""></div>中。
在body末尾引入所有需要的angularjs文件,jq的js文件,以及懒加载和自己写的js文件
2. 通过ui-router来管理页面
理解ui-router参考了一篇写的很详细的文章http://www.cnblogs.com/haogj/p/4885928.html
首先是引入ui-router
var app = angular.module("theApp", ["ui.router","oc.lazyLoad"]).config(function ($stateProvider, $urlRouterProvider) { }
$urlRouterProvider.when("", "/login");
angular.module里引入了ui.router和懒加载
$urlRouterProvider类似ngRoute, 可以创建当特定的 url 访问时处理的规则,可以通过不同的 url 激活不同的状态,所以在管理激活和加载状态的时候, $urlRouterProvider并不是必须的。在状态管理之外的时候才会需要,比如重定向,或者验证的时候。
when 函数需要两个参数,我们希望匹配的路径,另外就是我们希望重新定向的目标。也可以是一个函数。
3. 嵌套路由
.state("home", {
url:"/home",
templateUrl: "view/home.html"
})
.state("home.welcome", {
url:"/welcome",
templateUrl: "view/welcome.html"
})
url 用来设置应用对应的一个特定状态. 也就是说,我们可以通过 url 来到达某个特定的状态,所以这里的 url 不是简单的 url 地址,而是某个可到达状态的标志
templateUrl是模板的路径,或者返回模板路径的函数
4. 控制器和懒加载
controller:'loginCtrl',
resolve: {
loadFile: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load([
'css/index.css',
'js/index.js'
])
}]
}
controller是自定义的控制器,懒加载的内容是该块加载的html文件对应的css文件和js文件
5. $http传参
angular.module("theApp",[ ])
.controller('loginCtrl',function ($scope,$state,$http) {
$("#getInside").click(function () {
$http({
method: "post",
url: "/a/a/login",
params: {
"name": $scope.username,
"pwd": $scope.psw
}
}).then (function success(response) {
if (response.data.code == 0)
$state.go('home');
else
angular.element("#error2").text("账号或密码错误");
}, function error(response) {
alert("连接出错")
});
})
})
以上是整块懒加载的js内容
首先在login.html文件里,两个input输入框的部分引入ng-model,用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值
引入angular.module("theApp",[ ]),注意如果没有要填的内容方括号也不能删掉,不然会报错
使用$scope等调用控制器,登录按钮触发onclick函数,使用$http传参
根据菜鸟教程上的范例改了传参写法,params传递调用函数的数组
注意的问题
1. css文件必须根据加载的html文件来写,如果直接针对body来写会导致刷新一下才能正确的显示跳转后页面的css
2. $http的部分,函数执行成功是指连接成功,反之则是连接出错
评论