lihaiming
- 浏览: 508430 次
- 性别:
- 来自: 上海
-
文章分类
- 全部博客 (241)
- Jscript笔记 (23)
- sql (8)
- jQuery (23)
- css (2)
- jQuery.form (2)
- struts2 (3)
- 数据库字符集 (3)
- Java (15)
- Oracle (2)
- DB2 (4)
- ResourceBundle (1)
- Exception (7)
- Windows (2)
- 数据库 (18)
- JSP (2)
- jstree (3)
- datatable (9)
- bootstrap-switch (1)
- select2 (3)
- Java.tree (1)
- JSF2 (1)
- Bootstrap (1)
- Eclipse (13)
- SVN (3)
- Eclipse插件 (5)
- myeclipse (1)
- ajax (1)
- JBOSS (2)
- data storage (1)
- Apache tiles (1)
- springMVC (15)
- mybatis (6)
- AngularJS (13)
- checkbox (1)
- J2EE (1)
- SecureCRT (7)
- tomcat (4)
- Maven (3)
- log4j (3)
- Xshell (1)
- 工具应用 (5)
- spring (12)
- Apache (5)
- books (1)
- fastjson (1)
- Standard (1)
- Mysql (1)
- MAC (1)
- Charles (1)
- LINUX (1)
- 日常开发ISSUE (0)
最新评论
-
yuchangcheng：
直接把代码 上传上来吧 这样看的很吃力呀
mybatis generator 的复合查询 -
zzd0058：
我表示报400错误
SpringMVC接收复杂集合参数 -
lihaiming：
影非弦 写道没有这个页面详细的文件么？文档地址：https:/ ...
select2.js使用 -
影非弦：
没有这个页面详细的文件么？
select2.js使用 -
影非弦：
这个select.min.css是select2提供的样式文件 ...
select2.js使用
AngularJS自带有路由模块ngRoute，但是有经验的老师都推荐我们使用功能更完善更强大的ui-router来做路由。那到底什么是路由呢？我自己的理解是：路由可以看作一个总控制器，它会根据页面的不同状态来填充页面的内容，这就是路由的主要用处。前端路由能极大地减少对服务器资源的请求数量，因此在前端做路由显得尤为重要。
-----------------------------------------------------------------
由于路由是控制整个应用的显示状态的，所以我们要让路由模块第一时间接管整个应用。
使用ui-router很简单，下载它的包，在index.html中引入js文件，然后在模块的依赖中引入即可。
1
var routerApp = angular.module('routerApp', ['ui.router']);
ui-router的本质其实是向我们预留的部分填充模板，它会在页面中去寻找ui-view这条指令，然后根据当前页面状态把对应的模板填充到ui-view所在的区块中。
比如一个典型的页面是nav+footer固定不变，中间主要部分作为内容显示区域时常发生变化。对应的页面结构就是
1
2
3
4
5
<body>
<nav>This is nav</nav>
<div ui-view></div>
<footer>This is footer</footer>
</body>
然后我们的路由根据页面的状态，选择不同的html模板填充到ui-view的这个div里面。
在js中具体怎么使用ui-router呢
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
routerApp.config(function($stateProvider,$urlRouterProvider) {
$urlRouterProvider.otherwise('/index');
$stateProvider
.state('index',{
url : '/index',
templateUrl : 'tpls/index.html'
})
.state('list',{
url : '/list',
templateUrl : 'tpls/list.html'
})
.state('detail',{
url : '/detail',
templateUrl : 'tpls/detail.html'
});
});
以上就是angular路由最基本的模板。但是要注意一个问题，state的第一个参数并不是匹配规则，而是叫状态名，也就是说这个参数事实上可以是任意的，它用来给当前状态增加一个名字，触发路由规则还是看url的内容。比如这样
1
2
3
4
.state('home',{
url : '/index',
templateUrl : 'tpls/index.html'
})
我们必须要地址栏输入www.xx.com/index，才会加载对应的模板而不是输入home，它仅仅是一个名字而已。
但是说，这个名字也是有它的作用的。看一个例子就明白了。
index.html
1
2
3
<nav>This is the nav</nav>
<div ui-view></div>
<footer>This is the footer</footer>
list.html
1
2
3
4
<div>
<p>this is the list page</p>
<div ui-view></div>
</div>
list-main.html
1
2
3
<div>
<p>This is list-main Page</p>
</div>
如果我们的路由这么写
1
2
3
4
5
6
7
8
.state('aaa',{
url : '/list',
templateUrl : 'tpls/list.html'
})
.state('bbb',{
url : '/list/main',
templateUrl : 'tpls/list-main.html'
})
那当我们在浏览器中输入www.xx.com/list/main的时候，页面结果为
5472d6ee0001fc2803350157.jpg
如果我们的路由这么写
1
2
3
4
5
6
7
8
.state('aaa',{
url : '/list',
templateUrl : 'tpls/list.html'
})
.state('aaa.bbb',{
url : '/main',
templateUrl : 'tpls/list-main.html'
})
那当我么输入www.xx.com/list/main的时候，页面结果为
5472d6fd0001ebcf03690177.jpg
也就是说state的的第一个参数为页面定义了一个名字，这个页面的模板只能放到它的父级中的ui-view去。如果没有.这种写法，那么默认的父级是index.html，所以第一种写法bbb模板的父级是index.html，所以输入/list/main时会把对应模板加载到index.html中的ui-view里面。而第二种写法aaa.bbb，这意思是说bbb的父级是aaa，所以bbb的模板要放到aaa模板(也就是list.html)中的ui-view中。这时的url是在aaa页面的url后的url。
当然还有页面的嵌套，这部分其实大漠老师在视频中已经讲得很清楚了。
这是路由需要注意的一个作用域问题。
-----------------------------------------------------------------------
当然路由还有很多其他问题，因为路由是angularjs中很重要的一部分，但基本的用法就是上面所讲的了，如果把所有静态页面都写好了，那么用以上的内容就已经能做出一个精美的web了。现在学习了路由的基本用法，其它问题的话我们碰到一个再解决一个吧。
2014-11-24AngularJSJavaScript9488 浏览15 回答
PHPBird
今天还是来说一下angular中的路由模块。我们实际项目中，各个页面的切换是经常会与Auth相关的。比如我网站的后台，是需要登录过的用户才能进去，那么我们用angularJS做前端路由的时候应该怎么完成这个功能呢
------------------------------------------------------------------------
我们还是先设想一个最简单的场景吧。我们的应用有两个页面，登录页面后内容页面，要求是必须要验证登录成功后才能进入内容页面，下面我们一起来实现一下这个例子吧。当然我觉得我的方法可能会比较Low，但是学习阶段我们能先把功能做出来比什么都重要。
首先用bootstrap来写一个简单的登录页面吧。具体bootstrap代码我就不说了，我们关注的是angular在这里面如何用起来
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="col-md-offset-3 col-md-4">
<form class="form" role="form" name="loginForm" ng-submit="loginCheck()">
<div class="form-group">
<label class="control-label">用户名</label>
<input type="text" class="form-control" required placeholder="请输入管理员账号" ng-model="admin.username">
</div>
<div class="form-group">
<label class="control-label">密码</label>
<input type="password" class="form-control" ng-model="admin.pwd" required placeholder="请输入密码">
</div>
<div ng-show="showError" class="alert alert-danger alert-dismissible" role="alert">
<button ng-click="showError=false" type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
用户名或密码错误！！你还有一次机会
</div>
<input type="submit" class="btn btn-primary btn-lg" value="登录" ng-disabled="loginForm.$invalid">
</form>
</div>
效果如下
54788faf000197b405000227.jpg
当然我之前还有一些css的布局，粘代码过去可能会出错哦，至少得在最外层加一个div class="row"
还可以看见，我给登录按钮加了个ng-disabled，当表单没有通过验证的时候是不能点登录的。
然后我加了一个提示的tips，用到了ng-show，在controller里会有一个showError的属性来控制它的显示，当验证账号密码错误时showError为true。
当我们验证出错的时候
547892c90001675104860298.jpg
接着我们来看一下路由
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var myApp = angular.module('myApp', ['ui.router','myModule']);
myApp.run(function($rootScope, $state, $stateParams){
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
$rootScope.$state.isLogin = false;
});
myApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/login');
$stateProvider
.state('login',{
url : '/login',
templateUrl : 'tpls/login.html',
controller : 'LoginController'
})
.state('index',{
url : '/index',
templateUrl : 'tpls/index.html',
controllerProvider : function($rootScope){
if($rootScope.$state.isLogin == false){
$rootScope.$state.go('login');
}
return function(){};
}
});
}
因为在整个页面中我们都会用到登录状态，所以我把登录状态绑定到rootscope中，isLogin刚开始是false表示未登录。
接着看路由里面，login这个很简单，主要看index页面。
关键的一步就是index的controller，在这里我选择用controllerProvider的方式来生成controller，可以看到我们最后实际上是返回的一个空的function，但是在返回空controller之前（index页面还没有解析），我可以做一些事情，那就是验证权限啦！
如果$rootScope.$state.isLogin为false也就是还没有登录，那就直接跳转到登录页面。跳转用到了$state里面的go方法，go中的变量就是我们每个页面的状态名，也就是state的第一个参数。我是go('login')，它就跳转到state的第一个参数是login的那个页面去了，也就是登录页面。换句话说，如果我们登录提交后验证没有成功，当我们在地址栏输入/index的时候会跳到登录页面的哦。
那么再来看看我们的验证模块。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
myModule
.controller('LoginController', function($scope,$rootScope,$http){
$scope.showError = false;
$scope.loginCheck = function(){
var username = $scope.admin.username;
var pwd = $scope.admin.pwd;
var loginSuccess = false;
http.get('/acm-admin/data/user.json')
.success(function(response){
for(var i=0; i<response.length; i++){
if(response[i].username == username && response[i].pwd == pwd){
$rootScope.$state.isLogin = true;
loginSuccess = true;
$rootScope.$state.go('index');
}
}
if(!loginSuccess){
$scope.showError = true;
}
});
}
})
初始化我们给showError一个值为false,不要显示错误提示框。然后来看看验证登录的这个方法。首先获取到用户输入的用户名和密码，设置登录成功的状态的false。然后通过$http.get，到指定的地方去取一个json文件，很显然这是个假数据，我们把预设的用户名和密码存放到这个json文件中。取出预设的用户名和密码之后就和用户输入的来进行对比，相信这都很简单，大家肯定能看明白。如果用户名和密码都对上了，那么就把登录状态设置为true，登录成功也设置为true。然后用$state的go方法跳转到Index页面。
如果登录信息验证失败，那么就把showError赋为true，页面上就会显示提示信息咯。
----------------------------------------------------------------------------
怎么样，很简单吧。当然还有其它实现这一功能的方法，而且我上述的方法很可能还有诸多安全隐患，而且模块的分工也是不明确的，淡然实际部署不推荐这么写了。我们可以优化改进的地方很多，比如验证的模块是不是应该独立出去呢，或者用户有没有什么办法能轻易绕过这个登录保护呢？这就留待小伙伴们自己探究了……继续学习angular去了，大家晚安！！
2014-11-28 回复 2
PHPBird
其实路由的功能是比较复杂的，我们实际应用中页面的状态也是非常多的，上面简单的路由是肯定不能满足我们的需求的，所以我们必须要更深入地了解下路由以及它更有用的一些用法。
--------------------------------------------------------------------
首先来说一下templateUrl属性，上面说了它的值是对应模板的地址，比如
1
2
3
...
templateUrl : 'tpls/index.html',
...
但事实上我们也可以用一个函数作为值，但是这个函数必须返回模板的地址，比如
1
2
3
4
5
...
templateUrl : function(){
return 'tpls/index.html';
},
...
这两段代码的效果其实是一模一样的，很容易理解。但是我们在实际应用的时候会经常有这样的需求：在url里拼接get参数，然后后台利用get参数去读数据库然后返回相应的内容。这时候用第一种方法实现起来可能就不那么容易（但是也是能实现的），而用第二种方法就很容易了。
那么在这之前需要介绍一个很有用的东西叫做$stateParams，看名字也很容易理解，状态参量。这个东西就存储了页面状态的有关信息，我们通过一个例子来看看这到底是神马东东。
这是我们的list.html页面
1
2
3
4
5
<div>
<p>This is the list page</p>
<a ui-sref="detail({articleId:'111'})">文章详情</a>
</div>
这是detail.html页面
1
2
3
<div>
<p>This is the detail page</p>
</div>
这是路有部分了，注意看哟
1
2
3
4
5
6
7
8
9
10
11
.state('list',{
url : '/list',
templateUrl : 'tpls/list.html'
})
.state('detail',{
url : '/detail/{articleId}',
templateUrl : function($stateParams){
console.log($stateParams);
return 'tpls/detail.html';
}
})
先来看看效果，当我们进入list页面时是下面这个样子
5475f3190001e56403160176.jpg
我们点击文章详情这个链接后，页面变成了detail，并且下面打印出了$stateParams
5475f3190001aba903240258.jpg
这里我们发现它是一个对象，并且包含了我们所传递的参数。小伙伴们看看我上面是怎么在url里传递参数的哦，就是加一个括号，里面放一个我们要传递的对象即可。传递对象参数的时候需要注意，路由中url后面跟了多少参数你就只能传递那么多参数,比如
路由中这么写
1
2
3
4
5
6
7
.state('detail',{
url : '/detail/{articleId}/{else}',
templateUrl : function($stateParams){
console.log($stateParams);
return 'tpls/detail.html';
}
})
html页面中这么写
1
2
3
4
<div>
<p>This is the list page</p>
<a ui-sref="detail({articleId:'111',else:'imooc'})">文章详情</a>
</div>
那我们输出的效果就是这样的
5475f62c0001ec4303800275.jpg
怎么能用它呢？小伙伴们记得路由中的另一个参数controller，它为模板指定了一个controller，事实上我们可以把$stateParams传入controller中，看个例子吧
首先我们在index.html引入controller.js
list页面和上面没有变化
1
2
3
4
<div>
<p>This is the list page</p>
<a ui-sref="detail({articleId:'111',else:'imooc'})">文章详情</a>
</div>
路由中我们还是这么写，但是给detail页面指定了一个controller
然后我们在controller.js里面
1
2
3
4
5
6
//注意，我们需要在路由最开头的依赖中加上myModule哦
var myModule = angular.module('myModule',[]);
myModule
.controller('DetailController',function($scope,$stateParams){
console.log($stateParams);
});
当我们在list页面中点击链接时，进入detail页面，效果如下
5475fa040001985b03310231.jpg
我们在controller中也能打印出传递的参数，这就很有意思了。我们可以在controller中根据传递过来的参数和后台服务器进行通信然后把返回的结果绑定在scope上，页面是不是就可以显示出来了呢，比如这样
1
2
3
4
5
6
7
myModule.controller('DetailController', function($scope,$stateParams){
console.log($stateParams);
$http.post('API_URL',{params:$stateParams})
.success(function(data,status,headers,config){
$scope.content = data;
});
})
我们通过http服务把$stateParams发送到后台，然后把返回的数据绑定在$scope.content上，detail.html中的{{content}}是不是就可以跟着变化了呢？
------------------------------------------------------------------------
今天就暂时写这么多，以上是最近实践路由的一些经验，但是路由的用法还可以更灵活，这需要我们掌握更多这方面的内容。
PS:今天有门课期末前两天不得不预习了整本书，缺了两天，但是我觉得应该反思，养成一个好习惯不容易，不应该为自己找各种理由，而且目测一般都挂科了……时间虽然紧，但挤挤肯定还是有的！
2014-11-27 回复 1
PHPBird
今天来说一点angularjs中看起来很简单但是实践起来又有不少问题的ng-class吧
------------------------------------------------------------------------
不过还是先说一下和angular无关的一个js的小坑，不知道大家遇到过没有，就是json格式的文件。之前一直都在js中定义json数组，或者从php后台用json_encode编码后直接返回，从没有自己写过json格式的数据，今天就遇到点麻烦。
在js中定义json数组这么写就好了：
1
var arr = [{a:1,b:2},{a:5,b:10}];
但是在json文件中千万不能这么写
1
[{a:1,b:2},{a:5,b:10}]
必须给key加上引号才行哦。今天调试好久才发现这个问题，也算个教训吧……
------------------------------------------------------------------------
然后说ng-class这个东西，老师讲的时候一句带过，用的时候还是需要费些时间的。
我总结了一下通过ng-class给元素动态地加class有4种做法，下面一个一个来说。
先看一下官方的说明
547747ed00019d2705000171.jpg
不知道大家能不能看清，给个链接吧https://code.angularjs.org/1.3.0-beta.11/docs/api/ng/directive/ngClass
大致翻译一下就是说ng-class指令有3中操作方式，通过ng-class等于的表达式计算出来的值的类型来决定是哪种
方式1： 当它的值为一个字符串时，它就会把用空格分开的字符串加到class中
方式2： 当值为一个数组时，它每个字符串元素都会被加到class中
方式3： 当值为一个对象时(key=>value)，把value为true的key加到class中
首先是最不推荐的
1
2
3
4
5
6
7
<div ng-class="{{myclass}}"></div>
....
<script>
function someController($scope){
$scope.myclass = "xxx";
}
</script>
上面这种方法效果上来说没问题，但是完全没必要用ng-class，普通的也能实现这个效果。而且在controller中控制样式总感觉有点儿别扭……
然后说另一种用法
1
<div ng-class="{true :'red', false :'green'}[someVariable]"></div>
这种用法就是说variable为true时，就给元素加上red这个class，如果variable为false就加上green这个class，这个在逻辑比较简单的时候还是蛮好用的。
下一种适合需要添加多个类的时候，也就是ng-class的值为一个对象
1
2
3
4
5
6
<p ng-class="{strike: deleted, bold: important, red: error}">Map Syntax Example</p>
<input type="checkbox" ng-model="deleted"> deleted (apply "strike" class)
<br>
<input type="checkbox" ng-model="important"> important (apply "bold" class)
<br>
<input type="checkbox" ng-model="error"> error (apply "red" class)
上面代码ng-class就是一个对象，我们把deleted,important,error进行双向数据绑定，当我们在checkbox勾选时，它们变为true，然后对应的key就被加到class中，效果图
547749e500016b1f02880112.jpg
还有一种就是数组类型的，数组都每个字符串元素都会被加到class中
1
2
3
4
5
6
<p ng-class="[style1, style2, style3]">Using Array Syntax</p>
<input ng-model="style1" placeholder="Type: bold, strike or red">
<br>
<input ng-model="style2" placeholder="Type: bold, strike or red">
<br>
<input ng-model="style3" placeholder="Type: bold, strike or red">
当我们在样式中定义好bold,strike,red；类的样式后，我们输入这些字符串就会出现效果
54774a860001390801760135.jpg
大概就是这几种用法，我推荐大家用对象来添加对象，那样最好控制逻辑也清楚。
------------------------------------------------------------------------------
今天就分享这些吧，希望对大家有些帮助
2014-11-28 回复 1
purple_yao
总结得很好，谢谢分享出来。哈哈
2014-11-26 回复 0
flyysr
谢谢分享，我也在学这个，可以交流
2014-12-24 回复 0
em_heqian
谢谢分享心得 很有帮助
2015-01-14 回复 0
我好吗
感谢分享，看完之后了解很多
2015-03-17 回复 0
___Qie听风吟
controller如果被实例化过会有缓存的吗？
比如说我先进入index页，然后再点击登陆页，完成后自动跳到index页。但是index页的controller没有像第一次进出时数据的初始化
有什么办法让controller重新加载么
用的ui-router来做路由
2015-04-22 回复 0
菠萝小萝卜
哥们，你这问题解决了没？
#12015-09-21 回复
catdp
多谢分享，帮助很大！
2015-05-10 回复 0
TLE
谢谢分享，希望继续求教
2015-05-21 回复 0
chifanqu
请问大神ui-router能实现动画吗？
用ng-router时候，页面会自动获得ng-enter这个属性，ui-router可以实现吗
2015-06-01 回复 0
hapiman
可以分享哈你的代码么
2015-06-15 回复 0
飘逝的绝唱
感觉写的前后不连贯 可能是笔记的原因 跳跃性比较强 按照步骤没办法进行 只能给已经懂的人 加深印象
2015-06-18 回复 0
飘逝的绝唱
不过整体来说 是对大漠课堂的细致讲解
2015-06-18 回复 0
老徐徐
不错，写的很好
1天前
-----------------------------------------------------------------
由于路由是控制整个应用的显示状态的，所以我们要让路由模块第一时间接管整个应用。
使用ui-router很简单，下载它的包，在index.html中引入js文件，然后在模块的依赖中引入即可。
1
var routerApp = angular.module('routerApp', ['ui.router']);
ui-router的本质其实是向我们预留的部分填充模板，它会在页面中去寻找ui-view这条指令，然后根据当前页面状态把对应的模板填充到ui-view所在的区块中。
比如一个典型的页面是nav+footer固定不变，中间主要部分作为内容显示区域时常发生变化。对应的页面结构就是
1
2
3
4
5
<body>
<nav>This is nav</nav>
<div ui-view></div>
<footer>This is footer</footer>
</body>
然后我们的路由根据页面的状态，选择不同的html模板填充到ui-view的这个div里面。
在js中具体怎么使用ui-router呢
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
routerApp.config(function($stateProvider,$urlRouterProvider) {
$urlRouterProvider.otherwise('/index');
$stateProvider
.state('index',{
url : '/index',
templateUrl : 'tpls/index.html'
})
.state('list',{
url : '/list',
templateUrl : 'tpls/list.html'
})
.state('detail',{
url : '/detail',
templateUrl : 'tpls/detail.html'
});
});
以上就是angular路由最基本的模板。但是要注意一个问题，state的第一个参数并不是匹配规则，而是叫状态名，也就是说这个参数事实上可以是任意的，它用来给当前状态增加一个名字，触发路由规则还是看url的内容。比如这样
1
2
3
4
.state('home',{
url : '/index',
templateUrl : 'tpls/index.html'
})
我们必须要地址栏输入www.xx.com/index，才会加载对应的模板而不是输入home，它仅仅是一个名字而已。
但是说，这个名字也是有它的作用的。看一个例子就明白了。
index.html
1
2
3
<nav>This is the nav</nav>
<div ui-view></div>
<footer>This is the footer</footer>
list.html
1
2
3
4
<div>
<p>this is the list page</p>
<div ui-view></div>
</div>
list-main.html
1
2
3
<div>
<p>This is list-main Page</p>
</div>
如果我们的路由这么写
1
2
3
4
5
6
7
8
.state('aaa',{
url : '/list',
templateUrl : 'tpls/list.html'
})
.state('bbb',{
url : '/list/main',
templateUrl : 'tpls/list-main.html'
})
那当我们在浏览器中输入www.xx.com/list/main的时候，页面结果为
5472d6ee0001fc2803350157.jpg
如果我们的路由这么写
1
2
3
4
5
6
7
8
.state('aaa',{
url : '/list',
templateUrl : 'tpls/list.html'
})
.state('aaa.bbb',{
url : '/main',
templateUrl : 'tpls/list-main.html'
})
那当我么输入www.xx.com/list/main的时候，页面结果为
5472d6fd0001ebcf03690177.jpg
也就是说state的的第一个参数为页面定义了一个名字，这个页面的模板只能放到它的父级中的ui-view去。如果没有.这种写法，那么默认的父级是index.html，所以第一种写法bbb模板的父级是index.html，所以输入/list/main时会把对应模板加载到index.html中的ui-view里面。而第二种写法aaa.bbb，这意思是说bbb的父级是aaa，所以bbb的模板要放到aaa模板(也就是list.html)中的ui-view中。这时的url是在aaa页面的url后的url。
当然还有页面的嵌套，这部分其实大漠老师在视频中已经讲得很清楚了。
这是路由需要注意的一个作用域问题。
-----------------------------------------------------------------------
当然路由还有很多其他问题，因为路由是angularjs中很重要的一部分，但基本的用法就是上面所讲的了，如果把所有静态页面都写好了，那么用以上的内容就已经能做出一个精美的web了。现在学习了路由的基本用法，其它问题的话我们碰到一个再解决一个吧。
2014-11-24AngularJSJavaScript9488 浏览15 回答
PHPBird
今天还是来说一下angular中的路由模块。我们实际项目中，各个页面的切换是经常会与Auth相关的。比如我网站的后台，是需要登录过的用户才能进去，那么我们用angularJS做前端路由的时候应该怎么完成这个功能呢
------------------------------------------------------------------------
我们还是先设想一个最简单的场景吧。我们的应用有两个页面，登录页面后内容页面，要求是必须要验证登录成功后才能进入内容页面，下面我们一起来实现一下这个例子吧。当然我觉得我的方法可能会比较Low，但是学习阶段我们能先把功能做出来比什么都重要。
首先用bootstrap来写一个简单的登录页面吧。具体bootstrap代码我就不说了，我们关注的是angular在这里面如何用起来
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="col-md-offset-3 col-md-4">
<form class="form" role="form" name="loginForm" ng-submit="loginCheck()">
<div class="form-group">
<label class="control-label">用户名</label>
<input type="text" class="form-control" required placeholder="请输入管理员账号" ng-model="admin.username">
</div>
<div class="form-group">
<label class="control-label">密码</label>
<input type="password" class="form-control" ng-model="admin.pwd" required placeholder="请输入密码">
</div>
<div ng-show="showError" class="alert alert-danger alert-dismissible" role="alert">
<button ng-click="showError=false" type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
用户名或密码错误！！你还有一次机会
</div>
<input type="submit" class="btn btn-primary btn-lg" value="登录" ng-disabled="loginForm.$invalid">
</form>
</div>
效果如下
54788faf000197b405000227.jpg
当然我之前还有一些css的布局，粘代码过去可能会出错哦，至少得在最外层加一个div class="row"
还可以看见，我给登录按钮加了个ng-disabled，当表单没有通过验证的时候是不能点登录的。
然后我加了一个提示的tips，用到了ng-show，在controller里会有一个showError的属性来控制它的显示，当验证账号密码错误时showError为true。
当我们验证出错的时候
547892c90001675104860298.jpg
接着我们来看一下路由
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var myApp = angular.module('myApp', ['ui.router','myModule']);
myApp.run(function($rootScope, $state, $stateParams){
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
$rootScope.$state.isLogin = false;
});
myApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/login');
$stateProvider
.state('login',{
url : '/login',
templateUrl : 'tpls/login.html',
controller : 'LoginController'
})
.state('index',{
url : '/index',
templateUrl : 'tpls/index.html',
controllerProvider : function($rootScope){
if($rootScope.$state.isLogin == false){
$rootScope.$state.go('login');
}
return function(){};
}
});
}
因为在整个页面中我们都会用到登录状态，所以我把登录状态绑定到rootscope中，isLogin刚开始是false表示未登录。
接着看路由里面，login这个很简单，主要看index页面。
关键的一步就是index的controller，在这里我选择用controllerProvider的方式来生成controller，可以看到我们最后实际上是返回的一个空的function，但是在返回空controller之前（index页面还没有解析），我可以做一些事情，那就是验证权限啦！
如果$rootScope.$state.isLogin为false也就是还没有登录，那就直接跳转到登录页面。跳转用到了$state里面的go方法，go中的变量就是我们每个页面的状态名，也就是state的第一个参数。我是go('login')，它就跳转到state的第一个参数是login的那个页面去了，也就是登录页面。换句话说，如果我们登录提交后验证没有成功，当我们在地址栏输入/index的时候会跳到登录页面的哦。
那么再来看看我们的验证模块。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
myModule
.controller('LoginController', function($scope,$rootScope,$http){
$scope.showError = false;
$scope.loginCheck = function(){
var username = $scope.admin.username;
var pwd = $scope.admin.pwd;
var loginSuccess = false;
http.get('/acm-admin/data/user.json')
.success(function(response){
for(var i=0; i<response.length; i++){
if(response[i].username == username && response[i].pwd == pwd){
$rootScope.$state.isLogin = true;
loginSuccess = true;
$rootScope.$state.go('index');
}
}
if(!loginSuccess){
$scope.showError = true;
}
});
}
})
初始化我们给showError一个值为false,不要显示错误提示框。然后来看看验证登录的这个方法。首先获取到用户输入的用户名和密码，设置登录成功的状态的false。然后通过$http.get，到指定的地方去取一个json文件，很显然这是个假数据，我们把预设的用户名和密码存放到这个json文件中。取出预设的用户名和密码之后就和用户输入的来进行对比，相信这都很简单，大家肯定能看明白。如果用户名和密码都对上了，那么就把登录状态设置为true，登录成功也设置为true。然后用$state的go方法跳转到Index页面。
如果登录信息验证失败，那么就把showError赋为true，页面上就会显示提示信息咯。
----------------------------------------------------------------------------
怎么样，很简单吧。当然还有其它实现这一功能的方法，而且我上述的方法很可能还有诸多安全隐患，而且模块的分工也是不明确的，淡然实际部署不推荐这么写了。我们可以优化改进的地方很多，比如验证的模块是不是应该独立出去呢，或者用户有没有什么办法能轻易绕过这个登录保护呢？这就留待小伙伴们自己探究了……继续学习angular去了，大家晚安！！
2014-11-28 回复 2
PHPBird
其实路由的功能是比较复杂的，我们实际应用中页面的状态也是非常多的，上面简单的路由是肯定不能满足我们的需求的，所以我们必须要更深入地了解下路由以及它更有用的一些用法。
--------------------------------------------------------------------
首先来说一下templateUrl属性，上面说了它的值是对应模板的地址，比如
1
2
3
...
templateUrl : 'tpls/index.html',
...
但事实上我们也可以用一个函数作为值，但是这个函数必须返回模板的地址，比如
1
2
3
4
5
...
templateUrl : function(){
return 'tpls/index.html';
},
...
这两段代码的效果其实是一模一样的，很容易理解。但是我们在实际应用的时候会经常有这样的需求：在url里拼接get参数，然后后台利用get参数去读数据库然后返回相应的内容。这时候用第一种方法实现起来可能就不那么容易（但是也是能实现的），而用第二种方法就很容易了。
那么在这之前需要介绍一个很有用的东西叫做$stateParams，看名字也很容易理解，状态参量。这个东西就存储了页面状态的有关信息，我们通过一个例子来看看这到底是神马东东。
这是我们的list.html页面
1
2
3
4
5
<div>
<p>This is the list page</p>
<a ui-sref="detail({articleId:'111'})">文章详情</a>
</div>
这是detail.html页面
1
2
3
<div>
<p>This is the detail page</p>
</div>
这是路有部分了，注意看哟
1
2
3
4
5
6
7
8
9
10
11
.state('list',{
url : '/list',
templateUrl : 'tpls/list.html'
})
.state('detail',{
url : '/detail/{articleId}',
templateUrl : function($stateParams){
console.log($stateParams);
return 'tpls/detail.html';
}
})
先来看看效果，当我们进入list页面时是下面这个样子
5475f3190001e56403160176.jpg
我们点击文章详情这个链接后，页面变成了detail，并且下面打印出了$stateParams
5475f3190001aba903240258.jpg
这里我们发现它是一个对象，并且包含了我们所传递的参数。小伙伴们看看我上面是怎么在url里传递参数的哦，就是加一个括号，里面放一个我们要传递的对象即可。传递对象参数的时候需要注意，路由中url后面跟了多少参数你就只能传递那么多参数,比如
路由中这么写
1
2
3
4
5
6
7
.state('detail',{
url : '/detail/{articleId}/{else}',
templateUrl : function($stateParams){
console.log($stateParams);
return 'tpls/detail.html';
}
})
html页面中这么写
1
2
3
4
<div>
<p>This is the list page</p>
<a ui-sref="detail({articleId:'111',else:'imooc'})">文章详情</a>
</div>
那我们输出的效果就是这样的
5475f62c0001ec4303800275.jpg
怎么能用它呢？小伙伴们记得路由中的另一个参数controller，它为模板指定了一个controller，事实上我们可以把$stateParams传入controller中，看个例子吧
首先我们在index.html引入controller.js
list页面和上面没有变化
1
2
3
4
<div>
<p>This is the list page</p>
<a ui-sref="detail({articleId:'111',else:'imooc'})">文章详情</a>
</div>
路由中我们还是这么写，但是给detail页面指定了一个controller
然后我们在controller.js里面
1
2
3
4
5
6
//注意，我们需要在路由最开头的依赖中加上myModule哦
var myModule = angular.module('myModule',[]);
myModule
.controller('DetailController',function($scope,$stateParams){
console.log($stateParams);
});
当我们在list页面中点击链接时，进入detail页面，效果如下
5475fa040001985b03310231.jpg
我们在controller中也能打印出传递的参数，这就很有意思了。我们可以在controller中根据传递过来的参数和后台服务器进行通信然后把返回的结果绑定在scope上，页面是不是就可以显示出来了呢，比如这样
1
2
3
4
5
6
7
myModule.controller('DetailController', function($scope,$stateParams){
console.log($stateParams);
$http.post('API_URL',{params:$stateParams})
.success(function(data,status,headers,config){
$scope.content = data;
});
})
我们通过http服务把$stateParams发送到后台，然后把返回的数据绑定在$scope.content上，detail.html中的{{content}}是不是就可以跟着变化了呢？
------------------------------------------------------------------------
今天就暂时写这么多，以上是最近实践路由的一些经验，但是路由的用法还可以更灵活，这需要我们掌握更多这方面的内容。
PS:今天有门课期末前两天不得不预习了整本书，缺了两天，但是我觉得应该反思，养成一个好习惯不容易，不应该为自己找各种理由，而且目测一般都挂科了……时间虽然紧，但挤挤肯定还是有的！
2014-11-27 回复 1
PHPBird
今天来说一点angularjs中看起来很简单但是实践起来又有不少问题的ng-class吧
------------------------------------------------------------------------
不过还是先说一下和angular无关的一个js的小坑，不知道大家遇到过没有，就是json格式的文件。之前一直都在js中定义json数组，或者从php后台用json_encode编码后直接返回，从没有自己写过json格式的数据，今天就遇到点麻烦。
在js中定义json数组这么写就好了：
1
var arr = [{a:1,b:2},{a:5,b:10}];
但是在json文件中千万不能这么写
1
[{a:1,b:2},{a:5,b:10}]
必须给key加上引号才行哦。今天调试好久才发现这个问题，也算个教训吧……
------------------------------------------------------------------------
然后说ng-class这个东西，老师讲的时候一句带过，用的时候还是需要费些时间的。
我总结了一下通过ng-class给元素动态地加class有4种做法，下面一个一个来说。
先看一下官方的说明
547747ed00019d2705000171.jpg
不知道大家能不能看清，给个链接吧https://code.angularjs.org/1.3.0-beta.11/docs/api/ng/directive/ngClass
大致翻译一下就是说ng-class指令有3中操作方式，通过ng-class等于的表达式计算出来的值的类型来决定是哪种
方式1： 当它的值为一个字符串时，它就会把用空格分开的字符串加到class中
方式2： 当值为一个数组时，它每个字符串元素都会被加到class中
方式3： 当值为一个对象时(key=>value)，把value为true的key加到class中
首先是最不推荐的
1
2
3
4
5
6
7
<div ng-class="{{myclass}}"></div>
....
<script>
function someController($scope){
$scope.myclass = "xxx";
}
</script>
上面这种方法效果上来说没问题，但是完全没必要用ng-class，普通的也能实现这个效果。而且在controller中控制样式总感觉有点儿别扭……
然后说另一种用法
1
<div ng-class="{true :'red', false :'green'}[someVariable]"></div>
这种用法就是说variable为true时，就给元素加上red这个class，如果variable为false就加上green这个class，这个在逻辑比较简单的时候还是蛮好用的。
下一种适合需要添加多个类的时候，也就是ng-class的值为一个对象
1
2
3
4
5
6
<p ng-class="{strike: deleted, bold: important, red: error}">Map Syntax Example</p>
<input type="checkbox" ng-model="deleted"> deleted (apply "strike" class)
<br>
<input type="checkbox" ng-model="important"> important (apply "bold" class)
<br>
<input type="checkbox" ng-model="error"> error (apply "red" class)
上面代码ng-class就是一个对象，我们把deleted,important,error进行双向数据绑定，当我们在checkbox勾选时，它们变为true，然后对应的key就被加到class中，效果图
547749e500016b1f02880112.jpg
还有一种就是数组类型的，数组都每个字符串元素都会被加到class中
1
2
3
4
5
6
<p ng-class="[style1, style2, style3]">Using Array Syntax</p>
<input ng-model="style1" placeholder="Type: bold, strike or red">
<br>
<input ng-model="style2" placeholder="Type: bold, strike or red">
<br>
<input ng-model="style3" placeholder="Type: bold, strike or red">
当我们在样式中定义好bold,strike,red；类的样式后，我们输入这些字符串就会出现效果
54774a860001390801760135.jpg
大概就是这几种用法，我推荐大家用对象来添加对象，那样最好控制逻辑也清楚。
------------------------------------------------------------------------------
今天就分享这些吧，希望对大家有些帮助
2014-11-28 回复 1
purple_yao
总结得很好，谢谢分享出来。哈哈
2014-11-26 回复 0
flyysr
谢谢分享，我也在学这个，可以交流
2014-12-24 回复 0
em_heqian
谢谢分享心得 很有帮助
2015-01-14 回复 0
我好吗
感谢分享，看完之后了解很多
2015-03-17 回复 0
___Qie听风吟
controller如果被实例化过会有缓存的吗？
比如说我先进入index页，然后再点击登陆页，完成后自动跳到index页。但是index页的controller没有像第一次进出时数据的初始化
有什么办法让controller重新加载么
用的ui-router来做路由
2015-04-22 回复 0
菠萝小萝卜
哥们，你这问题解决了没？
#12015-09-21 回复
catdp
多谢分享，帮助很大！
2015-05-10 回复 0
TLE
谢谢分享，希望继续求教
2015-05-21 回复 0
chifanqu
请问大神ui-router能实现动画吗？
用ng-router时候，页面会自动获得ng-enter这个属性，ui-router可以实现吗
2015-06-01 回复 0
hapiman
可以分享哈你的代码么
2015-06-15 回复 0
飘逝的绝唱
感觉写的前后不连贯 可能是笔记的原因 跳跃性比较强 按照步骤没办法进行 只能给已经懂的人 加深印象
2015-06-18 回复 0
飘逝的绝唱
不过整体来说 是对大漠课堂的细致讲解
2015-06-18 回复 0
老徐徐
不错，写的很好
1天前
分享到：
发表评论
-
Angularjs: How to display loading-icon when using 'resolve' in $routeProvider?
2015-12-04 17:28 112333down votefavorite ... -
带你走近AngularJS - 基本功能介绍
2015-12-01 18:15 729带你走近AngularJS系列： 带你走近Angular ... -
angularjs过滤器(number)
2015-12-01 10:37 1198摘要 angularjs过滤器number，用来精确浮点数 ... -
angularjs 的select设置默认值
2015-11-02 15:39 3013myAppModule.controller ... -
AngularJS 验证信息框架的封装
2015-10-31 16:15 1280AngularJS 的表单验证规则 angular ... -
angularjs reset input file and filter file
2015-10-31 11:51 1805文件上传开发模板 <form id="up ... -
angular.foreach 循环方法使用指南
2015-10-29 10:21 1267angular有自己的生命周期。循环给一个 angul ... -
AngularJS 最常用的八种功能
2015-10-22 17:54 987本文地址：http://zhaoyanblog.com/ar ... -
AngularJS select详细用法
2015-10-22 17:51 2159select 是 AngularJS 预设的一组direc ... -
angularjs 密码一致性校验
2015-10-19 11:29 776angularjs 校验密码字段一致性 Js代 ... -
AngularJS去掉的URL里的#号
2015-10-14 18:57 841时间 2014-08-14 21:59:38 粉丝日 ... -
AngularJS ui-router (嵌套路由)
2015-10-14 16:50 792阅读目录 介绍 背景 实战 An ...
相关推荐
笔记部分可能涵盖了作者在学习过程中的理解、心得和常见问题解决方案，对于初学者来说，这是一个宝贵的资源，可以帮助快速理解和解决实际问题。 在学习AngularJS时，建议先从基础概念入手，然后逐步深入到高级特性...
在这款自习程序中，AngularJS可能被用来处理用户交互、路由管理和数据模型的动态更新。 Ionic框架是专为移动应用设计的HTML5开发框架，它结合了AngularJS和Cordova（PhoneGap）的技术，允许开发者使用Web技术（HTML...
其功能包括让用户创建和共享笔记，这表明该应用具有用户交互性，用户不仅可以保存自己的学习心得，还能分享给其他用户，从而促进知识交流和社区互动。 **标签分析：** "JavaScript"标签揭示了这个项目的核心编程...
总的来说，angular-utils-ui-breadcrumbs提供了一个简单易用的面包屑导航解决方案，通过与UIRouter的结合，可以轻松地在AngularJS应用中实现具有动态路由信息的面包屑导航。通过自定义配置和模板，开发者可以灵活地...
Alibaba_Java_Coding_Guidelines-2.2.3.0x
【ABB机器人】-IRB460机器人维护信息V1.pdf
内容概要：本文详细介绍了新能源汽车VCU（车辆控制单元）控制器的开源项目，涵盖从应用层代码到底层代码、原理图、PCB设计、通信协议及控制策略等多个方面。应用层代码展示了如何根据电池电量调整车辆行驶模式，底层代码涉及硬件驱动如GPIO控制和ADC采样配置。硬件设计部分包括详细的原理图和PCB布局，确保系统的稳定性和可靠性。通信协议采用CAN网络，确保数据可靠传输，控制策略则涵盖了能量回收、扭矩控制等关键技术。丰富的文档资料和测试用例为开发人员提供了宝贵的学习和开发资源。 适合人群：新能源汽车开发人员、硬件工程师、嵌入式软件工程师、学生及研究人员。 使用场景及目标：帮助开发人员深入了解新能源汽车VCU控制器的工作原理和技术细节，加速项目开发进程，降低开发难度。无论是初学者还是有经验的专业人士，都可以从中受益。 其他说明：该项目不仅提供了完整的源代码和硬件设计文件，还包括详细的测试用例和故障处理方案，使得VCU开发变得更加透明和可复现。
详解DeepSeek的十个安全问题.pdf
《网络传播技术与实务》第10章-握在手中的网络——移动通信与无线网络技术.ppt
《计算机专业英语》chapter9-Communication-by-Avatars.ppt
性能测试工具Xrunner的使用手册
内容概要：本文深入探讨了基于自抗扰控制（ADRC）的永磁同步电机（PMSM）矢量控制调速系统的仿真方法及其优势。首先介绍了模型搭建，包括DC直流电压源、三相逆变器、永磁同步电机、采样模块、Clark、Park、Ipark以及SVPWM等关键组件。接着详细解析了ADRC在电流环和转速环中的应用，展示了其通过扩张状态观测器（ESO）实现的高精度扰动观测与补偿机制。文中还提供了部分MATLAB代码示例，如SVPWM模块和ADRC控制器的具体实现。仿真结果显示，ADRC相比传统PI控制器，在突加负载时表现出更好的稳定性和更快的响应速度，且不存在积分饱和问题。此外，文章讨论了一些实际应用中的注意事项和技术挑战。 适合人群：从事电机控制领域的研究人员、工程师及高校相关专业师生。 使用场景及目标：适用于希望深入了解和掌握现代先进电机控制技术的研究人员和工程师。目标是通过仿真平台验证ADRC的有效性，并为实际工程项目提供理论支持和技术指导。 其他说明：尽管ADRC具有诸多优点，但在实际应用中仍需注意参数选择和硬件条件限制等问题。
《网络设备安装与调试(锐捷版)》项目1-配置交换机设备-优化网络传输.pptx
内容概要：本文详细介绍了如何使用Fortran语言在ABAQUS中开发UMAT（用户材料子程序）和VUMAT（显式用户材料子程序），以实现材料损伤断裂弹塑性的自定义建模。文章首先阐述了材料损伤断裂弹塑性的重要性和应用场景，强调了自定义材料子程序在处理复杂材料行为方面的优势。接着，分别展示了UMAT和VUMAT的基本代码结构及其核心计算步骤，如材料参数读取、弹性刚度矩阵初始化、塑性应变增量计算以及应力更新等。此外，还讨论了DISP模型的应用，提供了具体的损伤演化和应力折减方法，并分享了一些实用的调试技巧和注意事项。 适合人群：具备一定ABAQUS使用经验和Fortran编程基础的研究人员和技术人员，尤其是从事材料力学、结构工程等领域的工作人士。 使用场景及目标：适用于需要对特定材料进行精确建模的工程项目，如航空航天、土木建筑等。通过自定义UMAT和VUMAT子程序，能够更好地模拟材料在复杂载荷条件下的损伤演化与断裂过程，提高结构安全性和可靠性评估的准确性。 其他说明：文中不仅提供了详细的代码示例，还分享了许多实践经验，帮助开发者避免常见错误并优化性能。同时提醒读者关注材料参数的正确配置、雅可比矩阵的对称性等问题，确保计算稳定可靠。
V1_3_example.ipynb
安川机器人DX100操作要领书 通用-搬运用途-E.0.pdf
这个是完整源码 SpringBoot + vue 实现 【java毕业设计】SpringBoot+Vue图书馆(图书借阅)管理系统 源码+sql脚本+论文 完整版 数据库是mysql 随着社会的发展，计算机的优势和普及使得阿博图书馆管理系统的开发成为必需。阿博图书馆管理系统主要是借助计算机，通过对图书借阅等信息进行管理。减少管理员的工作，作，同时也方便广大用户对所需图书借阅信息的及时查询以及管理。 阿博图书馆管理系统的开发过程中，采用B / S架构，主要使用Java技术进行开发，结合最新流行的springboot框架。使用Mysql数据库和Eclipse开发环境。该阿博图书馆馆管理系统的开发过程中，采用B / S架构，主要使用Java技术进行开发，结合最新流行的spri管理系统包括用户和管理员。其主要功能包括管理员：首页、个人中心、用户管理、图书分类管理、图书信息管理、图书借阅管理、图书归还管理、缴纳罚金管理、留言板管理、系同时也方便广大用户对所需图书借阅信息的及时查询以及管理。 阿博图书馆管理系统的开发过程中，采用B / S架构，主要使用Java技术进行开发，结合最新流行的springboot框架。使用Mysql数据库和Eclipse开发环境。该阿博图书馆管理系统包括用户和管理员。其主要功能包括管理员：首页、个人中心、用户管理、图书分类管理、图书信息管理、图书借阅管理、图书归还管理、缴纳罚金管理、留言板管理、系统管理，用户：首页、个人中心、图书借阅管理、图书归还管理、缴纳罚金管理、我的收藏管理，前台首页；首页、图书信息、公告信息、留言反馈、个人中心、后台管理等功能。 本论文对阿博图书馆管理系统的发展背景进行详细的介绍，并且对系统开发技术进行介绍，然后对系统进行需求分析，对阿博图书馆管理系统业务流程、系统结构以及数据都进行详细说明。用户可根据关键字进行查找自己想要的信息等。
内容概要：本文详细介绍了一个基于YALMIP和MATLAB的微电网优化调度模型，旨在帮助新手理解和应用微电网优化调度的基本概念和技术。模型综合考虑了蓄电池管理、市场购电售电约束以及功率平衡等因素，以实现系统总费用最低为目标。文中提供了详细的MATLAB代码示例，涵盖变量定义、约束条件建立、目标函数设定及优化求解过程，并附带了调试建议和可视化方法。此外，还讨论了一些常见的错误及其解决办法，如充放电互斥约束、功率平衡约束等。 适合人群：对微电网优化调度感兴趣的初学者，尤其是有一定MATLAB基础的学生或研究人员。 使用场景及目标：适用于希望快速掌握微电网优化调度基本原理的学习者，通过动手实践加深对相关理论的理解。具体应用场景包括但不限于：学术研究、课程作业、个人兴趣项目等。 其他说明：该模型不仅有助于理解微电网的工作机制，还可以为进一步探索复杂的微电网优化问题奠定坚实的基础。
内容概要：本文详细介绍了如何利用MATLAB搭建卷积神经网络(CNN)，用于处理具有10个输入特征和3个输出变量的数据预测任务。首先进行数据预处理，包括数据读取、归一化以及训练集和测试集的划分。接着设计了一个包含多个卷积层、批量归一化层、ReLU激活函数层和全连接层的网络架构，确保能够有效提取特征并完成多输出预测。训练过程中采用Adam优化算法，并设置了合理的超参数如最大迭代次数、批次大小和初始学习率等。最终通过预测和反归一化步骤得到模型性能评价指标MAE和R²，展示了良好的预测效果。 适合人群：具有一定MATLAB编程基础和技术背景的研究人员或工程师，尤其是那些从事数据分析、机器学习领域的专业人士。 使用场景及目标：适用于需要解决多输入多输出预测问题的实际项目中，比如工业生产过程监控、设备故障诊断等领域。目的是帮助用户掌握使用MATLAB实现CNN的方法论，从而提高工作效率和解决问题的能力。 其他说明：文中提供了完整的代码片段供读者参考实践，同时针对可能出现的问题给出了实用性的建议，如调整批量大小、降低学习率等方法来应对训练不稳定的情况。此外还提到了一些改进方向，例如改变卷积核尺寸或者引入空洞卷积以增强模型表现。
机器人概要（外形图、目录的阅读方法）20120428.ppt