发表于： 2017-04-18 22:41:02
3 1320
今天做的事情/收获：
在绕了几个弯后发现自己搞错了 原本看到了这：
$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。
使用格式：
// 简单的 GET 请求，可以改为 POST$http({
method: 'GET',
url: '/someUrl'}).then(function successCallback(response) {
// 请求成功执行代码
}, function errorCallback(response) {
// 请求失败执行代码});
我以为和任务5学到的AJAX一样 用异步实现一个页面里刷新加载不同的页面导致出现了下面的代码：
var app=angular.module('myApp', []);
app.controller('siteCtrl', function($scope,$http){
$http({
method:'post',
url:"http://localhost/JS-6/Student.html"
}).then(function cuccessCallback(response) {
$scope.names=response.data.sites;
},function errorCallback(response) {
})
})
问了别人才知道。。原来我不知不觉写出了任务7的刚需 哈哈
反过头来乖乖看路由 看到了这样的列子教程：
angular.module('routingDemoApp',['ngRoute'])
.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{template:'这是首页页面'})
.when('/computers',{template:'这是电脑分类页面'})
.when('/printers',{template:'这是打印机页面'})
.otherwise({redirectTo:'/'});
他的效果是i这样的
就是点击上面的首页/电脑登 底下文字变化
然后我就本着实践见真章的理念 防着它写了写（这里并不知道他们里面元素的具体意义是什么）
angular.module("transmit"["ng"])
.config(['$tran',function($tran) {
$tran
.when('/',{template:'这是首页页面'})
.when('/computers',{template:'这是电脑分类页面'})
.otherwise({redirectTo:'/'});
}])
这里我就在想 这样可是实现 点击对应的事件显示不同的HTML 文字 那么也一定有办法能实现 显示网页啊？然后我就看到了这样的内容：
templateUrl:
如果我们只需要在 ng-view 中插入 HTML 模板文件，则使用该参数：
$routeProvider.when('/computers', {
templateUrl: 'views/computers.html',});
啊这不就是我一直在寻找的东西么？然后就自然而然的写出了这样的代码
angular.module('transmit',['ngRoute'])
.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{template:'欢迎来到萝卜多后台'})
.when('/computers',{templateUrl: 'http://localhost/JS-6/Student.html'})
.when('/printers',{template:'这是打印机页面'})
.otherwise({redirectTo:'/'});
}]);
补上HTML代码
<body ng-app="transmit">
<nav class="navbar navbar-default navbar-static-top nav-c">
<h2>后台管理系统</h2>
<h4>注销</h4>
</nav>
<div class="content">
<ul class="list">
<li><a href="#/">欢迎页</a> </li>
<li><a href="#/computers">公司列表</a> </li>
<li>信息管理</li>
</ul>
<div ng-view="" class="manage">
</div>
</div>
不错。。实现了点击
加载
这个页面（这是我单独写的HTML 并且配置了nginx）
然后开始理清这一大串代码的个中含义
理解不对的地方家贱一定要指正啊！！！
angular.module('transmit',['ngRoute'])
也就是加载angular.module模块transmit是自己定义的 用来和<body ng-app="transmit"> 呼应
[]里是注入路由ngRoute模块么？
AngularJS 模块的 config 函数用于配置路由规则。通过使用 configAPI，我们请求把$routeProvider注入到我们的配置函数并且使用$routeProvider.whenAPI来定义我们的路由规则。
$routeProvider 为我们提供了 when(path,object) & otherwise(object) 函数按顺序定义所有路由，函数包含两个参数:
第一个参数是 URL 或者 URL 正则规则。
第二个参数是路由配置对象。
而这些东西都会输出到ng-view中。
.when('/computers',{templateUrl: 'http://localhost/JS-6/Student.html'})绑定<li><a href="#/computers"> 就是让元素知道自己实现这一段代码该找谁来实现。
明天做的事情：
美化JS-6中的CSS页面 （现在做的太丑了）
开始任务7 复习任务6的代码
问题：
angular.module('transmit',['ngRoute'])
.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{template:'欢迎来到萝卜多后台'})
.when('/computers',{templateUrl: 'http://localhost/JS-6/Student.html'})
.when('/printers',{template:'这是打印机页面'})
.otherwise({redirectTo:'/'}); //这里我知道可以不写这段代码。。但是我就是想知道 这代码的实际意义与功能？？？？？求解
}]);
还有就是
<body ng-app="transmit">
ng-app到body里真的没问题么？写到普通的DIV里也可以把？我之前就是写到div里报错才写道了body里的（也许是我别的地方导致错了呢？）
连着上面的理解代码（需要指点） 一共三问题，那么师兄：请开始你的表演:
感谢蚊子给我的Sumlime 解决了困扰我多年的问题！这一抹绿色送给你
返回列表
评论