AngularJs
angular
数据双向绑定的框架
提供数据绑定，DOM指令。angular，定义了一套规则，开发中就必须遵守规则，这套规则为项目提供了一套解决方案。
模块，控制器，指令，过滤器,服务,模板(插值)，路由
基础指令
ng-app
应用程序的指令，一个程序中必须要有该指令
ng-model
数据绑定的指令，将数据绑定到应用程序中
ng-bind
绑定数据，它的简写方式直接在元素中{{key}}
{{ msg }}当页面加载完毕，angularjs启动起来，首先回去页面中寻找ng-app指令，找到后初始化应用程序。
ng-app告知angular这个应用是绑定那个DOM元素，也就是程序初始化的元素时body，所以以后绑定的指令能够生肖的只能在ng-app所在的元素中
angularjs找到ng-model指令，它将该指令对应数据绑定在该程序的作用域中。
angularjs找到ng-bind或者{{key}} 指令，它将数据渲染到该元素内。
angularjs遍历其它指令，完毕后，就可以使用应用程序。
ng-init
表示初始化应用程序中的变量，多个变量用; 注意定义多个变量不能用逗号，只能用分号;
{{ info }} {{ msg }}module
通过angular.module方法
该方法有两个参数
参数1，表示程序的名称。
参数2，表示依赖服务(依赖集合)
依赖就是达到某个目的的必要条件(不可或缺)。
var app = angular.module('app', []); controller控制器
定义控制器
App的controller方法：
两个参数
第一个参数表示控制器的名称
第二参数表示控制器的构造函数
参数是你需要的数据，需要什么可以传递什么，这样在构造函数中就可以使用它，如果没有传递就无法使用
ng-controller 控制应用程序的，后期对某一视图动态改变的作用
定义控制器
app.controller();
参数1：控制器名称
参数2：控制器的回调函数(构造函数)
回调函数的参数是所需要的数据，需要什么可以传递什么，这样在回调函数中就可以使用它，如果没有传递就无法使用
angular参数注入：想用什么东西就在参数中注入。
不要再控制器中操作 DOM。 通过指令完成。
通过控制器完成的功能命名控制器,并以字符串Ctrl结尾，例如：(HomePageCtrl)
控制器不应该全局中定义
尽可能精简控制器，将通用函数抽线为独立的服务
通过方法引用进行跨控制器通讯(通常是子控制器与父控制器通讯) 或者 $emit,$broaadcast 以及 $on 方法。发送或广播的消息应该限定在最小的作用域。
置顶一个通过 $emit，$boradcast 发送的消息列表并且窒息的管理以防止命名冲突
在需要格式化数据时，将格式化逻辑封装成 过滤器
// 控制器app.controller('msg', function ( $scope ) { console.log( this ); console.log( arguments );});控制器$scope
$scope: 用来实现数据与视图的连接，在$scope上定义的数据，可以用视图在上，那么视图上绑定的数据可以在$scope上也能获取到
$scope 是通过原型式继承实现， 子作用域会继承父作用域中的变量，但是可以为子作用域添加变量还重写符作用域中的变量。
{{ msg | CaseChar }}
{{ msg | CaseChar : true }}
app.filter('CaseChar', function () {
return function ( val, FirstToUpper ) { if ( val ) { // FirstToUpper 参数 表示第一个字母大写 if ( FirstToUpper ) { // 第一个字母 大写 val = val.replace(/^[a-z]/, function ( match, $1 ) { return match.toUpperCase(); }); } // 存在输入的val 值 转驼峰 return val.replace(/_([\w])/g, function ( match, $1 ) { return $1.toUpperCase(); }); } return '';}});
# 表单验证当对表单元素form添加name属性时候，angular会自动将该属性的值添加到作用域中，并且该属性具有表单验证的属性. 具有FormContorller对象$dirty 表单是否被用户输入过，输入过，值为true，没有输入过值为false$pristine 表单是否被用户输入过，输入过，值为false，没有输入过值为true$valid 输入的值是否合法，合法值为true，不合法为false$invalid 输入的值是否合法，合法值为false，不合法为true$valid 属性值为true时，所有表单元素必须$valid都是true$invalid 属性为true时，只要有一个表单元素$invalid之为true$dirty 属性为true时，只要有一个表单元素被修改过，$dirty值为true$pristine 属性为true时，所有的元素未被修改过，那么$pristine值为true用户名：输入的长度大于5邮箱：
输入内容必须是emial
输入的内容必须是4-6位数字
# run-$rootScope获取app并执行(程序入口指令会提供一个run方法)，通常会在该方法中访问根作用域，该方法接收一个函数作为参数，函数中的this指向window，因此可以访问到全局作用域下的变量。arugments默认没有值，需要什么值，需要通过参数注入来供函数内使用。作用：处理的是根作用域，因此通常要将$rootScope传递进来.app.run(function ( $rootScope ) {
});
**controller与作用域**var app = angular.module('main', []);
app.controller('parentCtrl', function ( $scope ) {
$scope.clickParent = function () { $scope.msg = 'parentScope';}}).controller('childCtrl', function ( $scope ) {
$scope.clickChild = function () { $scope.msg = 'childScope';}});
// rootScope
app.run(function ( $rootScope ) {
$rootScope.msg = 'rootScope';})
console.log( app );
# ng指令**ng-disabled**表单是否可以操作**ng-readonly**表单是否是只读**ng-checked**选择框是否被选中值为true：选中值为false：未选择**ng-change**监听输入表单内容的改变，当表单内容改变的时候就会触发.改变的时候，需要知道数据是否更改，需要加上ng-modelapp.controller('inp', function ( $scope ) {
$scope.change = function () { alert($scope.msg);}});
**ng-submit**对form表单元素绑定submit事件，当点击表单中submit元素时候，会触发该事件ng-submit需要搭配标签form使用**ng-src**浏览器打开页面，浏览器不认识ng-src属性，所就不会发请求，那么当ng-src绑定的数据imgSrc有数据的时候，angular会把这个数据赋值给src属性，让img标签发送一个请求**ng-href**当浏览器打开页面的时候，元素不具有href属性，就不具有链接行为(为# 号却能够点击)，ng-src对这一现象做了优化，当ng-href绑定的数据加载成功后，将这一属性值，赋值给a标签的href属性，让a标签具有连接的行为。跳转
**ng-class**是用来动态创建类的一个指令，它的只是一个对象，对象中的舒心代表类的名称，属性值只能是一个Booleantrue，会将该类名添加到元素的class属性中。false，会将该该类名从该元素的class属性中删除。4, green: ngClassInfo {{ ngClassInfo }}
**ng-style**用来动态创建样式，它的值是一个对象，对象中的属性表示css属性，值为css属性值。**ng-if** 判断指令.angular中没有ng-else指令，可以通过ng-if模拟111111111111
222222222222
**ng-switch**分支判断当元素这是了ng-switch，元素是一个ie分支判断的模板，所有分支都要包含在该元素内。通过on指令来设置判断条件，ng-switach和on配合使用ng-switch-when="key"：表示判断某一条件，当on的绑定的数据值为该分支对应的值的时候，执行。默认11112222**ng-repeat**循环渲染模板语法： ng-repeate="item in list";内置变量$index 循环的索引值，从0开始计数$first 第一次循环是true，其它次循环是false$last 最后一次循环是true，其它此循环是false$middel 除去第一次和最后一次值是true $even 偶数次循环是true，奇数次循环是false$odd 奇数次循环是true，偶数次循环是false{{ item }} --- {{'索引值:'+$index}} --- {{ $middle }}**ng-include**模板定义在单独文件中，通过ng-include引入进来.ng-include="url" 注意url是字符串// 数据传输
var aMsgApp = app.controller('aMsg', function ( $scope ) {
$scope.msg = '载入成功';});
1. 使用 ng-bind 或者 ng-cloak 而 不是使用 {{}} 插值方式，防止页面渲染闪烁1. 避免在插值中使用复杂代码1. 需要动态设置 的 src 时使用 ng-src 而不使用 src中嵌套 {{}}1. 需要动态设置 的 href 时使用 ng-href 而不是用 href 中嵌套 {{}}1. 通过对象参数和scope变量作为值来使用 ng-style 指令， 而 不是使用 scope 变量作为字符串通过 {{}} 用于 style 属性。# 自定义指令## directive();参数1： 指令的名称参数2： 构造函数，自定义指令式，只执行一次，将一些复杂业务逻辑放在该函数中，最后改函数返回是一个对象(用来描述指令)规则：1. 使用小驼峰命名。1. 在link function 中使用 $scope 。 在compile中， 定义参数的post/pre link functions 将在函数执行时被传递，无法通过依赖注入改变它们。1. 指令添加自定义前缀避免与第三方指令冲突1. 可复用组件创建独立作用域1. 使用 scope.$on('$destroy', fn) 来清除. 这点在使用第三方指令的时候特别有用.## 返回对象restrict: 自定义指令的类型E,该指令是一个自定义元素(element)A,该指令在元素时属性上(attributes)C,该指令在元素的类上(class)M,注释指令(comment)template: 传递的是模板字符串templateUrl: 模板文件的路径replace: false是否替换原有的元素，true会替换掉原有的元素，false不会替换掉元素。当设置true时，会对controller中使用的参数$element 和 $attrs 有影响**controller**用来定义自定义指令的作用域。this 指向的controller{}空对象arguments默认情况下是一个空数组，需要参数注入。$scope 该指令的作用域$element 该指令的元素$attrs 该指令的元素的属性// directive() 自定义指令
app.directive('curtoms' , function () {
console.log(111);return { // 指令类型 restrict: 'EAC', // 模板字符串// template: '# 自定义指令',
// 模板文件获取 url templateUrl: 'a.html', // replace表示是否替换原来的元素，true是替换，false不替换// replace: false,
replace: true,
controller: function ( $scope, $element, $attrs ) { // this 指向 controller{} 空对象 console.log( $scope, $element, $attrs ); }}});
**scope**隔离自定义的作用域的属性，通过对其社会字一个对象来隔离指令的作用域。如果值是true或者false，指令的作用域就会忽略自身作用域，而去寻找父级作用域中的变量。如果值是空对象{} ，作用域会指向该空对象directive返回对象中的scope和controller自定义指令中，scope属性对controller的影响：如果scope的值是true，在controller中，定义与父作用域中相同变量时，自定义指令中的变量不会受到副作用于中的变量的影响。如果scope是一个false，在controller中，定义与父作用域相同变量时，该变量与父作用域中的变量同步(同时修改，数据双向绑定)如果scope是一个对象，在controller中，定义与父作用域相同的变量时，自定义指令中的变量不会收到父作用域的变量影响。app.directive('myCutom', function () {
return { restrict: 'E', template: '# {{ msg }} -- {{ title }}', // scope: {}, // scope: true, scope: false controller: function ( $scope, $element, $attrs ) { $scope.title = 'aaaa'; $scope.msg = 'xixixi'; }}});
@修饰符可以屏蔽模板中变量去controller作用域中寻找值的过程，而是让其去该**自定义指令所在元素的属性中寻找数据变量**. 忽略自定义指令的scope。@修饰符会去自定义指令中所在元素的属性去寻找。属性值是插值传入，作为普通属性处理。app.directive('myCutom', function () {
return { restrict: 'E', template: '# {{ msg }} -- {{ title }}', scope: { // 告知 自定义指令 不需要从 自己的作用域中寻找 变量 title: '@myTitle' }, controller: function ( $scope, $element, $attrs ) { $scope.title = 'aaaa'; $scope.msg = 'xixixi'; }}});
=修饰符通过在scope属性中定义含有=修饰符的变量时，可以取得父作用域中的变量，通过属性映射.作用：自定义指令作用域中变量与父作用域的**双向绑定过程**.注意：自定义元素中的属性值是一个父作用域中的一个变量，在自定义指令中当作一个变量来处理。template,中的数据和 父级的作用域$scope,数据绑定tempalte: '# {{title}}',
app.controller('main', function ( $scope ) {
$scope.title = '';
});
**link** 操作自定义指令的DOM link的函数this指向windowarguments：1 scope， 指令作用域2 jqlite 获取自定义元素3 attrs 自定义指令元素上的属性// 操作自定义指令元素
// @param {Object} scope 子作用域
// @param {Object} jqlite JQ对象
// @param {Object} attrs 自定义上的属性
link: function ( scope, jqlite, attrs ) {
// this -> windowvar el = jqlite.children('h1').attr('nodeValue', 1);// 使用 data 自定义属性 ，会自动省略 data-for ( var i=0; i # 嘻嘻哈哈// 创建 appvar app = angular.module('app', []);// 创建控制器app.controller('main', function ( $scope ) {});// 自定义指令app.directive('myDirective', function () { return { restrict: 'E', // 自定义指令的编译方法 // @param {Object} jqlite 获取自定义指令元素 // @param {Object} attrs 自定义指令所在元素上的样式 // @return {Function} cb 指代 link compile: function ( jqlite, attrs ) { // this -> compile 对象 return function ( scope, jqlite, attrs ) { // this -> window var color = attrs.color; jqlite.css('color', color); } } }});**transclude** 它告诉自定义指令，要将自定义元素中未知的元素内容插入到已知模板具有ng-transclude指令所在的元素中(添加自定义指令元素中的未知元素)未知元素：自定义标签中的元素.告知自定义指令，要将自定义中未知的元素内容插入到已知模板。条件： 模板标签上具有ng-transclude指令需要设置 transclude: true. 现象：模板标签会包裹自定义标签内的内容.app.directive('myDirective', function () {
return { restrict: 'E', template: '', transclude: true }});
**require** 自定义指令引用其它指令，作为link()方法的第四个参数.例如，将ngModel引入到自定义指令中. 在link方法中可以访问到ngModel中的属性值require: 'ngModel'
// 自定义指令
app.directive('myDirective', function () {
// 返回一个描述指令对象return { restrict: 'A', // 引入其它指令 require: 'ngModel', link: function ( scope, jqlite, attrs, ngModel ) { // $watch 检测某个值 发生改变，触发某个函数 // 当 ngModel 值发生改变， 触发函数 scope.$watch(attrs.ngModel, function () { console.log(ngModel.$viewValue); }); }}});
# 服务对一些方法的封装，复用方法更为简便。例如：消息系统，作为消息服务.使用服务，利用参数注入即可。1. 大驼峰和小驼峰都可1. 将业务逻辑封装成服务1. 将业务逻辑封装成 service 而非 factory1. 使用 $cacheFactory 进行绘画级别的缓存。 应用于缓存请求或复杂运算的结果。## 内置服务**$timeout**对setTimeout()的封装app.controller('main', function ($scope, $timeout) {
$timeout(function () { console.log(this); console.log(arguments);}, 2000);});
**$interval** 对setInter();的封装app.controller('main', function ($scope, $interval) {
// 定义一个时间
$scope.date = new Date();
$interval(function () { // 重新定义日期 $scope.date = new Date();}, 1000);});
**$http** 异步请求配置参数:method： 请求方式 "GET","POSt"url: 请求的地址$http 方法执行完后链式调用success(),请求成功的回调函数POST请求：通过设置data属性添加POST请求发送数据params属性添加请求的参数数据// $http 服务
$http({
method: 'GET',
url: 'data/service.json'
}).success(function ( res ) {
if ( res.errno === 0 ) { $scope.msg = res.msg; console.log(res);}});
$http({
method: 'POST',
url: 'demo.json',
// 该属性会将键值对转化成url上参数
params: {
id: 11
},
// post请求 添加请求数据
data: {
username: 'aa'
}
});
**$http.get，$http.post** $http服务中的get请求和post请求简写方式params 配置请求参数// get 请求
$http.get('data/service.json', {
params: {
id: 1
}
})
// 请求成功
.success(function ( res ) {
console.log( res );});
// post 请求
// 参数1：url ，参数2：请求携带的数据
$http.post('data/service.json', {
id: 1
})
// 请求成功
.success(function ( res ) {
console.log(res);});
**promise对象**允诺对象，在内部是一个异步操作，当操作完成时，这个对象会实现它的允诺.特点： 可以无限添加允诺。 一定在某些操作完成时才出发。规范中允诺对象使用 then方法.## 自定服务需要各种服务以支持各种功能，也可以手动开启或关闭某些服务以达到相应的功能.**factory()**工厂模式定义自定义服务参数1：服务名称参数2：服务工厂方法返回值：服务对象，这个对象提供其它控制器使用var app = angular.module('app', []);
// 其它控制器使用服务
app.controller('facotryCtrl', function ( $scope, news ) {
$scope.msg = news.data;});
// factory 定义 服务
app.factory('news', function () {
return { data: '嘻嘻哈哈'}});
**service** 面向对象创建服务参数1：服务名称参数2：服务的构造函数(构造函数中需要使用this来暴露接口)// 使用 service 自定义服务
app.service('data', function () {
this.title = '嘻嘻哈哈';});
#JavaScript、angularjs、anglar#版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
