Angular1.x基础知识

创始人

2024-05-30 18:52:23

0次

Angular1.x特性

AngularJS：MVC模式
AngularJS：MVVM双向数据绑定模式
AngularJS：模块化处理以及代码压缩问题
AngularJS：过滤器的使用
AngularJS：ng-repeat指令
AngularJS：指令
AngularJS：服务
AngularJS：供应商概念
AngularJS：ng-route 路由插件
AngularJS：服务内部事件两种广播方式
AngularJS：animate动画插件的简单使用
AngularJS：ngResource数据交互插件

AngularJS：MVC模式

AngularJS 第一大特性采用MVC模式设计：使数据分离更加便于维护与修改。

M(model): 模型-用来处理数据；

V(view): 视图-用来显示数据；

C(controller): 控制器-用来分配数据给视图显示(调度作用)；

代码示例：

 {{name}} {{age}} 
{{age}}

注意点：

ng-app 指令：在哪里注入就说明从哪里开始用angular解析。

ng-controller 指令：指定该区域使用哪个控制器来解析。

$scope 局部范围变量：定义的变量只能在该函数内部使用。

$rootScope 全局范围变量：定义的变量可以在全部范围中使用。

{{变量名}} 在视图层中用 { { } } 符号来解析变量内的数据。

AngularJS：MVVM双向数据绑定模式

AngularJS 第二大特性采用MVVM模式设计：使模型与视图层相互关联，更加方便使用。

模型变化视图也跟着变化，视图变化模型也跟着变化。

代码示例：

 {{name}}

AngularJS：模块化处理以及代码压缩问题

AngularJS 第三大特性分模块化处理：减少全局变量的污染（减少变量的冲突）; 减少模块与模块之间的依赖（模块1出错了，不影响模块2）; seaJS saas模块化处理的框架

实现：

先定义模块angular.module(‘模块的名称’,[‘依赖的其他模块’])
调用模块ng-app调用
代码压缩问题处理方法

代码示例：

var ng = angular.module('app',[]); // 定义模块// 绑定控制器ng.controller('a',['$scope',function($scope){    // 代码压缩问题解决$scope.name = 'angular1';}]);ng.controller('b',['$scope',function($scope){$scope.name = 'angular2';}]);ng.controller('c',['$scope',function($scope){$scope.name = 'angular3';}]);{{name}}
{{name}}
{{name}}

注意点：

代码压缩：项目完成后代码压缩会将形参压缩导致不能用，解决方法：在绑定控制器时第二个参数设置为数组，第一个元素为真是的作用域，第二个元素函数的参数对应前面真是的作用域。

AngularJS：过滤器的使用

AngularJS 过滤器的使用：更加方便的进行数据转换及数据排列。 模块名.filter();
操作步骤：

调用模块里面的 filter() 方法返回一个函数其中参数 str 代表定义的变量的值
在模型中定义变量
在视图中调用自定义的过滤器显示输出
如：







{{ message|reverse }}

更多资料请参考官网filter

AngularJS：ng-repeat指令

（1）ng-repeat 相当于for(var i in arr){} 在控制器中写数据使用ng-repeat指令循环到视图当中。

{{x}}

（2)结合ng-repeat指令与过滤器实现排序与模糊搜索

{{ (x.name | uppercase) + ', ' + x.country }}

（3) 属性、自定义循环的开始和结束
属性：

$index: 返回数据的索引从0开始；
$first: 返回布尔值索引在第一个的为true，其他都是false；
$last: 返回布尔值索引在最后一个的为true，其他都是false；
$middle: 返回布尔值索引在中间的为true，其他都是false；
$even: 返回布尔值索引在偶数位置的为true，其他都是false；
$odd: 返回布尔值索引在基数位置的为true，其他都是false。

例如：

{$odd ? 'odd' : 'even'}}">{{ $index +  (x.name | uppercase) + ', ' + x.country }}

自定义循环的开始和结束：

ng-repeat-start ng-repeat-end 在开始和结束中循环一个整体。

{$odd ? 'odd' : 'even'}}">{{data.name}} {{ $index +  data.age }}  // 会在循环体中 {{ $index +  data.sex }}  // 会在循环体中

AngularJS：指令

事件指令：

ng-click / ng-dblclick 单击 / 双击；
ng-mousedown / up 鼠标按下 / 抬起；
ng-mousemove / over / out 鼠标移动 / 移入 / 移出 ;
ng-keydown / up / press 键盘按下 / 抬起 / 按住 ;
ng-focus / blur 获得光标 / 失去光标 ;
ng-submit 提交 ;
ng-selected 下拉菜单默认被选择(与之前相比，可以加变量或者函数)
ng-change 内容改变事件经常结合ng-model指令使用
ng-copy / cut / paste 内容复制 / 剪切 / 粘贴 ;

