Angular1.x基础知识

大小小丹

已于 2023-03-08 23:19:37 修改

阅读量1.4k

点赞数

分类专栏： angularjs 文章标签： angular.js 前端 javascript

于 2023-03-08 17:48:23 首次发布

本文链接：https://blog.csdn.net/baidu_30907803/article/details/129394767

版权

angularjs 专栏收录该内容

14 篇文章 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): 控制器-用来分配数据给视图显示(调度作用)；

代码示例：

<div ng-controller="ng1"> {{name}} {{age}} </div>

<div ng-controller="ng2">{{age}}</div>

注意点：

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

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

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

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

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

AngularJS：MVVM双向数据绑定模式

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

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

代码示例：

<script src="JS/angular.min.js"></script>

<script>

  // 文字两秒后变换

  function ng1($scope,$timeout){

    $scope.name="李";

    $timeout(function(){

      $scope.name="王";

    },2000);

  }

</script>

<div ng-controller="ng1"> {{name}}</div>

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

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

实现：

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

代码示例：

<html ng-app=”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';

}]);

 

<div ng-controller="a"><p>{{name}}</p></div>

<div ng-controller="b"><p>{{name}}</p></div>

<div ng-controller="c"><p>{{name}}</p></div>

注意点：

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

AngularJS：过滤器的使用

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

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

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<script src="http://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
    <div ng-controller="personCtrl">
        <h1>{{ message|reverse }}</h1>
        <input type="text" ng-model="message">
    </div>

    <script>
        var app = angular.module('myApp', []);
        app.filter("reverse", function(){
            return function(text){
                return text.split("").reverse().join("");
            }
        });
        app.controller('personCtrl', function($scope) {
            $scope.message = "test";
        });
    </script>

</body>
</html>

更多资料请参考官网filter

AngularJS：ng-repeat指令

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

<h1 ng-repeat="x in records">{{x}}</h1>

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

<li ng-repeat="x in names | filter:test | orderBy:'country'">
    {{ (x.name | uppercase) + ', ' + x.country }}
</li>

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

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

例如：

<li ng-repeat="x in names" class="{{$odd ? 'odd' : 'even'}}">
    {{ $index +  (x.name | uppercase) + ', ' + x.country }}
</li>

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

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

<span ng-repeat-start="data in items" class="{{$odd ? 'odd' : 'even'}}">{{data.name}}</span>
   <span> {{ $index +  data.age }}</span>  // 会在循环体中
   <span> {{ $index +  data.sex }}</span>  // 会在循环体中
<p ng-repeat-end="x in names" ></p>

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 相关指令

<h5 ng-bind="text"></h5>

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']] //二维数组
<div ng-controller = "ng">
  <div ng-repeat="a in arr" ng-init="aindex=$index">
     <div ng-repeat="b in a" ng-init="bindex=$index" 
           ng-bind-template="{{b}}:{{aindex}}.{{bindex}}"></div>
  </div>
</div>

6.2. ng-include 加载模板；

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

<div ng-controller="ng" ng-include="'test.temp.html'"></div>

6.3. ng-model 模型赋值；

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

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

<input type="text" ng-model="w" ng-model-options="{updateOn:'blur'}">
// show
<p ng-bind="w"></p>

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中
<div ng-controller="aaa as obj">
    {{obj.name}} // -> list
    {{obj.show()}} // -> hello word
</div>

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中
<div ng-controller="ng">
	<div class="ng-tab"></div> // 使用了ngTab指令，到时会使用test.html替换这里的内容渲染
</div>

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）请求

$l oc a t i o n 服务以及$ 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()：获取协议；

$an c h or S cro ll () 服务 (结合$ 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中
<div ng-controller="myController">@@name@@</div> // 输出'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中
<body ng-controller="ng">
	<a href="#index">首页</a>
	<a href="#product/5">产品</a>
	<a href="#shopping">购物</a>
	<a href="#user">个人中心</a>
	<div ng-view></div>
</body>

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

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

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

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

<a href="" ng-click="$location.path('/product/5')">产品</a>
<a href="" ng-click="$location.path('/shopping')">购物</a>

在控制器里面注入$location

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

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

服务内部事件广播：

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

例如：

<div ng-controller="d1">
	{{count}}
	<div ng-controller="d1" ng-click="count = count + 1">
		{{count}}
		<div ng-controller="d1">
			{{count}}
		</div>
	</div>
</div>

向上广播：

<div ng-controller="d1">
	{{count}}
	<div ng-controller="d1" ng-click="$emit('eventme')">
		{{count}}
		<div ng-controller="d1">
			{{count}}
		</div>
	</div>
</div>
// js中使用$on监听设置向上广播
$scope.$on('eventme',function(){
	$scope.count = $scope.count+1;
})

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

<div ng-controller="d1">
	{{count}}
	<div ng-controller="d1" ng-click="$broadcast('eventme')">
		{{count}}
		<div ng-controller="d1">
			{{count}}
		</div>
	</div>
</div>
// 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();
}])