发表于: 2017-05-25 23:24:54
1 908
今天完成的事情:
写后台页面
学习ngRoute.
明天计划的事情:
配置ngRoute页面。
遇到的问题:
依赖注入看不太懂。。
收获:
1,ng-click和ng-hide实现下拉菜单的切换:
<div data-ng-init="hide=true" data-ng-click="hide=!hide">
<div class="head">list</div>
<ul class="body" data-ng-hide="hide">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
使用hide=!hide,使hide的值在true和false之间变换。
2,通过添加ngAnimate依赖,可实现动画效果。
为ng-app添加ngAnimation属性后,可将ng-hide等动画属性作为class的值来设置它们的样式。
3,浏览器会忽略url中#后的内容,ngRoute路由通过#+标记帮助我们区分不同逻辑页面,并将其绑定到对应的控制器上。
module.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/'page1,{template:'page1'})
.when('/page2',{template:'page2'})
.when('/page3',{template:'page3'})
.otherwise({redirectTo:'/page3'});
}]);
$routeProvider 为我们提供了 when(path,object) & otherwise(object) 函数按顺序定义所有路由,函数包含两个参数:
a,第一个参数是 URL 或者 URL 正则规则。
b,第二个参数是路由配置对象。
路由器配置对象可选属性为:
a,template:
如果我们只需要在 ng-view 中插入简单的 HTML 内容,则使用该参数。
b,templateUrl:
如果我们只需要在 ng-view 中插入 HTML 模板文件,则使用该参数。
c,controller:
function、string或数组类型,在当前模板上执行的controller函数,生成新的scope。
d,controllerAs:
string类型,为controller指定别名。
e,redirectTo:
重定向的地址。
f,resolve:
指定当前controller所依赖的其他模块。
评论