发表于: 2017-05-31 21:57:38

1 936


今天完成的任务:

完成了任务7路由的搭建,并成功post和跳转,坑也踩了不少。

1.明白了项目是如何进行html文件和css、js文件分开加载的,设置一个框子index.html,然后加载全局app.js文件,搭建路由进行其它各个页面的模块加载,其中就要用到懒加载。

2.分页写各个页面的js文件的时候要用angular.module进行开头写,不能把var myApp = angular.module("home", ['ui.router']);写进去,不然会引起冲突。

3.写主页面的子页面路由的时候name一定要用main.welcome、main.article、main.detail,ui-sref="main.welcome"或者ui-sref=".welcome"。

路由搭建如下:

var myApp = angular.module("home", ['ui.router']);

myApp.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.when("", "/login");

    $stateProvider

        .state("login", {

            url: "/login",

            templateUrl: "BackstageLogin.html"

        })

        .state("main", {

            url: "/main",

            templateUrl: "backstageMain.html"

        })

        .state("main.welcome",{

            url: "/welcome",

            templateUrl: "welcome.html"

        })

        .state("main.article",{

            url: "/article",

            templateUrl: "Article.html"

        })

        .state("main.detail",{

            url: "/detail",

            templateUrl: "detail.html"

        });

});

4.完成了登录页的HTTP请求,代码如下:

var app = angular.module("home");

    app.controller("personLogin", function($scope, $http, $state) {

    $scope.backLogin = function() {

        var a = $scope.username;

        var b = $scope.password;

        console.log(a, b);

        $http({

            method: "POST",

            url: "/carrots-admin-ajax/a/login",

            headers: {"Content-Type": "application/x-www-form-urlencoded"},

            params: {name:a, pwd: b}

        })

            .then(function(response) {

                console.log(response);

                if(response.data.code !== 0) {

                    $scope.tipsText = response.data.message;

                }

                else {

                    $state.go("main.welcome");

                }

            });

    };

});

这里有个坑就是我一开始用的data: {name:a, pwd: b} 进行的传参,但是服务器一直响应用户不存在,a,b取值没有问题,我一开始以为谁改了接口,后来查资料才发现是参数的格式问题:

params(字符串map或者对象)
这个键的值是一个字符串map或对象,会被转换成查询字符串追加在URL后面。如果值不是字符串,会被JSON序列化。如下:

//参数会转为?name=ari的形式

$http({

params:{'name':'ari'}

});

data(字符串或者对象)

这个对象中包含了将会被当作消息体发送给服务器的数据。通常在发送POST请求时使用。

从AngularJS 1.3开始,它还可以在POST请求里发送二进制数据。要发送一个blob对象,你可以简单地通过使用data参数来传递它。

map是用来存放一组一一映射关系的,在map中,一个x只能对应一个y

说白了就是params会将参数转换成name="xx"加在url后面,但是data不会转换,而是直接传{name: xx}这个对象到服务器。如果要使用data就必须在后面加$param,方法创建数组或对象的序列化表示。该序列化值可在进行 AJAX 请求时在 URL 查询字符串中使用。


5.点击按钮进行页面跳转时要用$state.go():

$state.go

$state.go(to, [,toParams],[,options])

形参to是string类型,必须,使用"^"或"."表示相对路径;

形参toParams可空,类型是对象;

形参options可空,类型是对象,字段包括:location为bool类型默认true,inherit为bool类型默认true, relative为对象默认$state.$current,notify为bool类型默认为true, reload为bool类型默认为false

$state.go('photos.detail')

$state.go('^')到上一级,比如从photo.detail到photo

$state.go('^.list')到相邻state,比如从photo.detail到photo.list

$state.go('^.detail.comment')到孙子级state,比如从photo.detail到photo.detial.comment.

这里又有一个坑,因为js页面分离后,没有在路由页面,因此控制器里面要传入参数$state,不然无法实行跳转。


明天计划的事情:

1.准备小课堂的东西;

2.看能不能抽时间完成任务7;

遇到的问题:

都已经在龚浩师兄和王蒙师兄的帮助下解决

收获:

路由的搭建和如何使用angular进行http的请求。







返回列表 返回列表
评论

    分享到