jquery 比较直白，什么都是操作dom 节点.

angularjs 就好比 thinkphp, ci 等框架，有自己约定的格式和方式。需要遵循它的规则，研究中。。。

比如说我，用了很长事件的jquery选择器，都已经忘了javascript 原生的dom选择器怎么使用

所以为了方便还是把jquery加了进来，毕竟单纯的用angularjs来开发项目还是不太靠谱。

1.怎么使用模版

　　index.html

　　

  1. <!doctype html>
  2. <html ng-app="ngRouteExample">
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <meta name="fragment" content="!" />
  6.         <title>My HTML File</title>
  7.         <link rel="stylesheet" href="css/bootstrap.min.css">
  8.         <script src="js/jquery-2.1.1.min.js"></script>
  9.         <script src="js/angular.min.js"></script>
  10.         <script src="js/angular-route.min.js"></script>
  11.         <script src="js/common.js"></script>
  12.         <script type="text/javascript">
  13.             $('head').append('<base href="' + window.location.pathname + '" />');
  14.         </script>
  15.     </head>
  16.     <body>
  17.         <div ng-controller="MainController">
  18.             Choose:
  19.             <a href="#/Book/Moby">Moby</a> |
  20.             <a href="#/Book/Moby/ch/1">Moby: Ch1</a> |
  21.             <a href="#/Book/Gatsby">Gatsby</a> |
  22.             <a href="#/Book/Gatsby/ch/4?key=value">Gatsby: Ch4</a> |
  23.             <a href="#/Book/Scarlet">Scarlet Letter</a><br/>
  24.  
  25.             <div ng-view></div>
  26.  
  27.             <hr />
  28.             <pre>$location.path() = {{$location.path()}}</pre>
  29.             <pre>$route.current.templateUrl = {{$route.current.templateUrl}}</pre>
  30.             <pre>$route.current.params = {{$route.current.params}}</pre>
  31.             <pre>$route.current.scope.name = {{$route.current.scope.name}}</pre>
  32.             <pre>$routeParams = {{$routeParams}}</pre>
  33.         </div>
  34.     </body>
  35. </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

  1. angular.module('ngRouteExample', ['ngRoute'])
  2. .controller('MainController', function($scope, $route, $routeParams, $location) {
  3.     $scope.$route = $route;
  4.     $scope.$location = $location;
  5.     $scope.$routeParams = $routeParams;
  6. })
  7.  
  8. .controller('BookController', function($scope, $routeParams) {
  9.     $scope.name = "BookController";
  10.     $scope.params = $routeParams;
  11. })
  12.  
  13. .controller('ChapterController', function($scope, $routeParams) {
  14.     $scope.name = "ChapterController";
  15.     $scope.params = $routeParams;
  16. })
  17.  
  18. .config(function($routeProvider, $locationProvider) {
  19.     $routeProvider
  20.         .when('/Book/:bookId', {
  21.             templateUrl: 'book.html',
  22.             controller: 'BookController'
  23.         })
  24.         .when('/Book/:bookId/ch/:chapterId', {
  25.             templateUrl: 'chapter.html',
  26.             controller: 'ChapterController'
  27.         });
  28. });

注意：一定要加载 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

用惯了jquery, 想用angularjs 还真不好理解的更多相关文章

  1. (十六)JQuery Ready和angularJS controller的运行顺序问题

    项目中使用了JQuery和AngularJS框架,近期定位一个问题,原因就是JQuery Ready写在了angularJS controller之前,导致JQuery选择器无法选中须要的元素(由于a ...

  2. jquery关于on click事件的理解

    jquery关于on click事件的理解 <pre><a style="min-width:60px; margin-left:6px;" wenzhangid ...

  3. Jquery想说爱你不容易

    JQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作.由John Resig在2006年1月的BarCamp NYC上发布第一个版本.目前是由 Dave M ...

  4. 混合使用Jquery Deferred和Angularjs的$timeout（转）

    原文链接:http://my.oschina.net/gejiawen0913/blog/174826 <!DOCTYPE html> <html ng-app="Demo ...

  5. jquery的ajax同步和异步的理解及示例

    之前一直在写JQUERY代码的时候遇到AJAX加载数据都需要考虑代码运行顺序问题.最近的项目用了到AJAX同步.这个同步的意思是当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载,页面出去 ...

  6. Jquery插件之ajaxForm ajaxSubmit的理解用法

      如今ajax满天飞,作为重点的form自然也受到照顾. 其实,我们在平常使用Jquery异步提交表单,一般是在submit()中,使用$.ajax进行.比如:   $(function(){ $( ...

  7. Jquery插件之ajaxForm ajaxSubmit的理解用法（转）

    我们在平常使用Jquery异步提交表单,一般是在submit()中,使用$.ajax进行.比如: $(function(){ $('#myForm').submit(function(){ $.aja ...

  8. jQuery的extend和fn.extend理解

    参考网址:http://www.cnblogs.com/yuanyuan/archive/2011/02/23/1963287.html http://www.cnblogs.com/xuxiuyu/ ...

  9. jquery, jquery-ui, requirejs, bootstrap 的关系理解

    jquery 是 基于 javascript 的一个语法衍生,更方便操作dom, 事件,css 整体来说更好用,更简洁. jquery-ui 是基于 jquery 实现的各种更好看,交互更友好的的界面 ...

随机推荐

  1. <scrapy爬虫>爬取quotes.toscrape.com

    1.创建scrapy项目 dos窗口输入: scrapy startproject quote cd quote 2.编写item.py文件(相当于编写模板,需要爬取的数据在这里定义) import ...

  2. apache反向代理和监听多个端口设置

    修改apache配置文件httpd.conf 一.监听多个端口 在Listen 80后添加监听端口,如 Listen 80 Listen 8080 Listen 8008 二.反向代理设置 1.取消一 ...

  3. Java jmx的使用

    JMX Java Management Extensions,Java管理扩展.本质就是用来监控java语言开发的程序,一般常用于jconsole,java visual VM的监控,今天主要介绍ja ...

  4. table方法也属于模型类的连贯操作方法之一

    table方法也属于模型类的连贯操作方法之一,主要用于指定操作的数据表. 用法 一般情况下,操作模型的时候系统能够自动识别当前对应的数据表,所以,使用table方法的情况通常是为了: 切换操作的数据表 ...

  5. springboot让内置tomcat失效

    一.POM(去除内嵌tomcat后,需要添加servlet依赖) <dependency> <groupId>org.springframework.boot</grou ...

  6. docker 安装 ElasticSearch

    docker pull docker.elastic.co/elasticsearch/elasticsearch:5.6.9 docker images docker run -e ES_JAVA_ ...

  7. 【JEECG-Boot 技术文档】新手入门教程

    Jeecg-Boot入门教程必看(新手学习) 1.开发环境搭建 http://jeecg-boot.mydoc.io/?t=345670 开发工具 :https://pan.baidu.com/sha ...

  8. windows环境下运行Elasticsearch

    1.Elasticsearch下载地址:https://github.com/medcl/elasticsearch-rtf 直接下载ZIP包: 2.配置JAVA环境 jdk64位地址:jdk-win ...

  9. shell对文件，文件夹的操作

    x=$ OUTFILENAME="output_${x}.sql" if [ -f $OUTFILENAME ];then rm $OUTFILENAME fi 如果文件存在则删除 ...

  10. pycharm优化

    一.版本选择 建议安装5.0版本,因为好注册,这个你懂得. 下载地址: https://confluence.jetbrains.com/display/PYH/Previous+PyCharm+Re ...