angular（1.5.8）

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.框架和库

库：是一堆按照功能分类的方法，对象数据的集合，目的就是将用户开发的代码简化方便

框架：框架是一种结构，该结构规定了用户该如何使用，按照这个结构编写代码

模块：一般将具有一类功能的数据，方法，对象等组合到一起，构成一个模块

组件：模块的功能化的结果，可以独立完成一个具体逻辑的全部内容的集合

ng-app：ng从此处开始处理，这里就是view

*：一个页面中只能出现一个ng-app，如果出现多个的话，后面的都无效。。。

*：如果想要使用多个ng-app，需要使用angular.bootstrap方法

<body><div id="qwert"><input type="text" ng-model="inputData"><span>{{ inputData }}</span></div><div id="qqq"><input type="text" ng-model="inputData"><span>{{ inputData }}</span></div>
</body>
<script src="./js/angular.js"></script>
<script >angular.module( 'mainApp1', [] );angular.module( 'mainApp2', [] );// bootstrapvar 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.com/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 关系

外: modelA: <input type="text" ng-model="modelA">

内: modelB: <input type="text" ng-model="modelB"><br>
内: modelA: <input type="text" ng-model="modelA">
<button ng-click="btn()">点击访问</button>
</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 的 loacalStoragevar list = JSON.parse( localStorage.getItem( 'userData' ) || '[]' );// 第一次进来的时候 是一个 空 即 数组list.push( this );// 存储localStorage.setItem( 'userData', JSON.stringify( list ) );}// 将查找的功能交服务器完成就是配置一个 url 地址: http://www.xxxx.com/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://www.baidu.com"/><frame src="http://www.itcast.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>

- 语法
- 表达式
{{ 数据 | 过滤器名: 参数 }}
所谓的过滤器名, 其实就是一个函数, 其中竖线表示的含义是将前面的 "数据" 作为参数传入到过滤器这个函数中.
那么函数的第一个参数就是前面的数据. 但是为了可以控制函数的具体实现, 函数还可以带有其他参数. 在过滤器名
后面用冒号连接的内容就是参数, 如果有多个参数, 例如两个参数的时候, 使用语法

- 自定义过滤器
使用语法
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>'};}])

//自定义指令的使用：

自定义指令的属性：

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'>

</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()

脏值检测

转载于:https://www.cnblogs.com/luxiaoxiao/p/6411234.html

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

