1.MVC基本概念
? ?M：model,模型，数据。
? ?V：view，视图，就是如何展示数据。
? ?C：controller，控制器，数据与展示的联系（连接数据与视图的桥梁），是主要的代码逻辑区域。
? ?作用：使代码分工明确，可以根据不同的分块进行单独处理
ng代表angular?
2.angular 是什么？
? ? ?*：ng是一个处理单页面应用程序的框架，他扩展了原有的html,使用标签模板指令等方法去实现动态的单页面应用程序。
? ? ?*：单页面应用程序：整个页面站点，无论是什么页面内容都是一个html文件，在html文件的内部操作数据的显示与变化，所有的数据改动不再使用刷新的方法，而是利用ajax和dom操作在界面上进行调整
? ? ?*：ng不推荐在代码中使用DOM操作，因此一般在ng项目中很少使用DOM操作
? ? ?*：ng中完全遵循MVC思想，将html当做是展示数据的view，而需要在界面中展示的数据就是modle ?
? ? ?*： 在ng中，凡是一个ng-app就是一个模块，可以理解模块是很多MVC结构的一个集合，模块中有很多的对象，最典型的就是有很多的控制器，每个控制器背后都有一个$scope作为model的载体。
? ??
3.框架和库
? ? ?库：是一堆按照功能分类的方法，对象数据的集合，目的就是将用户开发的代码简化方便
? ? ?框架：框架是一种结构，该结构规定了用户该如何使用，按照这个结构编写代码
? ? ?模块：一般将具有一类功能的数据，方法，对象等组合到一起，构成一个模块
? ? ?组件：模块的功能化的结果，可以独立完成一个具体逻辑的全部内容的集合
4.
? ?ng-app：ng从此处开始处理，这里就是view
? ? ? *：一个页面中只能出现一个ng-app，如果出现多个的话，后面的都无效。。。
? ? ? *：如果想要使用多个ng-app，需要使用angular.bootstrap方法
<body>
<div >
<input type="text" ng-model="inputData"><span>{{ inputData }}</span>
</div>
<div >
<input type="text" ng-model="inputData"><span>{{ inputData }}</span>
</div>
</body>
<script src="./js/angular.js"></script>
<script >
angular.module( 'mainApp1' , [] );
angular.module( 'mainApp2' , [] );
// bootstrap
var div1 = document.getElementById( 'qwert' );
var div2 = document.getElementById( 'qqq' );
angular.bootstrap( div1, [ 'mainApp1' ] );
angular.bootstrap( div2, [ 'mainApp2' ] );
</script>
?
? ?ng-model:数据
? ? ? ? ???*:凡是需要处理的标签数据，使用ng-model可以实现数据的双向绑定
? ? ? ? ? ?*：双向数据绑定，就是从界面中到model的变化，但是界面中数据操作发生了变化（用户的行为），背后的model中对应的数据一并改变，从背后到界面，凡是背后的model中的数据发生了变化，那么界面中凡是使用了ng-model、ng-bind插值语法等数据的地方，值也跟着改变
? ? ? ? ? ?*：如果需要手动的控制数据的变化，就必须首先创建一个模块，该模块对应于界面中的ng-app
? ng-controller：该属性会提供一个具体的函数，在函数中处理数据，维护每一个具体的功能
?5.angular语法
var module= angular.module('ng-app的名字',[]) // 创建一个模块
module.controller( '控制器的名字', function ($scope){ // 所有的操作都应该挂载到模块中
// 凡是在代码中出现了ng-model以后，ng都会创建对应的数据模型
// ng会利用控制器作为分割，会给每一个控制器创建一个对象叫$scope，可以控制数据
// 在使用的时候，必须使用该名字不能修改
// 在控制器中所有的model数据，实际上都是$scope的属性,
$scope.inputData='angular';
})
6.小案例(数据双向绑定)
< body ng-app ='mainApp' >
< div ng-controller ='mainController' >
< input type ='text' ng-model ='abc' >
< span > {{abc}} </ span >
</ div >
</ body >
< script >
angular.module( ' mainApp ' ,[])
.controller( ' mainController ' , function ($scope){
});
</ script >
7.计算器小案例
<body ng-app="app" ng-controller="controller">
<input type="number" ng-model="num1">
+
<input type="number" ng-model="num2">
=
<!--<input type="text" ng-model="num1 + num2">-->
<span>{{ num1 + num2 }}</span>
</body>
<script>
angular.module( 'app' , [] )
.controller( 'controller', function ( $scope ) {
$scope.num1 = 0 ;
$scope.num2 = 0 ;
});
</script>
8.生成可自动排序的表格
<body ng-app="mainApp">
<div ng-controller="mainController">
<!-- 创建 表格 -->
<!-- ng- repeat
语法
ng -repeat=" item in 数组 "
将该 "属性" 放在标签中, 那么这个标签就会根据 "数组" 中 的数据重复显示
-->
<!--<div ng-repeat="o in [ 1, 2, 3, 4 ]">{{ o }}</div>-->
<!--
ng - click
与 onclick 类似, 不同的是ng - click 中的函数会默认的绑定在 $scope 中
语法:
ng -click=" btn() "
此时的 btn 是 $scope 的一个属性
-->
<table border="1" width="400">
<thead>
<tr>
<!--
点之前 key 中没有数据
带你之后 key 中有字符串
如果重复点 表明 key 中的数据 与 当前需要赋值的数据值一样
-->
<!--<th ng-click="key= key == 'name' ? '-name' : key=='-name' ? 'name' : '-name'">name</th>-->
<th ng-click="key='name'">name</th>
<th ng-click="key='age'">age</th>
<th ng-click="key='gender'">gender</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in data | orderBy: key">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>{{ item.gender }}</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
angular.module( 'mainApp' , [] )
.controller( 'mainController', function ( $scope ) {
$scope.data = [
{ name: 'jim1', age: 29, gender: '女' },
{ name: 'jim2', age: 19, gender: '男' },
{ name: 'jim3', age: 49, gender: '女' },
{ name: 'jim4', age: 39, gender: '男' },
{ name: 'jim5', age: 9, gender: '女' }
];
});
</script>
</html>
9.定义与获取模块
?*：允许用户自己定义多个模块，然后将这个模块与页面中的ng-app结合
?*：angular.module这个方法还可以用来火的已经定义的模块，凡是定义的数据都会存储在angular这个对象的内部，使用该方法，可以在内部查询已经创建好的模块，如果没有找到该模块，那么报错，如果找到了该模块，则返回该模块，即可以直接用于创建控制器等其他内容。
?*：模块的获取不受到闭包的影响
<body ng-app="mainApp">
<div ng-controller="mainController">
<input type="text" ng-model="inputData"><br>
<input type="text" ng-model="inputData"><br>
</div>
</body>
<script>
( function () {
angular.module( 'myApp', [] ) // 定义模块, 在建文件夹
.controller( 'mainController', function ( $scope ) {
$scope.inputData = '哈哈哈哈' ;
});
})();
( function () {
angular.module( 'mainApp', [ 'myApp' ] );
// 主模块依赖于 'myApp'
// 由于定义的所有数据都是 在 angular 上定义的, 因此所有的数据都存储在 angular
// 这个对象的 内部, 也就是在内部存储着
// 如果提供一个模块的名字, 那么在内部就会查找对应的名字, 并实现加载
})();
</script>
10.项目构建工具
? ?gulp、grunt、webpack
? ? 使用yeoman和generator-angular模板搭建ng项目：
? ? 1>安装yo
? ? ? ? npm install -g yo
? ? 2>安装模板
? ? ? ? ?npm install ?-g generator-angular
? ? 3>下载模板
11.控制器
?在传统的MVC框架中，控制器是ianxiview和model的桥梁，一般书写代码在控制器中，唉控制器中调用使用视图与数据模型，在ng中弱化了控制器的功能，在MVC思想中的两个基本问题：
? ?1>数据如何同步（$scope.$applay是实现数据双向绑定的原理）
? ?2>业务逻辑如何实现
?在ng中控制器的功能实际上表现出来的只有模块功能的管理作用
12.MVVM
? 因为减少了控制器的作用，但是引入了一个新的对象，这个对象与界面中的数据一一对应，并且支持数据的双向绑定，这样的一个对象与model还是有一定的区别，这个对象成为viewmodel，基础视图的数据模型，因此就弱化了controller的概念，但是强化了viewmodel的功能，因此有人称ng是mvvm框架。
13.如何让创建控制器？
? 语法:
module.controller('控制器的名字', function ($scope){
})
//在内部执行的时候，会将第二个参数转换成数组的形式
//在代码的运行内部利用参数可以获得函数体，将其tostring后可以获得参数列表，再将其拼接成数组
完整写法:
module.controller('控制器的名字',['$scope', function ($scope){
}])
14.依赖注入：
? 依赖：就是在实现某些功能的时候，需要某些特定的对象
? 注入：就是需要某个对象的时候作为参数传入
? 依赖注入：在使用某个对象的时候，利用参数参入
? 除了$scope外，还有$http、$interval、$window、$rootScope...........
? 小案例：
<body ng-app="mainApp"ng-controller="mainController">
<input type="text" ng-model="name">
<input type="button" value="获得电影信息" ng-click="btn()">
<div>
<div class="box" ng-repeat="item in list">
<div>{{item.title}}</div>
<img ng-src="{{item.images.large}}" alt="">
</div>
</div>
</body>
<script src="./js/angular.js"></script>
<script>
angular.module( 'mainApp' , [] )
.controller( 'mainController', function ( $http, $scope ) {
$scope.btn = function () {
if ( $scope.name == null ) return ;
var txtSearch = 'https://api.douban测试数据/v2/movie/search?q=' + $scope.name;
console.log( 'start' );
$http.get( txtSearch )
.success( function ( data ) {
// 在利用 get 请求数据的时候, 如果成功了, 就会调用该方法
// 获得的数据在参数中
// console.log( data );
$scope.list = data.subjects;
});
}
});
</script>
15.依赖注入的本质：
1>ng在运行的时候，给在内部创建很多对象
2>这些对象都是私有的
??
// 为什么依赖注入的时候, 需要传入是是一个字符串的名字?
// 传入的是一个名字, 那么在算法的内部
// 就会通过这个名字, 找到内部创建的对象
// 在函数调用的时候( 控制器 ), 将这个同名的 内部创建的 对象 传入函数
// 如果传入的名字, 内部没有创建, 就会检查其他模块中是否定义了
// 如果有定义, 一样拿过来用
// 如果都没有就会报一个错误
// XXXXProvider 的错误
module.controller( '名字', function ( $scope, $http ) {
});
// => 转换
module.controller( '名字', [ '$scope', '$http', function ( $scope, $http ) {
}] );
16.依赖注入的小案例：
<body ng-app="mainApp" ng-controller="mainController">
<input type="text" ng-model="num">
</body>
<script src="./js/angular.js"></script>
<script>
// var num = 0;
angular.module( 'mainApp' , [] )
.value( 'obj', { num: 0 } ) // 自定义服务( 5 种方法 )
.controller( 'mainController', function ( $scope, $interval, obj ) {
// console.log( $window === window );
// 这里需要处理界面中 的数据
// 就一定要有 $scope
// 我要一个计时器, 来自增一个数据
// 需要一个计时器, 在 ng 内部有一个 $interval 的对象( 就是 setInterval 的包装 )
// 还需要有一个变量, 记录数字
$interval( function () {
// num++;
obj.num++ ;
$scope.num = obj.num;
}, 1000 );
// setInterval(function () {
// num++;
// $scope.num = num;
// $scope.$apply(); // 双向数据绑定的原理
// }, 1000);
});
</script>
17.在ng 中可以被注入的对象有两类，一类是provider，一类是服务
18.作用域(scope)
? 每个controller上的数据都是绑定到scope上面的，不同的controller拥有不同的数据
? 作用域对象：（就是$scope）
?
-> 什么时候创建 $scope
在 ng 凡是有 控制器就有 $scope 存在.
在 ng 中还有一个特点, 就是懒加载, 也就是说无论是什么对象只有在使用的时候被创建.
-> 多个 $scope 之间的 关系是什么
在 ng 中 控制器可以分配作用域, 即凡是定义一个 控制器 就会创建 一个 $scope. 如果控制器有
嵌套( 在一个 控制器里定义另一个控制器 ), 那么内控制器的 $scope 原型继承自 外控制器的 $scope
对象 a 原型继承自 对象 b, 就是说 a 可以使用 b 中的方法, a 的 __proto__ 就是 b
Object.create( b ) -> a
在 原型继承中 如果 父对象 与 子对象 同时具有同名的属性会怎样?
-> 在 原型继承中 子对象可以继承访问 父对象的所有成员
var base = { name: 'jim' };
var sub = Object.create( base );
console.log( sub.name );
-> 如果在原型继承中 修改或设置 子对象的属性, 相当于给当前对象增加了属性.
sub.age = 19;
-> 如果修改或设置 子对象中 与 父对象同名的属性, 实际上父对象不变, 而是给子对象增加了对应的属性
sub.name = 'tom';
// 除非 sub.__proto__.name = 'tom'
根据属性搜索原则, 在利用子对象访问 name 属性的时候, 只操作子对象, 与父对象无关.
需要具备一个能力, 看 html 标签 绘制 scope 关系
<body ng-app="mainApp">
<div ng-controller="ControllerA"> <!-- $scope( modelA ) -->
外: modelA: <input type="text" ng-model="modelA">
<div ng-controller="ControllerB"> <!-- $scope( modelB ) -->
内: modelB: <input type="text" ng-model="modelB"><br>
内: modelA: <input type="text" ng-model="modelA">
<button ng-click="btn()">点击访问</button>
</div>
<div ng-controller="ControllerC">
另内: <input type="text" value="{{modelA}}">
</div>
</div>
</body>
<script src="./js/angular.js"></script>
<script> var scopeA; angular.module( 'mainApp' , [] )
//controller是内嵌关系，但是创建的时候是平行的代码 .controller( 'ControllerA', function ( $scope ) { // scopeA = $scope;
}) .controller( 'ControllerB', function ( $scope ) { // $scope.btn = function () { // console.log( $scope.modelA ); // console.log( $scope.__proto__ === scopeA ); // } ; $scope.modelA = '' ; scopeA = $scope; }) .controller( 'ControllerC', function ( $scope ) { }) </script>
$rootscope?
-> 为什么一开始的代码中没有写 controller 也可以双向绑定????
在 ng 程序中, 一旦使用 了 ng-app 就表明该标签与其子标签被 ng 处理
实际上在背后, 凡是有了 ng-app 的背后都会被创建一个 $rootScope 的对象
它就是所有的 $scope 的祖宗, 所有的 $scope 都是直接或间接继承与 $rootScope 的
凡是没有写 ng-controller 的 ng-model 都是 $rootScope 的属性
这个 $rootScope 是程序一开始被创建的, 因此不是使用 controller 来访问
ng 的 module 有一个方法, 叫做 run(), 表示运行, 即 ng 程序一运行的时候就会
执行该方法.
语法:?
module.run( [ '$rootscope', function ($rootscope ) { ... } ] )
<body ng-app="mainApp">
<input type="text" ng-model="rootModel">
<div ng-controller="mainController">
<input type="text" ng-model="mainModel">
<div>{{mainModel}}</div>
</div>
</body>
<script src="./js/angular.js"></script>
<script>
angular.module( 'mainApp' , [] )
.controller( 'mainController', function ( $scope ) {
console.log( 'running controller: mainController' );
// window.scope = $scope;
})//程序运行时就会首先执行run函数，（即使run函数在controller后面），多个run函数会按照顺序执行
.run( function ( $http ) {
console.log( $http );
})
.run( function ( $location ) {
console.log( $location );
})
.run( [ '$rootScope', function ( $rootScope ) {
console.log( 'running ng-app: rootScope' );
console.log( $rootScope );
// window.rootScope = $rootScope;
}])
</script>
19.注册小案例
<body ng-app="mainApp" ng-controller="mainController">
<!-- 只需要注册用户名和密码 -->
请输入用户名: <input type="text" ng-model="userId"><br>
请输入密码: <input type="password" ng-model="pwd1"><br>
请确认密码: <input type="password" ng-model="pwd2"><br>
<input type="reset" value="取消">
<button ng-click="btn()">注册</button>
<div style="color: red;">{{errMsg}}</div>
</body>
<script src="./js/angular.js"></script>
<script>
function User( userId, pwd ) {
this .userId = userId;
this .pwd = pwd;
}
User.prototype.save = function () {
// 将 this 存储到 login 的 loacalStorage
var list = JSON.parse( localStorage.getItem( 'userData' ) || '[]' );
// 第一次进来的时候 是一个 空 即 数组
list.push( this );
// 存储
localStorage.setItem( 'userData' , JSON.stringify( list ) );
}
// 将查找的功能交服务器完成就是配置一个 url 地址: http://HdhCmsTestxxxx测试数据/xxxx.xxxx?userId=....
// 因此为了模拟 服务器的操作, 该 User 需 要提供提供 getUserByUserId 的方法
User.getUserByUserId = function ( userId ) {
// 取数据
var list = JSON.parse( localStorage.getItem( 'userData' ) || '[]' );
// 在数组 list 中找其中某一项是否为 userId
// ES5 扩展的 forEach 不能提前退出
var user;
list.forEach( function ( v ) {
if ( v.userId == userId ) {
// 找到数据
user = v;
}
});
// 如果 user 中有数据 就表示找到了, 如果没有数据就表示没有找到
return user;
};
User.isExist = function ( userId ) {
return this .getUserByUserId( userId ) != null ;
};
// ...
angular.module( 'mainApp' , [] )
.controller( 'mainController', [ '$scope', function ( $scope ) {
$scope.btn = function () {
$scope.errMsg = '' ;
// 1, 验证用户是否输入完整
var userId = $scope.userId,
pwd1 = $scope.pwd1,
pwd2 = $scope.pwd2;
if ( !userId || userId.trim().length === 0 ) {
$scope.errMsg = '请输入完整信息' ;
return ;
}
if ( !pwd1 || pwd1.trim().length === 0 ) {
$scope.errMsg = '请输入完整信息' ;
return ;
}
if ( !pwd2 || pwd2.trim().length === 0 ) {
$scope.errMsg = '请输入完整信息' ;
return ;
}
// 已经输入了, 这里可以 全部 trim 一下
userId = userId.trim();
pwd1 = pwd1.trim();
pwd2 = pwd2.trim();
// 2, 验证两次密码是否一致
if ( pwd1 != pwd2 ) {
$scope.errMsg = '密码输入不一致, 请重新输入' ;
return ;
}
// 判断用户名是否存在, 如果存在了不允许注册
if ( User.isExist( userId ) ) {
$scope.errMsg = '该用户名已存在, 请重新输入' ;
return ;
}
// 存储
new User( userId, pwd1 ).save();
};
}]);
20.搭建本地http服务器
1> 在 node 官网下载 node 安装包
下载 .msi 格式的需要双击安装
如果下载 zip 格式的 可以配置命令行手动安装
2> 下一步下一步安装
安装完成以后, 验证是否安装成功使用
node -v
npm -v
3> 安装成功后使用 安装 hs 服务器软件
npm install -g http-server
4> 使用 shift + 右键 菜单中可以看到 在当前目录下 打开命令行
5> 键入 hs -o 或 http-server -o 可以打开服务,在 当前目录下搭建 http 服务器, 并打开页面
默认载入 index.html 文件
和 http-server 一样, 有一个 服务软件 browser-sync（浏览器同步）
21.$http基础知识（数据的展示案例）
<body ng-app="mainApp">
<div ng-controller="mainController">
<table border="1" width="400">
<tr ng-repeat="item in list">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.gender}}</td>
</tr>
</table>
</div>
</body>
<script src="./angular.js"></script>
<script>
angular.module( 'mainApp' , [] )
.controller( 'mainController', [ '$scope', '$http', function ( $scope, $http ) {
{
// $http.get('') 使用 get 请求
// $http.post('') 使用 post 请求
// $http({
// url: ...
// method: ...
// })
// $http 会返回一个 Promise 对象
// 其有一个 then 方法
// 其接受两个 参数, 分别是两个函数
// 代表的意思是 如果请求成功调用第一个函数
// 如果请求失败调用第二个函数
// 如果使用获取 请求有两个快捷方法
// success
// catch
// $http.get( './personData1.json' )
// .then( function ( data ) {
// // success
// console.log( 'success' );
// console.log( data );
// }, function ( err ) {
// // error
// console.log( 'err' );
// console.log( err );
// });
// 等价
// $http.get( './personData1.json' )
// .success(function ( data ) {
// console.log( 'success' );
// console.log( data );
// })
// .catch(function ( err ) {
// console.log( 'err' );
// console.log( err );
// });
}
$http.get( './personData.json' )
.success( function ( data ) {
$scope.list = data;
});
}]);
</script>
22.数据的删除案例：
<body ng-app="mainApp">
<div ng-controller="mainController">
<table border="1" width="400">
<tr ng-repeat="item in list">
<td>{{$index}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.gender}}</td>
<td><a href="#" ng-click="remove( $index )">删除</a></td>
</tr>
</table>
</div>
</body>
<script src="./angular.js"></script>
<script>
angular.module( 'mainApp' , [] )
.controller( 'mainController', [ '$scope', '$http', function ( $scope, $http ) {
$scope.remove = function ( index ) {
console.log( index );
// 利用 this.item 即可找到我们的 数据, 然后利用 list 删除这个数据
// 利用 $index 即可拿到其索引, 就可以删除
$scope.list.splice( index, 1 );
window.scope = $scope;
// 对服务器发送请求处理, 等到结果
};
$http.get( './personData.json' )
.success( function ( data ) {
$scope.list = data;
});
}]);
</script>
23.数据的增加案例
<body ng-app="mainApp">
<div ng-controller="mainController">
姓名: <input type="text" ng-model="name"><br>
年龄: <input type="number" ng-model="age"><br>
性别: <input type="text" ng-model="gender"><br>
<button ng-click="add()">添加</button>
<hr>
<input type="text" ng-model="search">
<hr>
<table border="1" width="400">
<tr ng-repeat="item in list | filter: { name: search }">
<td>{{$index}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.gender}}</td>
<td><a href="#" ng-click="remove( $index )">删除</a></td>
</tr>
</table>
</div>
</body>
<script src="./angular.js"></script>
<script>
// function UserList( $http ) {
// }
angular.module( 'mainApp' , [] )
.controller( 'mainController', [ '$scope', '$http', function ( $scope, $http ) {
window.scope = $scope;
$scope.add = function () {
// 验证输入
$scope.list.push({
name: $scope.name,
age: $scope.age,
gender: $scope.gender
});
// 清空
$scope.name = $scope.age = $scope.gender = undefined;
}
$scope.remove = function ( index ) {
console.log( index );
// 利用 this.item 即可找到我们的 数据, 然后利用 list 删除这个数据
// 利用 $index 即可拿到其索引, 就可以删除
$scope.list.splice( index, 1 );
// 对服务器发送请求处理, 等到结果
};
$http.get( './personData.json' )
.success( function ( data ) {
$scope.list = data;
});
}]);
</script>
?24.事件
- 什么是事件
一般涉及到事件的时候, 指的事件机制, 通俗的解释是 当用户执行某一个行为的时候, 浏览器会自动的调用预先注册好的函数.
与事件相关的名字有很多
1> 事件处理函数. 就是响应用户的函数.
2> 事件( 做名词讲 ). 是指事件名. 注意是不包含 on 的名字.
3> 事件的注册( 给 on... 赋值 )
... ...
了解
4> 事件监听
浏览器会判断在用户发出某个行为的时候, 是否注册了对应的事件处理函数. 如果有就会发射事件.
5> 事件发射
调用内置的事件处理函数
a 标签为例, 点击 a 标签的时候会跳转, 那么这个跳转就是默认的处理行为
在默认的事件处理函数中会调用 on... 的事件处理函数( 用户的事件处理函数 )
猜测, 默认的逻辑为
function 默认() {
if ( onclick ) {
if ( onclick() === false ) return;
}
// 默认的逻辑
// 跳转
location.href = ....
}
通俗的解释
京东在买东西, 我看上了一个产品( angular权威指南 ), 但是价格很高.
点击收藏: 提示你是否要降价提醒. 如果我选择了降价提醒.
事件机制在实际开发中有一个设计模式与之对应
1> 观察者模式
2> 代理模式
- 事件模型
如果说需要自定义事件, 那么就需要自己实现
1> 事件的注册
2> 事件的发射
3> 监听一般使用内置事件进行监听
例如页面中有一个案例 btn
那么需要提供函数
1> on 绑定事件
2> fire 发射事件
3> 监听 onclick 赋值
作业
function MyControl( dom ) {
this.dom = ...dom...;
this.events = {};
// 监听...
}
MyControl.prototype = {
on: function () {},
fire: function () {}
}
var triBtn = new MyControl( '#dv' );
triBtn.on( '...', function () ... )
- angular 中事件的使用
在 ng 中有两个非常常用的事件
1> emit 从子控制器向父控制器方向传播事件
2> broadcast 从父控制器向子控制器方向传播事件
这两个方法都是用来发射事件的, 注册使用 $on( ... )
?emit事件：
<body ng-app="mainApp">
<div ng-controller="mainController">
<input type="text" ng-model="myInput">
<div ng-controller="secondController">
<input type="text" ng-model="myInput">
<input type="button" value="点击" ng-click="click()">
</div>
</div>
</body>
<script src="./js/angular.js"></script>
<script>
angular.module( 'mainApp' , [] )
.controller( 'mainController', function ( $scope ) {
$scope.myInput = '' ;
// 在这里监听事件, 等待数据的来到
$scope.$on( 'bigbigEvent', function ( evt, args ) {
// console.log( arguments );
$scope.myInput = args;
});
})
.controller( 'secondController', function ( $scope ) {
$scope.myInput = '' ;
$scope.click = function () {
// 在这里发射一个事件, 将数据传递出去
// console.log($scope.$emit);
$scope.$emit( 'bigbigEvent' , $scope.myInput );
};
});
</script>
brodcast事件：
<body ng-app="mainApp">
<div ng-controller="mainController">
<input type="text" ng-model="myInput">
<input type="button" value="点击" ng-click="click()">
<div ng-controller="secondController">
<input type="text" ng-model="myInput">
</div>
</div>
</body>
<script src="./js/angular.js"></script>
<script>
angular.module( 'mainApp' , [] )
.controller( 'mainController', function ( $scope ) {
$scope.myInput = '' ;
$scope.click = function () {
// 父控制器, 需要广播事件
// console.log($scope.$broadcast);
$scope.$broadcast( 'smallsmallevent', $scope.myInput, 1, 2, 3, 4 );
};
})
.controller( 'secondController', function ( $scope ) {
$scope.myInput = '' ;
// 子控制器
// 监听广播事件
$scope.$on( 'smallsmallevent', function ( evt, a,b,c,d,e ) {
console.log( arguments );
});
});
</script>
兄弟控制器间传递信息：
<body ng-app="mainApp">
<div ng-controller="mainController">
<input type="text" ng-model="myInput">
<input type="button" value="点击" ng-click="click()">
</div>
<div ng-controller="secondController">
<input type="text" ng-model="myInput">
</div>
</body>
<script src="./js/angular.js"></script>
<script>
angular.module( 'mainApp' , [] )
.run( function ( $rootScope ) {
// 监听 发布过来的事件, 然后转发对应的事件
$rootScope.$on( 'mainEvent', function ( evt, data ) {
// 拿到数据以后, 直接一脚踢开
$rootScope.$broadcast( 'secondEvent' , data );
})
})
.controller( 'mainController', function ( $scope ) {
$scope.myInput = '' ;
$scope.click = function () {
$scope.$emit( 'mainEvent' , { data: $scope.myInput } );
};
})
.controller( 'secondController', function ( $scope ) {
$scope.myInput = '' ;
$scope.$on( 'secondEvent', function ( evt, data ) {
$scope.myInput = data.data;
});
});
</script>
25.表达式
有数据与运算符连接的, 并且有值的式子就是表达式
123
n = 123
func()
- ng 中表达式
ng 中的表示式是一个类 javascript 代码片段.
它主要用在插值语法中( {{ }} ), 或指令中( ng-click="btn()" ). 主要用于计算值
或函数调用.
- ng 表达式与 js 表达式的异同
?<div>{{ 1234 | currency }}</div> ? //将数字以货币形式展示
26.frameset(页面分栏)
<frameset cols="30%, *">
<frame src="http://HdhCmsTestbaidu测试数据"/>
<frame src="http://HdhCmsTestitcast.cn" />
</frameset>
27.过滤器：
- 什么是过滤器
所谓的过滤就是将一堆数据进行一个筛选, 找到你想要的数据.
在 ng 中, 所谓的过滤是指, 将一个数据( 单个数据, 或数组等 ) 用一个函数进行处理, 得到一个具体的结果.
这个过程就是过滤. 通俗说, 就是 "洗一下". 再一种解释好比 映射( map ).
- 作用
将 ng 中使用的数据, 按照一定的规则显示出来
例如:
货币: 按照格式显示货币
日期: 按照指定的格式显示日期
<body ng-app="mainApp">
<div>{{ now | date: 'yy年MM月dd日 hh:mm:ss' }}</div>
</body>
<script src="./js/angular.js"></script>
<script>
angular.module( 'mainApp' , [] )
.run( function ( $rootScope ) {
$rootScope.now = new Date();
})
</script>
- 语法
- 表达式
{{ 数据 | 过滤器名: 参数 }}
所谓的过滤器名, 其实就是一个函数, 其中竖线表示的含义是 将前面的 "数据" 作为参数传入到 过滤器这个函数中.
那么函数的 第一个参数就是 前面的数据. 但是为了可以控制函数的具体实现, 函数还可以带有其他参数. 在 过滤器名
后面用 冒号 连接的 内容就是参数, 如果有多个参数, 例如两个参数的时候, 使用语法
{{ 数据 | 过滤器 : 参数1 : 参数2 }}
- 自定义过滤器
使用语法
module.filter( '过滤器的名字', [ function () {
return function ( input ) { // 这个被 return 的函数就是过滤器函数
}
}] );
<body ng-app="mainApp">
<div>{{ 'ng-app' }}</div>
<div>{{ 'ng-app' | tocamel }}</div>
</body>
<script src="./js/angular.js"></script>
<script>
//非驼峰转驼峰
angular.module( 'mainApp' , [] )
.filter( 'tocamel', function () {
var r = /-(\w)/ g;
return function ( input ) {
return input.replace( r, function ( _, c ) {
return c.toUpperCase();
});
}
});
</script>
- 注入
### 内置常用过滤器
filter 过滤, 该过滤器使用在数组数据的后面, 用于过滤出子数组
filter 带有三种参数形式
1> 单个数据, 凡是在数组中数据与之一样的就被留下来
2> 对象, 用来过滤 对象数组
3> 带有一个函数, 用来对当前元素进行判断, 类似于 jquery 的 map 函数.
该函数就是在判断当前元素是否需要被过滤出来
currency 表示货币, 意味着使用金钱的方式来现实. 没有参数.
number 表示已小数点后 多少位 来现实数据. 使用的时候使用语法
{{ num | number: 3 }} // 保留小数点后 3 位
date 采用时间格式来现实
yyyy 年份, yy 没有世纪时间的年份
MM 月
dd 日
hh 小时, HH 表示 24 小时制
mm 分钟
ss 秒
.sss 毫秒
json 以 json 的格式显示数据
lowercase 转小写
uppercase 转大写
limitTo 表示从数组的哪一个位置开始, 到哪一个位置截取
limitTo: 3 从 左开始, 截取 前 3 个数据
limitTo: -4 从 右开始, 截取 后 4 个数据
orderBy 排序
带有三个参数
1> 表示按照什么属性排序, 带有负号的时候降序, 默认试试升序.
2> 一个 boolean 值, 表示是否逆序
3> 一个函数, 表示比较规则. 使用比较规则排序
### 过滤器组合使用
数据 | 过滤器1 | 过滤器2 | 过滤器3
### 自定义过滤器
28.指令 directive
- 什么是指令
指令 就是 命令的意思. 简单的描述就是给一个指令( 命令 )给你, 那么你就要做很多的事情.
在 ng 中, 指令是写在一个标签中的一个特殊的属性, 例如 ng-XXX. 在 ng 中凡是写了指令
的地方, 其实背后会有一连串的代码被执行.
例如:
ng-controller, 背后会 创建 $scope 等数据
ng-app, 背后会创建 模块, $rootScope 等数据
ng-repeat, 直接根据 数据 创建 html 标签
ng-model, 背后就将数据加到 最近的 一个 $scope 中
ng-click, 背后就创建一个监听 点击的事件
... ...
### 内置指令
// 这里的指令都是延迟, 或 需要 ng 执行得到结果的指令
ng-href
ng-src
ng-class 用于设置 类样式的属性
传统的语法是使用 class="..."
需要时常更改 class 中含有的 类样式
正常情况可能是 class="navigator hide", 菜单被展开以后, 可以变成 class="navigator"
ng-class 的语法是 需要一个对象
例如: ng-class="{ 键: 值, 键: 值, 键: 值 }"
此时 键名 就是 类样式的名字
值是一个 boolean 值, 表示是否含有该类样式
例如, 要实现
class="navigator hide"
可以写成
ng-class="{ navigator: true, hide: true }"
如果要写成
class="navigator"
可以是
ng-class="{ navigator: true, hide: false }"
ng-style 该属性用于设置样式, 其样式的值按照 分号分割 罗列在 该属性中
例如:
style="width: 200px; height: 100px; border: 1px solid red;"
ng-style 可以跟一个对象, 其对象的键值对 就表示 样式的名字与值
ng-cloak 给所有的 使用了 ng 指令 的 html 标签加上一个 hide 类样式, 就是设置其 display: none
ng-bind 就是插值语法的指令形式
<div>{{ num }}</div>
等价于
<div ng-bind="num"></div>
ng-app
ng-controller
ng-model
?
//boolean类型的指令
ng-selected
ng-readonly
ng-disabled
//具有流程控制的指令
ng-if ?//元素是否存在 ? ng-hide和ng-show有类似的功能
ng-switch //类似于switch-case语句
<div ng-init='num=4'>
<div ng- switch ='num'> <div ng- switch -when='2'>222</div> <div ng- switch -when='3'>333</div> <div ng- switch - default >default</div> </div>
</div>
ng-view//就是一个容器，用于路由操作
ng-repeat// 注意： $index、 $even、$odd、 $first、 $last?
ng-init
//事件指令（添加到scope上）
ng-click
ng-dbclick
ng-change
ng-select
ng-submit
ng 1.5.8 中有 64 个指令
?
?自定义指令:
定义的语法：
// 定义的语法：
angular.module('mainApp' ,[])
.directive( 'itLogin',[ function (){//要用驼峰命名法
return { // 指令的配置
template:'<div class='login'>'+
'请输入用户名：<input type="text"><br>'+
'请输入密码：<input type="password"><br>'+
'<input type="button" value="登录">'+
'</div>'
};
}])
//自定义指令的使用：
<div it-login>
</div> ?
自定义指令的属性：
restrict：string ? //设置指令的使用形式(EACM),可以允许我的指令以标签、属性、class、注释的形式给出
? ? ? ? ? ? E：element
? ? ? ? ? ? A:attribute
? ? ? ? ? ? C：class
? ? ? ? ? ? M：common
? ? ? ? ? ? eg：<it-login></it-login> ? ? ? ? ?
priority:number ?//设置指令的优先级
triminal:boolean ? ? ?//停止优先级低于该指令级别的指令
template: string | function
templateUrl:'tmp.html' ? //设置模板的路径
replace：boolean ? ? //设置将指令标签替换成模板内容
scope：boolean ?| ? object ? //用于设置独立的作用域
? ? ? ? 取值为true表示继承作用域
? ? ? ? 直接赋值一个对象，这个就是独立的作用域（不参与集成的特例）
controller： string |?['$scope', function($scope){}] ? //设置事件的处理函数
require:string
link :function
compile:function
transclude: true ? ? （嵌入，转换包含，转置 ?） ? ?//将使用指令时传入标签内数据站换到模板中? ? ? ? ?
<body ng-app='mainApp'>
<div it-login>哈哈哈哈</div>
</body>
<script>
// 定义的语法：
angular.module('mainApp' ,[])
.directive( 'itLogin',[ function (){
return { // 指令的配置
transclude: true ,
template: '<div class="login" ng-transclude></div>'//结果就是模板中会显示'哈哈哈'
};
}])
</script>
29.路由
操作步骤：
1>下载angular.js和angular-route.js
2>在页面中放置一个容器
<ng-view></ng-view>
3>在创建模块的时候引入'ngRoute'
angular.module('mainApp',['ngRoute'])
4>在模块中有一个方法config是在程序运行之前被执行的，该方法中可以完成程序的预设值
在ng中config方法和run方法构成了程序运行红的预备和运行的行为
在config中配置路由信息，使用语法：
.config(['$routeProvider',function(){
$routeProvider
.when('/',{
template:''
})
.when('/',{
template:''
})
.otherwise({redirectTo:'/'})
}])
在路由中的参数，就是url中的#后面的内容(hash）
<body ng-app='mainApp'>
? ? ? ?<a href="#/">首页</a>
? ? ? ?<a href="#/a">a页</a>#/
? ? ? ?<a href="#/b">b页</a>
? ? ? ?<a href="#/c">c页</a>
? ? ? ?<ng-view></ng-view>
</body>
<script>
angular.module( 'mainApp',['ngRoute' ])
.config([ '$routeProvider', function ($routeProvider){
$routeProvider
.when( '/' ,{
template: '<h1>主页</h1>'
})
.when( '/a' ,{
template: '<h1>a页</h1>'
})
.when( '/b' ,{
template: '<h1>b页</h1>'
})
.when( '/c' ,{
template: '<h1>c页</h1>'
})
.otherwise({redirectTo: '/' });
}])
</script>
路由中的属性：
1>templateUrl
2>template
3>controller:函数 | 字符串
30.
移除路由的url中的#
1>在config方法中，配置$locationProvider,启用html5模式
( function (){
angular.module( 'mainApp' )
.config([ '$locationProvider', function ($locationProvider){
$locationProvider.html5Mode( true );
}])
})()
2>修改根路径为当前页面的路径
<head> <base href='/main/'>//设置根路径 </head>
3>修改所有的a标签的href属性
<body ng-app='mainApp'>
<a href="">首页</a> // /是根目录，需要去掉
<a href="a">a页</a>#/
<a href="b">b页</a>
<a href="c">c页</a>
<ng-view></ng-view>
</body>
31.服务：提供一些特定功能的对象（在ng中，服务就是被注入的对象）
? ? ?在ng中被定义用来使用的数据、对象、函数 ? 就是服务
factory
? 语法：
? module.factory('服务名',[function(){
? ? ?return 服务的本体
? }])
<body ng-app='mainApp'>
<div ng-controller='mainController'></div>
</body>
<script>
angular .module( 'mainApp.services' ,[])
.factory( 'myServer',['$http', function ($http){
// return 可以是数字 对象 函数
return 123 ;
//return function(str){console.log(str)};
//return $http;
}]);
angular.module( 'mainApp',['mainApp.services' ])
.controller( 'mainController', function ($scope,myServer){
// myServer('hello angualr')
//myServer.get(url)
// .success(function(data){console.log(data)})
})
</script>
service
?语法：
? ?module.service('服务名',构造函数)
? 与
module.factory('服务名',function(){
? ? ?return new 构造函数名()
? })等价
constant：定义常量变量（不可变）//可以定义在config之前
?语法：
?module.constant('服务名',值)
value：定义变量（可变的）
语法：
?module.value('服务名',值)
provider
?语法：
?module.provider('服务名',{
? ?$get:function(){//必须提供$get方法
? ?return ?服务本体
? }
?})
?32.项目结构
yeoman工具
1>安装yo工具
? ? npm install -g -o
2>安装angular 模板(gulp版本)
? npm install ?-g ?generator-gulp-angualr
3>运行yo下载模板依赖
? ?很据需求下载数据即可
? ?npm install ?& bower install
?简单命令：
? mkdir myapp ?//创建文件夹
33.angular内部算法原理
双向数据绑定 ?$scope.applay()
?
?脏值检测
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
? ? ??
?