用惯了jquery, 想用angularjs 还真不好理解
jquery 比较直白，什么都是操作dom 节点.
angularjs 就好比 thinkphp, ci 等框架，有自己约定的格式和方式。需要遵循它的规则，研究中。。。
比如说我，用了很长事件的jquery选择器，都已经忘了javascript 原生的dom选择器怎么使用
所以为了方便还是把jquery加了进来，毕竟单纯的用angularjs来开发项目还是不太靠谱。
1.怎么使用模版
index.html
<!doctype html> <html ng-app="ngRouteExample"> <head> <meta charset="utf-8"> <meta name="fragment" content="!" /> <title>My HTML File</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <script src="js/jquery-2.1.1.min.js"></script> <script src="js/angular.min.js"></script> <script src="js/angular-route.min.js"></script> <script src="js/common.js"></script> <script type="text/javascript"> $('head').append('<base href="' + window.location.pathname + '" />'); </script> </head> <body> <div ng-controller="MainController"> Choose: <a href="#/Book/Moby">Moby</a> | <a href="#/Book/Moby/ch/1">Moby: Ch1</a> | <a href="#/Book/Gatsby">Gatsby</a> | <a href="#/Book/Gatsby/ch/4?key=value">Gatsby: Ch4</a> | <a href="#/Book/Scarlet">Scarlet Letter</a><br/> <div ng-view></div> <hr /> <pre>$location.path() = {{$location.path()}}</pre> <pre>$route.current.templateUrl = {{$route.current.templateUrl}}</pre> <pre>$route.current.params = {{$route.current.params}}</pre> <pre>$route.current.scope.name = {{$route.current.scope.name}}</pre> <pre>$routeParams = {{$routeParams}}</pre> </div> </body> </html>
book.html
1 controller: {{name}}<br /> 2 Book Id: {{params.bookId}}<br />
chapter.html
1 controller: {{name}}<br /> 2 Book Id: {{params.bookId}}<br /> 3 Chapter Id: {{params.chapterId}}
common.js
angular.module('ngRouteExample', ['ngRoute'])
.controller('MainController', function($scope, $route, $routeParams, $location) {
$scope.$route = $route;
$scope.$location = $location;
$scope.$routeParams = $routeParams;
})
.controller('BookController', function($scope, $routeParams) {
$scope.name = "BookController";
$scope.params = $routeParams;
})
.controller('ChapterController', function($scope, $routeParams) {
$scope.name = "ChapterController";
$scope.params = $routeParams;
})
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/Book/:bookId', {
templateUrl: 'book.html',
controller: 'BookController'
})
.when('/Book/:bookId/ch/:chapterId', {
templateUrl: 'chapter.html',
controller: 'ChapterController'
});
});
注意：一定要加载 angular-route.min.js(因为 angularjs 下载的时候并不包括angular.min.js);
还有
$('head').append('<base href="' + window.location.pathname + '" />');
具体为什么可能是因为我的文件夹不在根目录下把，还是加上为好。
2.ajax全局事件怎么使用，比如说远程 提交或者获取数据的时候等待效果，怎么实现。
3.如果别人只获取到我们的url 怎么显示到这个页面。因为加载顺序等问题
使用锚点
这样就解决 url不能复制后粘贴不管用的问题了
实现原理就是 webserver 能识别url地址，识别后定位到 根目录，然后我们的 浏览器才能加载html和js
在js中处理 这样的路由即可。
参考文档 http://www.yearofmoo.com/2012/11/angularjs-and-seo.html
