Angular1.x基础知识

申昌勋
2023-12-01

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();
操作步骤:

  1. 调用模块里面的 filter() 方法 返回一个函数 其中参数 str 代表定义的变量的值
  2. 在模型中定义变量
  3. 在视图中调用自定义的过滤器显示输出
    如:
<!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) 属性、自定义循环的开始和结束
属性:

  1. $index: 返回数据的索引 从0开始;

  2. $first: 返回布尔值 索引在第一个的为true,其他都是false;

  3. $last: 返回布尔值 索引在最后一个的为true,其他都是false;

  4. $middle: 返回布尔值 索引在中间的为true,其他都是false;

  5. $even: 返回布尔值 索引在偶数位置的为true,其他都是false;

  6. $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:指令

  1. 事件指令:

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 内容复制 / 剪切 / 粘贴 ;

  1. input指令:

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

  1. ng-bind指令:

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

<h5 ng-bind="text"></h5>
  1. 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)属性名;

  1. DOM操作相关的指令:

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

  1. 指令扩展:

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>
  1. 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(模型)的角色。

  1. 学习AngularJS内置的一些服务。

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

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

m1.controller('ng',['$scope', '$timeout','$interval' function($scope, $timeout,$interval){
}])
  1. 自定义服务。
// 自定义一个服务,用于转换数据成16进制
app.service('myService',function(){
  this.myFun=function(x){
    return x.toString(16);
  }
})
  1. $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)请求

  1. l o c a t i o n 服务以及 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(): 获取协议;

  1. a n c h o r S c r o l l ( ) 服务 ( 结合 anchorScroll() 服务(结合 anchorScroll()服务(结合location做瞄点功能,实现页面跳转):
m1.controller('ng',['$scope', '$location','$anchorScroll' function($scope, $location,$anchorScroll){
	$scope.goTo = function(id){
	 	$location.hash('div'=id);
	 	$anchorScroll();
	}
}])

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

  1. $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要在最上面定义):

  1. 修改定界符号配置。->相当于自定义字符串识别变量是哪个控制器的
  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'
  1. 修改锚点阻止自动滚动配置。
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();
	}
}])
  1. 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实现路由的切换
路由切换:

  1. 使用$location.path() 生成路径,但是生成的路径后面的参数只能有一个。
<a href="" ng-click="$location.path('/product/5')">产品</a>
<a href="" ng-click="$location.path('/shopping')">购物</a>
  1. 在控制器里面注入$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>
  1. 向上广播:
<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;
})
  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;
})
  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动画插件的简单使用:

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

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

  1. 通过JS实现运动效果,实现更复杂的操作;
  2. ngAnimate动画插件的使用

AngularJS:ngResource数据交互插件

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

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