[北京|结业弟子]JS-杨梦桐|2017年07月06日的日报-技能树.IT修真院

发表于： 2017-07-06 22:05:31

1 982

今天完成了任务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("连接出错")
            });
        })
    })