-- inject our views using ng-view --> <! -- each angular controller applies a different class here --> <div class="page {{ pageClass }}" ng-view 改变了的值会被添加到index.html文件中的ng-view中,这样我们的每一个页面都有了不同的类名。通过这些不同的类名,我们可以为不同的页面添加不同的动画效果。
ng-view的实现原理,是根据路由的切换,动态编译html模板——$compile(html)(scope)。 讲解 路由功能是由 routeProvider服务 和 ng-view 搭配实现,ng-view相当于提供了页面模板的挂载点,当切换URL进行跳转时,不同的页面模板会放在ng-view所在的位置; ></ng-view> <! -- <div ng-view >
以下是二者Script的最初调用顺序,
在public文件夹下的index.html中:
1 <body ng-view>
2 <! 调用顺序中,如果你把JQuery放在了Angular JS前面调用(例如本文开头时我的做法),Angular JS会检查是否有JQuery存在,如果JQuery存在,则不使用内部的JqLite,因此每次处理ng-view 因此解决方法是,
把JQuery的调用仍旧放在Angular JS的前面,但是把脚本都放在ng-view的外面,例如放在
, redirectTo: string, function, resolve: object<key, function> }); 参数说明: template: 如果我们只需要在 ng-view 中插入简单的 HTML 内容,则使用该参数: .when('/computers',{template:'这是电脑分类页面'}) templateUrl: 如果我们只需要在 ng-view 中插入 HTML computers', { templateUrl: 'views/computers.html', }); 以上代码会从服务端获取 views/computers.html 文件内容插入到 ng-view /about">About
Hello World
controller:function($scope) {// TODO /regist模板控制器} }).otherwise("/index"); }]); 在HTML页面中,可以通过链接的形式进行访问,通过ng-view /regist">注册 <ng-view></ng-view> 以上就是一个路由的简单配置,其中主要涉及到几个API的使用 when(url, {option}):对用户访问的url路径进行
routeProvider myApp.config(['$routeProvider',function($routeProvider){ $routeProvider //根据哈希值确定ng-view ng-click='$location.path("bbb")'>分页一 分页二 <div ng-view
<div ng-view>
/blabla">其他 <div ng-view>
li><ahref="#/printers">打印机
我们知道ng-view是通过$routeProvider来订制页面路由规则,这个路由规则在phonecat项目源码中是这样定义的: 151029319647655.png 为了让页面跳转之前执行一些事情 我们可以对ng-view应用AngularJS动画,在phone-cat项目中,animation.css中的下列代码实现了切换页面的淡入淡出动画: .view-frame.ng-enter, .view-frame.ng-leave
> </head> <body ng-app="myMod"> <div ng-view>
> </head> <body ng-app="myMod"> <div ng-view>
AngularJS 添加/移除 class 的指令: ng-show ng-hide ng-class ng-view ng-include ng-repeat ng-if ng-switch ng-show
1:搭建页面: 2.指令ng-view,没有表达式; Image.png 3.配置出的app: Image.png 4.依赖的是路由的模块: 5.重定向:前面的配好了,检测到不匹配:就重新出发路由:
controller.js"></script> 7 <script src="js/angularMainApp.js"></script> 8 </head> 9 <body ng-view 最后查资料和文档,才发现只有页面中有ng-view,才会起作用。原来是这样。。。坑爹啊。。。 本文只介绍一个很简单的Angular JS + Express JS网站搭建示例。
这是我做的第一次做单页应用,也是第一次在正式项目里用Angular,所以遇到了不少坑,记录如下 页面切换时(非页面刷新,只是hash发生变化,ng-view里的内容根据路由进行更新),用jQuery抓取新页面的元素抓不到
src="js/services.js"></script> <script src="js/directives.js"></script> </head> <body> <div ng-view
示例代码如下:<div ng-view>
/head> <body ng-controller="bodyCtl"> <button class="btn" ng-click="test1()">click me</button> <div ng-view