angular简介
- angular是一个框架，诸多类库的集合，以数据和逻辑为核心；
MVC
- modal-view-controller 模型-视图-控制器
- 模型：服务端专门处理后台传入的数据；一般指操作数据库
- 控制器：将服务端处理好的数据传给前端； 连接模型和视图的桥梁；
- 视图：将内容、数据呈现给；HTML展示
- 使用mvc框架，会更高效，易于管理和高效
AngularJS应用
- 在任意DOM元素上使用一个属性 ng-app,就可以定义一个AngularJS的应用；
- ng-app属性所有的DOM元素所包含的所有子元素都属于应用的一部分；
- 引用了angular框架下，会引入一个全局对象，angular；
- 在此对象下有若干对象，其中angular.module()可以实例化一个对象；
-
angular.module('App',[])两个参数：- 1：模块化名称
- 2：依赖;[]暂时不依赖任何对象
- 控制器
App.controller()两个参数- 1：名称
- 2：依赖;
- 关于依赖，依赖的数组里，最后一个单元必须是一个函数
App.controller('DemoCtrl',[’$scope‘,function($scope){}])
- $scope 就是我们所需要的 M；
angular的内置指令
- ng-show 是通过 display：none 和 display：block来决定显示和隐藏的
- ng-if 如果ng-if='false',那么在HTML中就没有了这个DOM节点了；
- ng-class 值得类型可以是对象，并且此对象的属性是真是存在的类样式，属性值决定了此属性是否应用，true为应用，false不应用
ng-class={box:true,red:true}为应用box这个类样式 -
ng-include = “'aside.html'”;需要将aside.html用''包裹起来的；- 浏览器端 JS不能够读取本地文件，因为浏览器JS是运行在客户端的，出于安全考虑，是不允许读取用户磁盘文件的；
- ng-include是通过ajax发出请求，得到数据的；
- 表单禁用
disabled,只要属性存在，不管是什么值，都表示禁用-
input type='text' disabled 或者disabled=''true/false；只要存在都是禁用 - 在angular中，
ng-disabled = 'true'表单禁用；ng-disabled = 'false'表单应用
-
- 无值属性:都可以进行设置属性值；
- ng-disabled
- ng-readonly
- ng-checked
- ng-selected
- ng-src 和 ng-href ;如果在HTML中直接写src=《path》，虽然在解析完成后地址会加载，但是会先报错；
Angular自定义指令
- angular是一个模块实例
- .controller()来定义一个模块
- .directive()来自定义属性；
<p cls></p>
//自定义指令结构
App.directive('cls',function(){
//return 回来是一个对象或者是函数，通常情况下都是对象
return {
//E : element DOM元素
//C: class
//M: mark:注释
//A:attribute 属性
restrict:"A",
replace:"true",//模板中的标签会将HTML中的标签进行替换
template:"<h1>这是通过自定义指令添加的内容</h1>"，
}
})
AngualrJS 双向数据绑定
-
通过表单元素添加 ng-model 属性；
-
ng-bind
-
花括号(使用《》代替)
- 《》是ng-bind的简写
<input type="text" ng-model='name'>//input可以直接获取module中的$scope.name的值 <h1 ng-bind='name'></h1> <h2>《name》</h2> -
只有表单元素才可以从视图向模型传送数据
AngularJS数据处理
-
ng-switch = "item"===ng-switch on = "item" - 闪烁问题处理，可以添加 ng-cloak指令
<h1 ng-cloak>《name》</h1>; - angular 的遍历
<li ng-repeat='item in lists'>{{item}}</li>
//或者是
<li ng-repeat='item in lists'>
<span ng-bind='item'></span>
</li>
小知识点
- 触发脏值检测
scope.$digest();监听视图中的数据改变；ng-click事件内部中自动封装了这个检测，也可以手动添加； - form 表单有默认的submit事件，通过回车就可以触发；。form中如果有action，那么在submit之后，action也会重新发送一次请求，会刷新页面，所以，当使用submit提交数据时，可以将默认的action删除；
<form ng-submit='show()'>
<h1>todos</h1>
<input class="new-todo" ng-model='msg' placeholder="What needs to be done?" autofocus>
</form>
//angularJS通过ng-model将V与M进行绑定；
//所以input中的value值就等于$scope.msg; 所以实际上$scope.msg = $('input').val();只不过这一步是AngularJS内部做的；
//所以`$scope.msg=""`就直接将input的val值置空了；
- AngularJS 遍历，获取当前元素的index值
<ul class="todo-list">
<li ng-repeat="item in tabs ">//item可以获取当前元素
<div class="view">
<input ng-click="change($index)" class="toggle" type="checkbox"> //$index 代表当前元素所对应的index值
<label>《item.tab》</label>
<button class="destroy"></button>
</div>
</li>
</ul>
- 在angular中，涉及到通过判断而决定某个样式显示或隐藏时，尽量通过 ng-class="{attr:flag}"来决定，不用再在js中进行if判断了；
作用域
- 根作用于
ng-app="App"所处的作用域
过滤器
- 在AngularJS中使用过滤器格式化展示数据，在“《》”中使用"|"来调用过滤器，使用“：”传递参数；
- 价格过滤器
《price|currency:'￥'：1》;冒号后面是传参数，多个参数多个冒号链接，：1表示表刘一个小数； - 时间过滤器
《now | date:"yyyy-MM-dd hh:mm:ss"》 - 控制排序方向
《list | orderBy:"score":"true"》true为反向排序，false为正向排序，默认为false； - 常用内置过滤器
-
依赖注入
- 采用 ‘注入’ 的方式可以解决开发过程中的依赖的关系，成为依赖注入；
- 一般 注入是通过 ‘参数’ 的形式实现的；
-
$http同$scope一样，也是AngularJS内置的功能。可以提供发送异步请求的功能；
服务（重点）
-
$AngularJS内置的服务；ng-AngularJS 内置的指令； - 常见的内置服务：需要在依赖中写入，然后才可以使用
- $scope
- $interval
- $timeout
- $log
- $http
$log 服务 调试信息的输出
$log.error('这是一个错误');
$log.warn('这个一个警告');
$log.log('这是一个console.log');
$log.debug('这是一个调试');
$log.info('这是一个普通内容');
$timeout和 $interval
- $timeout 服务，延时显示数据，$interval 服务：计时器
App.controller('DemoCtrl',['$timeout','$log','$interval',function ($timeout,$log,$interval) {
//$timeout是一个函数
//延时3秒后显示内容;
$timeout(function () {
$log.info('我哈哈哈,我等了3秒')
},3000);
var i = 0;
$interval(function () {
$log.info(i++);
},1000)
}])
$http 专门发起异步请求
- 2、在PHP中 $_POST 是专门接收 formData格式数据的，即“Content-Type:application/x-www-form-urlencoded”; 但是不能接收 Content-Type：application/json;
- 3、当headers为“Content-Type:application/x-www-form-urlencoded”时，上传的data格式为
data:"name=itcast&age=11"; - 4、当headers为
“Content-Type:application/json”时，传递的参数格式为：data:{"name":"itcast","name":18};
AngularJS $http总结
- $http发送请求的方式有3种：method：“get”/"post"/'jsonp';
- 参数的传递方式为：params:
get方式请求
- "get"方式发送请求时，正常发送；参数以params:{name:'lisi',age:18}发送;
- 不管以什么方式传递参数，内部都会转换成 ？name=lisi&age=18的形式
- 在PHP中将传入的参数以json对象的形式输出
$http({
url:'./example.php',
method:'get',
params:{name:'lisi',age:18},
}).success(function (data) {
console.log(data);
})
//在PHP中代码：
$name = $_GET['name'];
$age = $_GET['age'];
$array = ['name'=>$name,'age'=>$age];
//var_dump($array);
//将传递的参数放到数组中,并将数组转换成json对象格式进行输出;
echo json_encode($array);
//结果为：{name: "lisi", age: "18"}
post方式请求
- “post”请求，需要注意两点
-
设置请求头：headers:“Content-Type:application/x-www-form-urlencoded”；
-
参数以data传递form data，data：“name=lisi&age=17”；请求头与参数必须保持一致；
//post请求 $http({ url: './example.php', method: 'post', data: 'name=lisi&age=17', headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).success(function (data) { console.log(data); })
-
JSONP 的原理
前端传递一个实现定义好的函数名，给服务端，然后服务端接收这个函数名并拼凑一个“（）”，并返回，前端就接收到了 这个函数的调用；
在jQuery中，我们不写callback的明细，ajax会自动帮我们生成一个，jQuery+序列号+时间戳等；但是在angularJS中，他们有帮我们封装，所以必须手动加上；
$http({
url:'./example.php',
method:'jsonp',
params:{
//callback必须用'JSON_CALLBACK'进行占位，后端返回回调函数：angular.callbacks._0(lisi)；这个回调函数的结果就是success时的data数据；
callback:'JSON_CALLBACK',
name:'lisi',
age:17
}
}).success(function (data) {
console.log(data);
})
自定义服务，$service和$factory
- App.controller(); 内置控制器
- App.directive(); 内置指令
- App.filter(); 内置过滤器
- App.factory(); 内置服务
- App.service(); 内置服务
- App.config(); 配置块
- App.run(); 运行块
配置块和运行块
- App.config():一个参数，为数组；[]；App.config([]);
App.config(['$logProvider','$filterProvider',function ($logProvider,$filterProvider) {
//通过$logProvider对$log进行配置;
$logProvider.debugEnabled(false);
$filterProvider.register('capitalize',function () {
return function (input) {
return (input[0].toUpperCase() + input.slice(1));
}
})
}]);
//这样在配置好之后，在HTML中就可以直接使用‘capitalize’服务了
<p ng-controller='DemoCtrl'> 《name | capitalize》</p>
运行块
- $rootScope: AngularJS的根作用域，可定于全局变量
App.run(['$rootScope',function ($rootScope) {
$rootScope.name = '顺治';
}])
//这个name在此文件中的任何一个控制器中都可以使用；
路由
- 路由是URL地址与程序的映射关系；通过调整地址的变化，可以‘调用或执行’ 某一具体的程序；
- SPA：single page application 单页面展示所有功能；
- 多页面最明显的一个缺点就是每次更新页面都要进行刷新，不能得到很好的用户体验；
- AngularJS的路由是建立在单页面的基础之上的；
-
onhashchange:检测地址栏中地址的变化，绑在window上的 - PHP中：
file_get_contents('./views/'.$hash.'.html');获取文件中的内容 - 锚链接就是点断的路由，就是地址与程序的映射关系；
路由的配置
- 路由经过设置才能使用
- 模块需要依赖路由
var Music = angular.module('Music',['ngRoute']);
<nav>
//锚点中有参数的时候，不会影响到路由；ß
<a href="#!/login?name=小明">登录</a> //地址必须写成 #！/的形式
<a href="#!/register">注册</a>
</nav>
<!-- ng-view 是一个占位符-->
<div ng-view></div>
var App = angular.module('App',['ngRoute']);
//路由是需要配置才能使用;
App.config(['$routeProvider',function ($routeProvider) {
//两个参数path 和 route
//第一个参数:路由
//第二个参数是路由的配置
$routeProvider.when('/register',{
//template:"<h1>首页</h1>",简单的内容
templateUrl:'./views/register.html' //可以引入URL地址
//为当前视图文件分配控制器;
controller:'RegisterCtrl',
}).when('/login',{
//template:"<h1>登录</h1>",
templateUrl:'./views/login.html'
}).otherwise({
//如果都不符合,可以设置默认值
redirectTo:'/register'
})
}])
App.controller('RegisterCtrl',['$scope',function ($scope) {
$scope.title = '注册';
}])
//然后在register.html页面中就可以直接进行数据绑定 <h1>《title》</h1>;
-
可以使用路由，也就是说开发者可以根据地址的变化执行不同的业务逻辑；路由需要 配置 后才能被使用；
-
使用when方法监听地址的变化，然后处理相应的逻辑；
-
参数传递可以有两种方式，一种方式是通过地址传参：
-
地址传参：其格式为?key1=val&key2=val2;.when('/login?name=lisi&age=17')
-
通过路由传参: 路由/:参数名
-
！！！注意：地址的格式（/login/:name/:pass）必须与路由的格式（#!/login/小明/12345）完全保持一致，一一对应；
<a href="#!/login/小明/12345">登录</a> .when('/login/:name/:pass',{ //template:"<h1>登录</h1>", templateUrl:'./views/login.html' })- 获取路由中传递的参数
var parameter = $routeParams;
-
网友评论