input指令：

ng-disabled 按钮是否禁用(结合 $interval服务使用) ;
ng-readonly 输入框是否为只读模式 ;
ng-checked 复选框是否被选中 ;
ng-value 表单的值 ;

ng-bind指令：

在页面有alert() 弹出框时在点击弹出框确定前如果未使用
ng-bind相关指令，会将{{…}}显示出来，解决此问题的办法就是在视图当中使用 ng-bind 相关指令

CSS样式相关的指令：

ng-cloak 不常用控制css显示和隐藏 display:none ;
ng-class 增加class属性格式：ng-class= “{class名：true}”或false ;
ng-style 设置样式，格式： ng-style= “{{变量名}}”变量内容写json格式{color: ‘red’, background:‘red’} ;
ng-href 设置超链接格式：ng-href= “{{变量名}}”;
ng-src 设置图片src属性格式：ng-src= “{{变量名}}”;
ng-attr-(suffix) 设置属性格式：ng-attr-title=“{{变量名}}” / ng-attr-width=“{{变量名}}” / (suffix)属性名;

DOM操作相关的指令：

ng-show 控制显示隐藏返回布尔值 ;
ng-hide 控制显示隐藏返回布尔值 ;
ng-if DOM节点的添加删除操作返回布尔值 true表示创建节点 / false 表示删除节点；
ng-switch 不常用：返回布尔值true 显示 / false 隐藏 ;
ng-open 不常用兼容性不好： html5 open 属性返回true展开 / false 折叠；

指令扩展：

6.1 ng-init 初始化一个数据变量在嵌套循环中使用；
用法：在循环中套循环中将索引循环出来使用，不能用

标签循环。

$scope.arr = [['a','1','2'],['b','3','4'],['c','5','6']] //二维数组
{b}}:{{aindex}}.{{bindex}}">

6.2. ng-include 加载模板；

用法：加载外部模板，注意点：(1)必须在服务器环境下加载，(2)必须在引号中在加引号变成字符串不然会被理解成变量。

6.3. ng-model 模型赋值；

ng-model扩展： ng-model-options updateOn: “监控的事件名称”；

用法：在输入框输完文字失去光标后下面显示出文字来。


// show

6.4. ng-controller 绑定控制器；

ng-controller扩展：as面向对象用法：

// controller.js中
var m1 = angular.module('app', ['ngSanitize']);
m1.controller("aaa", ["$scope", Fn]);
function Fn($scope){}
Fn.prototype.name="list";
Fn.prototype.show = function(){return "hello word!"
}//  html中
{{obj.name}} // -> list{{obj.show()}} // -> hello word

AngularJS：自定义指令
与自定义过滤器一样，都是模块里面的方法，第一个参数是指令名称，第二个参数是一个函数方法，返回一个对象格式。例如：

