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

 controller: {{name}}<br />

 Book Id: {{params.bookId}}<br />

chapter.html

 controller: {{name}}<br />

 Book Id: {{params.bookId}}<br />

 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

用惯了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. 最全Linux常用命令大全

    查看系统系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 - (SMB ...

  2. cv2 & PIL(pillow)显示图像

    = OpenCV和PIL中显示图像方式不一样,且支持的格式也不同 = cv在显示图像时是自定义的显示窗口,而PIL中显示是调用操作系统中的默认打开程序 如: import cv2 im = cv2.i ...

  3. 2018-11-19-WPF-在image控件用鼠标拖拽出矩形

    title author date CreateTime categories WPF 在image控件用鼠标拖拽出矩形 lindexi 2018-11-19 15:35:13 +0800 2018- ...

  4. css,js文件后面加一个版本号

    由于前几天,更新了项目,更新的文件有js文件,今天客人截图过来,我发现修改之后的效果没有显示出来,我回复说清理浏览器缓存.到了晚上,客人找老板,说还没有处理到這个,说客人不懂這个.所以想到之前自己为了 ...

  5. WPF 免费控件库（2）

    最近在逛园子的时候发现的园友分享或提及的WPF控件库~ (1) Bootstrap WPF Style,Bootstrap风格的WPF样式 转:http://www.cnblogs.com/tsliw ...

  6. Eclipse 常用快捷键 (动画讲解)【转】

    Eclipse 常用快捷键 (动画讲解)[转] Eclipse有强大的编辑功能, 工欲善其事,必先利其器, 掌握Eclipse快捷键,可以大大提高工作效率. 小坦克我花了一整天时间, 精选了一些常用的 ...

  7. 廖雪峰Java11多线程编程-3高级concurrent包-2ReadWriteLock

    ReentrantLock保证单一线程执行 ReentrantLock保证了只有一个线程可以执行临界区代码: 临界区代码:任何时候只有1个线程可以执行的代码块. 临界区指的是一个访问共用资源(例如:共 ...

  8. index方法用于数据集的强制索引操作

    index方法为3.2.3版本新增,用于数据集的强制索引操作,例如: $Model->index('user')->select(); 对查询强制使用user索引,user必须是数据表实际 ...

  9. 主机入侵防御系统(HIPS)分析

    主机入侵防御系统(Host Intrusion Prevent System,HIPS)是近几年出现并迅速发展的新兴产物,与传统意义的防火墙和杀毒软件不同,它并不具备特征码扫描和主动杀毒等功能,所以想 ...

  10. Java 使用JDBC连接MySQL

    //  这学期本来不打算深入学习Java的,课上的小项目也就随便写了一个简单计算器和扫雷游戏就糊弄过去.可是我们的Eliza老师偏偏什么都讲了,考虑到期末也会涉及到JDBC的内容,前些天试着学习一番. ...