用惯了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