// controller.js中
var m1 = angular.module("app", []);
m1.directive('ngTab',function(){return {restrict: 'C', // E 表示使用element 标签方式，A 表示Attribute 属性方式，C 表示Class属性方式templateUrl: 'test.html', //加载外部模板内容，要在服务器环境下访问repalce: true // 是否将定义的末班替换该指令}
})
m1.controller('ng',['$scope', function($scope){}])// html中
 // 使用了ngTab指令，到时会使用test.html替换这里的内容渲染

AngularJS：服务

AngularJS中的服务就是用来处理数据的，相当与MVC中的M(模型)的角色。

学习AngularJS内置的一些服务。

$timeout 对应了 JS window.setTimeout 函数
$interval 对应了 JS window.setInterval 函数。

要想使用这些服务，第一步需要先注入到控制器里面

m1.controller('ng',['$scope', '$timeout','$interval' function($scope, $timeout,$interval){
}])

自定义服务。

// 自定义一个服务，用于转换数据成16进制
app.service('myService',function(){this.myFun=function(x){return x.toString(16);}
})

$http服务
$http异步请求服务 get / post / jsonp

$http.get(‘/someUrl’, config).then(successCallback, errorCallback);
$http.post(‘/someUrl’, data, config).then(successCallback, errorCallback);

  var myApp = angular.module("myApp",[]);myApp.controller("myController",function ($scope, $http) {var dataUrl = "api/data.json";//获取数据$http({method:'GET',url:"api/data.json"}).then(function success(response){$scope.students = response.data;},function fail(response){alert('Error!');});// 另外一种写法(v1.5 中$http 的 success 和 error 方法已废弃。使用 then 方法替代。)$http.get(dataUrl).success(function (data) {$scope.students = data;}).error(function () {alert("出错");});})

如果使用的是angularJS，提供了跨域请求的方法
如果没有使用angularjs，需要自定义跨域请求的方法，服务器端一定要支持跨域（jsonp）请求

location服务以及location服务以及location服务以及anchorScroll服务
4.1 $location服务(地址栏中的服务)里面的方法：

4.1.1. absUrl() : 获取完成的文件路径；

console.log($location.absUrl())

4.1.2. paht()：路由地址，需要先设置；

$location.path('user'); // 先设置
console.log($location.path()); // 获取路由地址

4.1.3. search()：地址栏参数；

$location.search({name:'test', age: 10}); // 地址栏参数
// 浏览器地址显示如下
localhost:/xxxx#/user?name=test&age=10

4.1.4. hash()：跳转到id=*** 相当于锚点；

$location.hash('div1'); // 跳转到id=div1的位置

4.1.5. url()：获取文件后面的参数；

 console.log($location.url()); // 获取文件后面的参数
// 输出如下
/user?name=test&age=10#div1

4.1.6. host()：获取主机名；
4.1.7. prot()：获取端口号；
4.1.8. protocol()：获取协议；

anchorScroll()服务(结合anchorScroll() 服务(结合anchorScroll()服务(结合location做瞄点功能，实现页面跳转)：

m1.controller('ng',['$scope', '$location','$anchorScroll' function($scope, $location,$anchorScroll){$scope.goTo = function(id){$location.hash('div'=id);$anchorScroll();}
}])

实现瞄点页面内调整功能。$anchorScroll() 解决多次点击锚点没有反应的问题。

$cacheFactory缓存服务
$cacheFactory缓存服务：用于多个控制器之间使用缓存数据

// 控制器1
m1.controller('ng1',['$scope', '$cacheFactory',function($scope, $cacheFactory){var mycache = $cacheFactory('mycache'); //定义缓存对象mycache.put('name', 'zhangsan');console.log(mycache.get('name'));//读取缓存信息
}])
//控制器2
m1.controller('ng2',['$scope', '$cacheFactory',function($scope, $cacheFactory){var mycache = $cacheFactory.get('mycache'); //读取缓存对象console.log(mycache.get('name'));//读取缓存信息
}])

AngularJS：供应商概念

供应商概念：针对服务的相关初始配置工作(修改初始配置)。通过模块下面的 config([ ‘服务名称Provider’]) 进行修改(所有的配置要在config要在最上面定义)：

修改定界符号配置。->相当于自定义字符串识别变量是哪个控制器的

  var myApp = angular.module("myApp",[]);myApp.config(['$interpolateProvider', function($interpolateProvider){$interpolateProvider.startSymbol='@@';$interpolateProvider.endSymbol='@@';}])myApp.controller("myController",['$scope', '$interpolate', function ($scope, $interpolate) {$scope.name = 'zhangsan';}])
// html中
@@name@@ // 输出'zhangsan'

修改锚点阻止自动滚动配置。

myApp.config(['$interpolateProvider', function($interpolateProvider){$interpolateProvider.disableAutoScrolling();
}])
myApp.controller('ng',['$scope', '$location','$anchorScroll' function($scope, 
$location,$anchorScroll){$scope.goTo = function(id){$location.hash('div'=id);$anchorScroll();}
}])

AngularJS 中有三种方式自定义服务

3.1. provider: 默认不能使用系统内置的服务，但是可以在供应商config里面进行配置，而且只有provider定义的服务才可以使用 .config() ，只能在provider中修改定界符、手动滚动等配置

var myApp = angular.module("myApp",[]);myApp.provider(['myProvider', function(){return {name: 'xxx',fun: function(){...}}
}])
// 使用，不需要$
myApp.controller('ng',['$scope', 'myProvider' function($scope, 
myProvider){console.log(myProvider.name);console.log(myProvider.fun());
}])

3.2. factory: 可以使用系统内置服务，也可以使用 .config() 配置一些变量，并且可以使用this代表factory代表供应商，但是不能配置定界符、手动滚动。

var myApp = angular.module("myApp",[]);myApp.factory(['myFactory', function(){return {name: 'xxx',fun: function(){...}}
}])
// 使用，不需要$
myApp.controller('ng',['$scope', 'myFactory' function($scope, 
myFactory){console.log(myFactory.name);console.log(myFactory.fun());
}])

3.3. service:
可以使用系统内置服务，但是不能使用配置 .config()。推荐使用。

var myApp = angular.module("myApp",[]);myApp.service('myService', Fn)function Fn(){this.name: 'xxx',this.fun: function(){...}
}
Fn.propotype.age = 100;
// 使用，不需要$
myApp.controller('ng',['$scope', 'myService' function($scope, myService){console.log(myService.name);console.log(myService.fun());console.log(myService.age);
}])

以上三种都可以用于封装公共的服务，减少重复冗余的code.

AngularJS：ng-route 路由插件

现在使用的angular.min.js 的版本是：1.3，使用 ng-route插件的时候，他的版本要低于angular.js 的版本。

var myApp = angular.module("myApp",['ngRoute']);
myApp.config(['$routeProvider', function($routeProvider){$routeProvider.when('/index', {template: '', controller: 'index'}).when('/product/:productId', {template: '', controller: 'product'}) // 带参数路由.when('/shopping', {template: '', controller: 'shopping'}).when('/user', {template: '', controller: 'user'}).otherwise({redirectTo: '/index'})
}])
myApp.controller('ng',['$scope' function($scope){...
}])	// html中
首页产品购物个人中心

在控制器中使用参数通过 $routeParams服务：

myApp.controller('product',['$scope','$routeParams' function($scope, $routeParams){console.log($routeParams); //输出 {productId：5}
}])

AngularJS：$location服务结合ngRoute实现路由的切换
路由切换：

使用$location.path() 生成路径，但是生成的路径后面的参数只能有一个。

产品
购物

在控制器里面注入$location

myApp.controller('product',['$scope','$routeParams'，'$location' function($scope, $routeParams, $location){console.log($routeParams); //输出 {productId：5}
}])

AngularJS：服务内部事件两种广播方式

服务内部事件广播：

在嵌套div标签控制器中，给其中一个标签加了事件，也想让上面或者下面能够接收该事件，这时需要事件广播。

例如：

{{count}}{{count}}{{count}}

向上广播：

{{count}}{{count}}{{count}}

// js中使用$on监听设置向上广播
$scope.$on('eventme',function(){$scope.count = $scope.count+1;
})

向下广播，$broadcast，其他都一样：

{{count}}{{count}}{{count}}

// js中使用$on监听设置向上广播
$scope.$on('eventme',function(){$scope.count = $scope.count+1;
})

AngularJS：事件广播应用场景
事件广播：通常用来监听路由切换。

var myApp = angular.module("myApp",['ngRoute']);
myApp.config(['$routeProvider', function($routeProvider){$routeProvider.when('/index', {template: '', controller: 'index'}).when('/product/:productId', {template: '', controller: 'product'}) // 带参数路由.when('/shopping', {template: '', controller: 'shopping'}).when('/user', {template: '', controller: 'user'}).otherwise({redirectTo: '/index'})
}])
// run 运行块，在服务注入之后第一个运行的方法
myApp.run(['$rootScope', function($rootScope){$rootScope.$on('$routeChangeStart',function(event, current, pre){console.log(event); // 发生的事件console.log(current); //当前console.log(pre); //下一步}
}])
myApp.controller('ng',['$scope' function($scope){...
}])

AngularJS：animate动画插件的简单使用

animate动画插件的简单使用：

通过CSS3的方式实现动画效果；
通过css指令完成淡入淡出动画

ng-enter enter 开始时
ng-enter-active enter 结束
ng-leave leave开始时
ng-leave-active leave结束时

通过JS实现运动效果，实现更复杂的操作；
ngAnimate动画插件的使用

AngularJS：ngResource数据交互插件

ngResource 数据交互插件：类似于$http服务，基于RESTFul架构插件。

myApp.controller('ng',['$scope'，'$resource' function($scope,$resource){var obj = $resource('mess.json'); // 从json文件中获取数据$scope.data = obj.query();
}])

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：嵌入式物联网毕业设计选题智能图像识别项目-stm32mp157 linux开发板

下一篇：vue 中 v-for 的使用

Angular1.x基础知识

Angular1.x特性

AngularJS：MVC模式

AngularJS：MVVM双向数据绑定模式

AngularJS：模块化处理以及代码压缩问题

AngularJS：过滤器的使用

{{ message|reverse }}

AngularJS：ng-repeat指令

{{x}}

AngularJS：指令

AngularJS：服务

AngularJS：供应商概念

AngularJS：ng-route 路由插件

AngularJS：服务内部事件两种广播方式

AngularJS：animate动画插件的简单使用

AngularJS：ngResource数据交互插件

相关内容

热门资讯

Angular1.x基础知识

Angular1.x特性

AngularJS：MVC模式

AngularJS：MVVM双向数据绑定模式

AngularJS：模块化处理 以及代码压缩问题

AngularJS：过滤器的使用

{{ message|reverse }}

AngularJS：ng-repeat指令

{{x}}

AngularJS：指令

AngularJS：服务

AngularJS：供应商概念

AngularJS：ng-route 路由插件

AngularJS：服务内部事件两种广播方式

AngularJS：animate动画插件的简单使用

AngularJS：ngResource数据交互插件

相关内容

热门资讯

AngularJS：模块化处理以及代码压缩问题