angular教程
1 前言前端技术的发展是如此之快，各种优秀技术、优秀框架的出现简直让人目不暇接，紧跟时代潮流，学习掌握新知识自然是不敢怠慢。 AngularJS是google在维护，其在国外已经十分火热，可是国内的使用情况却有不小的差距&am…...
2024/4/21 2:44:54
angular路由详解
angular路由路由 (route) ，几乎所有的 MVC(VM) 框架都应该具有的特性，因为它是前端构建单页面应用 (SPA) 必不可少的组成部分。那么，对于 angular 而言，它自然也有内置的路由模块：叫做 ngRoute 。不过&#xff0c…...
2024/4/20 3:38:26
Angular 核心概念
module（模块） 作用通过模块对页面进行业务上的划分,根据不同的功能划分不同的模块。将重复使用的指令或者过滤器之类的代码做成模块，方便复用注意必须指定第二个参数，否则变成找到已经定义的模块请参照资料-备课代码-20-module.…...
2024/5/3 2:17:35
angular知识点总结
angularjs angular支持的运算逻辑运算比较运算三目运算调用字符串对象的成员方法使用直接变量表示法创建对象使用数组 (不可以)new var (不可以)调用全局es javascript对象中的分类 1)ECMAScript标准对象 Global String Data RegExp Array Object 可以在任何一个js解析器…...
2024/4/20 20:18:39
angularjs 与 springmvc 遇到的一些问题
使用angular的$http发送一个请求，data中存放请求数据，后台使用requestParam获取不到。使用postman测试后台api，发现把参数以url parameter形式发送requestParam可以接收；以application/x-www-form-urlencoded格式也可以接收&…...
2024/4/20 10:09:47
从 MVC 到前后端分离
从 MVC 到前后端分离 1 理解 MVC MVC 是一种经典的设计模式，全名为 Model-View-Controller，即模型-视图-控制器。其中，模型是用于封装数据的载体，例如，在 Java 中一般通过一个简单的 POJO（Plain Ordi…...
2024/4/20 20:18:37
spring mvc的概述
目录spring MVC一、什么是spring MVC二、传统的b/s架构与spring mvc的架构有区别三、spring mvc开发的流程四、spring mvc 处理器controller的参数的绑定五、jsp中关于Date类型数据的显示六、Spring mvc与Json数据交互spring MVC 一、什么是spring MVC spring mvc : 基于web层…...
2024/4/21 2:44:52
深入浅析angular和vue还有jquery的区别
angularjs简单介绍和特点首先angular是一个mvc框架, 使用mvc解耦, 采用model, controller以及view的方式去组织代码, 会将一个html页面分成若干个模块, 每个模块都有自己的scope, service, directive, 各个模块之间也可以进行通信, 但是整体结构上是比较清晰的, 就是说其代码…...
2024/4/25 4:27:21
angular之路由的理解
转载自：http://www.cnblogs.com/lovesueee/p/4442509.html 路由(route)，几乎所有的MVC(VM)框架都应该具有的特性，因为它是前端构建单页面应用(SPA)必不可少的组成部分。那么，对于angular而言，它自然也有内置的路由模块…...
2024/5/2 22:56:19
【ELK+angular行为分析】
中间有过改动的地方，想想还是留着之前的，记录一下这个思考、变化的过程哇~终于到写博客的时候了行为分析：分析什么（用户的行为） 前端是angular，借助其自带的指令收集用户行为； 后端借助E…...
2024/4/24 16:53:54
angular 文件上传ng-change无效
angular.js 文件上传ng-onChange无效 html改用onchange方法如下 <input typefile onchange "angular.element(this).scope().changeFn(this.files)"> js方法 $scope.changeFn function(obj){ var fileName obj[0].name; ..... }...
2024/4/30 20:13:41
angular2 文件上传
ng2-file-upload文件上传 1、安装ng2-file-upload模块 npm install ng2-file-upload --save 2、如果使用systemjs打包，需要在配置systemjs.config.js文件 A、在System.config的map字段中的最后一行输入以下字段：ng2-file-upload:npm:ng2-file-uploadB、在…...
2024/4/30 6:30:39
Angular4 里面用post上传文件无返回数据
参考：https://valor-software.com/ng2-file-upload/...
2024/4/21 2:44:46
nz-upload 文件上传 - Angular
此次对于数据列表的文件导入通过 nz-upload 来实现，官方 Upload 上传文档中很详细，具体需要配置的参数均可查阅到； <nz-upload [nzAction]"uploadingFile"[nzHeaders]"uploadingHeader"[nzShowUploadList]"fal…...
2024/4/20 11:11:12
Angular2 + NodeJs 上传图片到服务器
一个小小的功能，花了接近一天的时间才搞定。网上虽然有很多关于Angular2 上传图片的博客，但基本对我都帮助不大。大多数博客的问题在于，他们只是贴了大段的代码，完全没有强逻辑性的文字描述，大大提高了别人从博客中学习…...
2024/4/27 3:02:15
angular-file-upload API angular文件上传插件
官方例子 ： http://nervgh.github.io/pages/angular-file-upload/examples/simple/ Directives nvFileSelect 在<input type"file" />上使用通过验证之后文件将会被添加到上传队列.nvFileDrop 设置一个拖拽区域，一般都是设置在body上…...
2024/4/21 2:44:43
angular 上传图片，上传文件，将文件转base64编码和二进制编码上传
angular 上传图片，上传文件提示虽然题目说是angular的，但是其实js，和vue的也可以用，因为之前学angular的时候，那时候还不太熟js，网上关于上传文件的东西找了很久，很难受，所以为了方便…...
2024/4/21 2:44:42
angular js上传文件夹(批处理)
最近项目里有一个小需求，要求上传文件夹进行后台批处理，嗯，想想感觉挺简单，毕竟H5的input file 便签有个webkitdirectory上传文件夹的特性， 做了个demo，在jsp页面中完美实现，可是嵌套了jquery语…...
2024/4/21 2:44:42
angular file upload 文件上传
上传部分测试代码： Test public void testFileUpload() throws IOException { //假设路径和文件 UploadController uc new UploadController(); String name "n"; String originalFilename "a.pdf"; String contentType "pdf"; …...
2024/4/21 2:44:40
Angular6项目upload上传图片功能实现
根据angular6的特性，我们选择符合其本身的框架ng-zorro，这是一款angular的框架，详情请了解ng-zorro官网。上传图片功能是根据ng-zorro的upload插件进行修改参数值，从而符合我们的需要的功能，具体实现如下&#xff1a…...
2024/4/28 15:10:54

angular（1.5.8）

相关文章

最新文章