AngularJS笔记(模块设置,SPA)
若有不妥,请多指教
目录:
1.模块设置
2.路由/SPA(Single Page Application)/单页面app
3.AngularJS中使用JQuery
4.AngularJS使用的流程概览
1.模块设置
AngularJS执行流程
1.1配置
通过config方法实现对模块的配置,AngularJS中的服务大部分都对应一个“provider”,用来执行与对应服务相同的功能或对其进行配置
看2个配置的基本使用例子:
<body>
<div ng-controller="Controller1">
<!--唱歌啦啦啦-->
{{name|sing}}
</div>
<script src="angular.min.js"></script>
<script>
var App = angular.module('App', []);
App.controller('Controller1',['$scope','$log',function ($scope,$log) {
$scope.name = '唱唱歌歌';
$log.log('日志');
$log.warn('警告');
//已经关闭,不再生效
$log.debug('调试');
}]);
//内置服务log与filter的配置,因为是数组,可以一次配置多个
App.config(['$logProvider','$filterProvider',function ($logProvider,$filterProvider) {
//1.关闭debug级别信息提示
$logProvider.debugEnabled(false);
//2.添加一个过滤器register这个函数
$filterProvider.register('sing',function () {
return function (input) {
return input[0] + input[2] + '啦啦啦';
}
})
}]);
</script>
</body>
1.2运行
服务也是模块形式存在的,
前面都是将服务做为依赖注入进去然后调用,
除此之外还可以用AngularJS的run方法来直接运行相应的服务模块
举个栗子:
<div ng-controller="Controller1">
<!--显示:哈哈哈-->
{{name}}
</div>
<script src="angular.min.js"></script>
<script>
var App = angular.module("App",[]);
App.controller("Controller1",["$scope",function ($scope) {
//注释掉下面这行将显示啦啦啦,即与init方法一样的作用
$scope.name = "哈哈哈";
}]);
//不用依赖注入,直接运行的一种方式,并且这种方式的模块是最先运行的
//$rootScope根作用域
App.run(["$location","$rootScope",function ($location,$rootScope) {
//1.打印当前地址
console.log($location);
//2.根作用域
$rootScope.name = "啦啦啦";
}]);
</script>
</body>
2.SPA
SPA（Single Page Application）指的是通过单一页面展示所有功能,
通过Ajax动态获取数据然后进行实时渲染,结合CSS3动画模仿原生App交互,
然后再进行打包(使用工具把Web应用包一个壳,这个壳本质上是浏览器)变成一个“原生”应用.
实现这种功能的技术也叫"路由",
因为我们要求当前的页面不换,但是内容换了,url换了,相当于重新连接了一个路由器
目的是为了增强用户体验,比如当用户的网络不太好的时候,如果点击新的url切换的话,可能会出现长时间的白屏
但是如果我们换"路由",即使下一个页面没有加载出来,也会停留在当前页面,比白屏要强一点
并且页面少了,可以提升手机的性能
实现原理:
在开发单页面应用时,所有功能都在同一页面完成,所以无需切换URL地址（即不允许产生跳转）
但Web应用中又经常通过链接（a标签）来更新页面（视图）,
所以当点击链接时要通过锚点（页内跳转）实现这一点
实现单页面应用需要具备：
1、只有一个页面
2、链接使用锚点
2.1 JS原生实现
.html文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SPA</title>
</head>
<body>
<div class="wrapper">
<ul>
<li><a href="#one">one</a></li>
<li><a href="#two">two</a></li>
<li><a href="#three">three</a></li>
</ul>
</div>
<div class="content">content</div>
</body>
<script>
//onhashchange 事件在当前 URL 的锚部分(以 '#' 号为开始) 发生改变时触发
// window.onhashchange = function () {
// console.log("锚点改变了");
// };
//下面这种写法也可以
window.addEventListener('hashchange',function () {
console.log("锚点改变了");
//监听锚点变化发送请求,获得不同的数据刷新视图,达到换路由的目的
//根据哈希值获取锚点信息
var hash = location.hash;
//处理#
hash = hash.slice(1);
//配置ajax
var ajx = new XMLHttpRequest;
//拼接锚点
ajx.open('get','xxx.php?hash='+hash);
ajx.send(null);
ajx.onreadystatechange = function () {
if(ajx.readyState == 4 && ajx.status == 200)
{
ajx.responseText;
}
}
});
</script>
</html>
.php文件:
<?php
//接收传过来的hash值
$hash = $_GET['hash'];
switch($hash){
case 'one':
echo '<h1>第一页</h1>';
break;
case 'two':
echo '<h1>第二页</h1>';
break;
case 'two':
echo '<h1>第三页</h1>';
break;
default:
break;
}
?>
2.2AngularJS实现
.html文件:
<!DOCTYPE html>
<html lang="en" ng-app="App">
<head>
<meta charset="UTF-8">
<title>安哥拉SPA</title>
</head>
<body>
<a href="#/one">one</a>
<a href="#/two">two</a>
<a href="#/three/3">three</a>
<a href="#/four">four</a>
<div class="content">
<!--占位符-->
<!--把template中的内容呈现出来-->
<div ng-view></div>
</div>
</body>
<script src="angular.min.js"></script>
<!--需要引入独立的库,因为不一定谁都用-->
<script src="angular-route.js"></script>
<script>
//依赖注入ngRoute模块
var App = angular.module('App',['ngRoute']);
//配置路由模块才能正常使用
App.config(['$routeProvider',function ($routeProvider) {
//当... 意思是根据对应锚点做出对应的动作
//当锚点是根路由路径
$routeProvider.when('/',{
}).when('/one',{
//当锚点是/one
template:'<h1>第一个</h1>'
}).when('/two',{
//当锚点是/two
//template 是字符串形式的view模板
template:'<h1>第二个</h1>'
//id就类似于形参的参数
}).when('/three/:id',{
//当锚点是/three
//templateUrl 是引入外部view模板
//controller 是view模板所属的控制器
templateUrl:'three.html',
controller:'Controller1'
}).otherwise({
//剩余其他的锚点都会转到指定的锚点
redirectTo:'/one'
})
}]);
//第三个锚点 创建控制器从服务器请求数据刷新view
//注入$routeParams模块可以接收参数
App.controller('Controller1',['$http','$scope','$routeParams',function ($http,$scope,$routeParams) {
//打印参数
console.log($routeParams);
//AJAX获取数据
$http({
url:'xxxx.php',
method:'get'
}).success(function (info) {
//把info值传到three.html中显示
$scope.threeContent = info;
})
}]);
</script>
</html>
three.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第三个</title>
</head>
<body>
<div>
<a href="#">第三个</a>
<div >{{threeContent}}</div>
</div>
</body>
</html>
xxxx.php
<?php
echo "显示在'第三个'a标签下面";
?>
图1
图2
图2在浏览器的锚点后?加上以键值对方式输入参数,就可以打印出来了
图3
当更改<a href="#/three/3">three</a>
与when('/three/:id',{...})时也可以获得参数3
图4
3.AngularJS中使用JQuery
在没有引入jQuery的前提下AngularJS实现了简版的jQuery Lite,
通过angular.element函数可以将一个DOM元素转成jQuery对象,
如果引提前引入了jQuery则angular.element则完全等于jQuery或者$
例如:
//原生DOM对象
var box = document.querySelector('.test');
//转成jQuery对象
var boxx = angular.element(box);
//改变颜色
boxx.css = ('color','red');
不太经常用,毕竟可以直接使用jQuery
4.AngularJS使用的流程概览
开发步骤:
1>引入
2>指定ng-app
3>创建模块var app = angular('name',[依赖模块])
4>按模块的思想开发,将具有类似功能的程序归类
5>将使用控制器归类,所有指令归类
6>在使用时将这个独立的模块作为app的依赖使用
7>通过块配置和when筛选执行哪一个模块
8>创建控制器app.controller
流程概览
简单的文件夹命名规则
