总价：

字符串操作：
devbox
菜鸟追梦旅行
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Angular基础学习_angularis min怎么生成

作者：菜鸟追梦旅行 | 2024-02-07 17:30:37

赞

踩

angularis min怎么生成

  1. ng-init：
    数学运算：

     <div ng-app="" ng-init="quantity=1;cost=5">
 	<p>总价： <span ng-bind="quantity * cost"></span></p>
 </div>

    • 1
    • 2
    • 3

    字符串操作：

     <div ng-app="" ng-init="firstName='John';lastName='Doe'">
 	<p>姓名： {{ firstName + " " + lastName }}</p>
 </div>

    • 1
    • 2
    • 3

  2. ng-bind：

     ng-init="points=[1,15,19,2,40]"    // {{ points[2] }}，<span ng-bind="points[2]"></span>
 ng-init="person={firstName:'John',lastName:'Doe'}"
 <div ng-app="" ng-init="firstName='John';lastName='Doe'">
 	<p>姓名： <span ng-bind="firstName + ' ' + lastName"></span></p>
 </div>

    • 1
    • 2
    • 3
    • 4
    • 5

  3. ng-model: (动态监听输入数据)

     <div ng-app="" ng-init="firstName='John'">
  <p>在输入框中尝试输入：</p>
  <p>姓名：<input type="text" ng-model="firstName"></p>
  <p>你输入的为： {{ firstName }}</p>
 </div>
 
 验证：
 	<form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">
 		Email:
 		<input type="email" name="myAddress" ng-model="myText" required></p>
 		<h1>状态</h1>
 		{{myForm.myAddress.$valid}}
 		{{myForm.myAddress.$dirty}}
 		{{myForm.myAddress.$touched}}
 	</form>
 css:
 	<style>
 		input.ng-invalid {
 			background-color: lightblue;
 		}
 	</style>
 	<body>

 	<form ng-app="" name="myForm">
 		输入你的名字:
 		<input name="myAddress" ng-model="text" required>
 	</form>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

  4. ng-repeat

    <div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
 
<p>循环对象：</p>
<ul>
  <li ng-repeat="x    in names">
	{{ x.name + ', ' + x.country }}
  </li>
</ul>
</div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

  5. 创建自定义的指令

     <body ng-app="myApp">
 <runoob-directive></runoob-directive>

 <script>
 var app = angular.module("myApp", []);
 app.directive("runoobDirective", function() {
 	return {
 		template : "<h1>自定义指令!</h1>"
 	};
 });
 </script>
 </body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

  6. Scope:

     	<!DOCTYPE html>
 	<html>
 	<head>
 	<meta charset="utf-8">
 	<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
 	</head>
 	<body>

 	<div ng-app="myApp" ng-controller="myCtrl">
 		<input ng-model="name">
 		<h1>{{greeting}}</h1>
 		<button ng-click='sayHello()'>点我</button>	
 	</div>

 	<script>
 	var app = angular.module('myApp', []);
 	app.controller('myCtrl', function($scope) {
 		$scope.name = "Runoob";
 		$scope.sayHello = function() {
 			$scope.greeting = 'Hello ' + $scope.name + '!';
 		};
 	});
 	</script>

 	<p>当你修改输入框中的值时，会影响到模型(model),当然也会影响到控制器对应的属性值。</p>

 	</body>
 	</html>
 	
 	$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

  7. ng-controller:

     <div ng-app="myApp" ng-controller="namesCtrl">

 <ul>
   <li ng-repeat="x in names">
 	{{ x.name + ', ' + x.country }}
   </li>
 </ul>

 </div>
 <script>
 	angular.module('myApp', []).controller('namesCtrl', function($scope) {
 		$scope.names = [
 			{name:'Jani',country:'Norway'},
 			{name:'Hege',country:'Sweden'},
 			{name:'Kai',country:'Denmark'}
 		];
 	});
 </script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

  8. 过滤：

    自带过滤

     	<div ng-app="myApp" ng-controller="namesCtrl">
 		<p><input type="text" ng-model="test"></p>
 
 		<ul>
 		  <li ng-repeat="x in names | filter:test | orderBy:'country'">
 			{{ (x.name | uppercase) + ', ' + x.country }}
 		  </li>
 		</ul>
 	</div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    自定义过滤

     	var app = angular.module('myApp', []);
 	app.controller('myCtrl', function($scope) {
 		$scope.msg = "Runoob";
 	});
 	app.filter('reverse', function() { //可以注入依赖
 		return function(text) {
 			return text.split("").reverse().join("");
 		}
 	});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

  9. $http 服务：

    获取get请求数据

     var app = angular.module('myApp', []);
 app.controller('myCtrl', function($scope, $http) {
 	$http.get("welcome.htm").then(function (response) {
 		$scope.myWelcome = response.data;
 	});
 });

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    POST 与 GET 简写方法格式：

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

    • 1
    • 2

    请求方式：

     $http.get, $http.head, $http.post, $http.put, $http.delete, $http.jsonp, $http.patch

    • 1

  10. 定时器：

    $timeout：

    var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
	$scope.myHeader = "Hello World!";
	$timeout(function () {
		$scope.myHeader = "How are you today?";
	}, 2000);
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    $interval：

    var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
	$scope.theTime = new Date().toLocaleTimeString();
	$interval(function () {
		$scope.theTime = new Date().toLocaleTimeString();
	}, 1000);
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

  11. ng-options：
    下拉菜单：

    <div ng-app="myApp" ng-controller="myCtrl">
	<select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names"></select>
</div>
<script>
	var app = angular.module('myApp', []);
	app.controller('myCtrl', function($scope) {
		$scope.names = ["Google", "Runoob", "Taobao"];
	});
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    可以是对象：

    	<div ng-app="myApp" ng-controller="myCtrl">
		<p>选择网站:</p>
		<select ng-model="selectedSite" ng-options="x.site for x in sites"></select>
		<h1>你选择的是: {{selectedSite.site}}</h1>
		<p>网址为: {{selectedSite.url}}</p>
	</div>
	<script>
		var app = angular.module('myApp', []);
		app.controller('myCtrl', function($scope) {
		   $scope.sites = [
				{site : "Google", url : "http://www.google.com"},
				{site : "Runoob", url : "http://www.runoob.com"},
				{site : "Taobao", url : "http://www.taobao.com"}
			];
		});
	</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

  12. ng-disabled, ng-show, ng-hide

    ng-disabled: //存在但不能点

    	<div ng-app="" ng-init="mySwitch=true">
		<p>
			<button ng-disabled="mySwitch">点我!</button>
		</p>
		<p>
			<input type="checkbox" ng-model="mySwitch">按钮
		</p>
		<p>{{ mySwitch }}</p>
	</div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    ng-show:

    	<div ng-app="">
		<p ng-show="true">我是可见的。</p>
		<p ng-show="false">我是不可见的。</p>
	</div>
	
	<div ng-app="" ng-init="hour=13">
	<p ng-show="hour > 12">我是可见的。</p>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    ng-hide:

    	<div ng-app="">
		<p ng-hide="true">我是不可见的。</p>
		<p ng-hide="false">我是可见的。</p>
	</div>

    • 1
    • 2
    • 3
    • 4

  13. ng-click:

    <div ng-app="" ng-controller="myCtrl">
	<button ng-click="count = count + 1">点我！</button>
	<p>{{ count }}</p>
</div>

    • 1
    • 2
    • 3
    • 4

  14. 创建模块, 添加控制器

    创建模块:

    var app = angular.module("myApp", []);

    • 1

    添加控制器:

    app.controller("myCtrl", function($scope) {
	$scope.firstName	= "John";
	$scope.lastName= "Doe";
});

    • 1
    • 2
    • 3
    • 4

  15. 服务：

    <div ng-app="myApp" ng-controller="myCtrl">
	<p>在获取数组 [255, 251, 200] 值时使用过滤器:</p>
		<ul>
		  <li ng-repeat="x in counts">{{x | myFormat}}</li>
		</ul>
	<p>过滤器使用服务将10进制转换为16进制。</p>
</div>
<script>
	var app = angular.module('myApp', []);
	// 创建自定义服务，链接到你的模块中：
	app.service('hexafy', function() {
		this.myFunc = function (x) {
			return x.toString(16);
		}
	});
	// 要使用自定义服务，需要在定义控制器的时候独立添加，设置依赖关系:
	app.filter('myFormat',['hexafy', function(hexafy) {
		return function(x) {
			return hexafy.myFunc(x);
		};
	}]);
	app.controller('myCtrl', function($scope) {
		$scope.counts = [255, 251, 200];
	});
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

  16. 表单：

    示例一：

    	<div ng-app="myApp" ng-controller="formCtrl">
	// novalidate属性是在 HTML5 中新增的。禁用了使用浏览器的默认验证。
	  <form novalidate>   
		First Name:<br>
		<input type="text" ng-model="user.firstName"><br>
		Last Name:<br>
		<input type="text" ng-model="user.lastName">
		<br><br>
		<button ng-click="reset()">RESET</button>
	  </form>
	  <p>form = {{user}}</p>
	  <p>master = {{master}}</p>
	</div>
	<script>
		var app = angular.module('myApp', []);
		app.controller('formCtrl', function($scope) {
			$scope.master = {firstName: "John", lastName: "Doe"};
			$scope.reset = function() {
				$scope.user = angular.copy($scope.master);
			};
			$scope.reset();
		});
	</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    示例二：

    <!DOCTYPE html>
	<html>
	<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
	<body>
	<h2>Validation Example</h2>
	<form  ng-app="myApp"  ng-controller="validateCtrl"name="myForm" novalidate>
		<p>用户名:<br>
		  <input type="text" name="user" ng-model="user" required>
		  <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
		  <span ng-show="myForm.user.$error.required">用户名是必须的。</span>
		  </span>
		</p>

		<p>邮箱:<br>
		  <input type="email" name="email" ng-model="email" required>
		  <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
		  <span ng-show="myForm.email.$error.required">邮箱是必须的。</span>
		  <span ng-show="myForm.email.$error.email">非法的邮箱。</span>
		  </span>
		</p>

		<p>
		  <input type="submit"
		  ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
		  myForm.email.$dirty && myForm.email.$invalid">
		</p>
	</form>
	<script>
		var app = angular.module('myApp', []);
		app.controller('validateCtrl', function($scope) {
			$scope.user = 'John Doe';
			$scope.email = 'john.doe@gmail.com';
		});
	</script>
	</body>
	</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36

    附加：

    			$dirty	表单有填写记录
			$valid	字段内容合法的
			$invalid	字段内容是非法的
			$pristine	表单没有填写记录

    • 1
    • 2
    • 3
    • 4

  17. 全局API:

    			API																	描述
	angular.lowercase (<angular1.7）
	angular.$$lowercase()（angular1.7+）			转换字符串为小写
	angular.uppercase() (<angular1.7）
	angular.$$uppercase()（angular1.7+）			转换字符串为大写
	angular.isString()												判断给定的对象是否为字符串，如果是返回 true。
	angular.isNumber()											判断给定的对象是否为数字，如果是返回 true。

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

  18. 包含：

    runoob.htm 文件代码：

    <h1>菜鸟教程</h1>
<p>这是一个被包含的 HTML 页面，使用 ng-include 指令来实现！</p>

    • 1
    • 2

    include.html

    <body ng-app="">
	<div ng-include="'runoob.htm'"></div>
</body>

    • 1
    • 2
    • 3

  19. ngAnimate

    ngAnimate 模型可以添加或移除 class 。
    ngAnimate 模型并不能使 HTML 元素产生动画，但是 ngAnimate 会监测事件，类似隐藏显示 HTML 元素 ，如果事件发生 ngAnimate 就会使用预定义的 class 来设置 HTML 元素的动画。
    AngularJS 添加/移除 class 的指令:

    ng-show, ng-hide, ng-class, ng-view, ng-include, ng-repeat, ng-if, ng-switc

    • 1

    ng-show 和 ng-hide 指令用于添加或移除 ng-hide class 的值。
    其他指令会在进入 DOM 会添加 ng-enter 类，移除 DOM 会添加 ng-leave 属性。
    当 HTML 元素位置改变时，ng-repeat 指令同样可以添加 ng-move 类 。
    此外， 在动画完成后，HTML 元素的类集合将被移除。例如： ng-hide 指令会添加以下类：

    ng-animate
ng-hide-animate
ng-hide-add (如果元素将被隐藏)
ng-hide-remove (如果元素将显示)
ng-hide-add-active (如果元素将隐藏)
ng-hide-remove-active (如果元素将显示)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

  20. AngularJS 路由:

    简单示例：

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AngularJS 路由实例 - 菜鸟教程</title>
<script src="https://cdn.bootcss.com/angular.js/1.7.0/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.7.0/angular-route.min.js"></script>
</head>
<body ng-app='routingDemoApp'>
 
	<h2>AngularJS 路由应用</h2>
	<ul>
		<li><a href="#!/">首页</a></li>
		<li><a href="#!/computers">电脑</a></li>
		<li><a href="#!/printers">打印机</a></li>
		<li><a href="#!/blabla">其他</a></li>
	</ul>
	 
	<div ng-view></div>   // 内容显示位置
	<script>
		angular.module('routingDemoApp',['ngRoute'])
		.config(['$routeProvider', function($routeProvider){
			$routeProvider
			.when('/',{template:'这是首页页面'})
			.when('/computers',{template:'这是电脑分类页面'})
			.when('/printers',{template:'这是打印机页面'})
			.otherwise({redirectTo:'/'});
		}]);
	</script>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31

    路由设置对象:

    	$routeProvider.when(url, {
	template: string,    // 插入简单的 HTML 内容
	templateUrl: string,   // 插入 HTML 模板文件如：'views/computers.html'
	controller: string, function 或 array,  // function、string或数组类型，在当前模板上执行的controller函数，生成新的scope
	controllerAs: string,  // string类型，为controller指定别名。
	redirectTo: string, function,  // 重定向的地址。如： {redirectTo:'/'}
	resolve: object<key, function>  // 指定当前controller所依赖的其他模块。
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    示例二：

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AngularJS 路由实例 - 菜鸟教程</title>
<script src="https://cdn.bootcss.com/angular.js/1.7.0/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.7.0/angular-route.min.js"></script>
<script type="text/javascript">
angular.module('ngRouteExample', ['ngRoute'])
.controller('HomeController', function ($scope, $route) { $scope.$route = $route;})
.controller('AboutController', function ($scope, $route) { $scope.$route = $route;})
.config(function ($routeProvider) {
	$routeProvider.
	when('/home', {
		templateUrl: 'embedded.home.html',
		controller: 'HomeController'
	}).
	when('/about', {
		templateUrl: 'embedded.about.html',
		controller: 'AboutController'
	}).
	otherwise({
		redirectTo: '/home'
	});
});
</script>
 
  
</head>
 
<body ng-app="ngRouteExample" class="ng-scope">
  <script type="text/ng-template" id="embedded.home.html">
	  <h1> Home </h1>
  </script>
 
  <script type="text/ng-template" id="embedded.about.html">
	  <h1> About </h1>
  </script>
 
  <div> 
	<div id="navigation">  
	  <a href="#!/home">Home</a>
	  <a href="#!/about">About</a>
	</div>
	  
	<div ng-view="">
	</div>
  </div>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50

  21. 小总结：

    1） 元素包含了 AngularJS 应用 (ng-app=)。

    <div> 元素定义了 AngularJS 控制器的作用域 (ng-controller=)。在一个应用可以有很多控制器。

    • 1

    2）AngularJS 指令:

    指令							描述
ng-app					定义应用程序的根元素。
ng-bind					绑定 HTML 元素到应用程序数据
ng-bind-html			绑定 HTML 元素的 innerHTML 到应用程序数据，并移除 HTML 字符串中危险字符
ng-bind-template		规定要使用模板替换的文本内容
ng-blur					规定 blur 事件的行为
ng-change				规定在内容改变时要执行的表达式
ng-checked				规定元素是否被选中
ng-class				指定 HTML 元素使用的 CSS 类
ng-class-even			类似 ng-class，但只在偶数行起作用
ng-class-odd			类似 ng-class，但只在奇数行起作用
ng-click				定义元素被点击时的行为
ng-cloak				在应用正要加载时防止其闪烁
ng-controller			定义应用的控制器对象
ng-copy					规定拷贝事件的行为
ng-csp					修改内容的安全策略
ng-cut					规定剪切事件的行为
ng-dblclick				规定双击事件的行为
ng-disabled				规定一个元素是否被禁用
ng-focus				规定聚焦事件的行为
ng-form					指定 HTML 表单继承控制器表单
ng-hide					隐藏或显示 HTML 元素
ng-href	为 				the <a> 元素指定链接
ng-if					如果条件为 false 移除 HTML 元素
ng-include				在应用中包含 HTML 文件
ng-init					定义应用的初始化值
ng-jq					定义应用必须使用到的库，如：jQuery
ng-keydown				规定按下按键事件的行为
ng-keypress				规定按下按键事件的行为
ng-keyup				规定松开按键事件的行为
ng-list					将文本转换为列表 (数组)
ng-model				绑定 HTML 控制器的值到应用数据
ng-model-options		规定如何更新模型
ng-mousedown			规定按下鼠标按键时的行为
ng-mouseenter			规定鼠标指针穿过元素时的行为
ng-mouseleave			规定鼠标指针离开元素时的行为
ng-mousemove			规定鼠标指针在指定的元素中移动时的行为
ng-mouseover			规定鼠标指针位于元素上方时的行为
ng-mouseup				规定当在元素上松开鼠标按钮时的行为
ng-non-bindable			规定元素或子元素不能绑定数据
ng-open					指定元素的 open 属性
ng-options				在 <select> 列表中指定 <options>
ng-paste				规定粘贴事件的行为
ng-pluralize			根据本地化规则显示信息
ng-readonly				指定元素的 readonly 属性
ng-repeat				定义集合中每项数据的模板
ng-selected				指定元素的 selected 属性
ng-show					显示或隐藏 HTML 元素
ng-src					指定 <img> 元素的 src 属性
ng-srcset				指定 <img> 元素的 srcset 属性
ng-style				指定元素的 style 属性
ng-submit				规定 onsubmit 事件发生时执行的表达式
ng-switch				规定显示或隐藏子元素的条件
ng-transclude			规定填充的目标位置
ng-value				规定 input 元素的值

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55

    3）AngularJS 事件：

    ng-click, ng-dbl-click, ng-mousedown, ng-mouseenter, ng-mouseleave, ng-mousemove, ng-keydown, ng-keyup, ng-keypress, ng-change

    • 1

    4）AngularJS 验证属性：

    $dirty, $invalid, $erro

    • 1

    5）AngularJS 全局 API：

    	API							描述
angular.lowercase()		将字符串转换为小写
angular.uppercase()		将字符串转换为大写
angular.copy()			数组或对象深度拷贝
angular.forEach()		对象或数组的迭代函数

    • 1
    • 2
    • 3
    • 4
    • 5

    6）JSON：

    	API						描述
angular.fromJson()		反序列化 JSON 字符串
angular.toJson()		列化JSON 字符串

    • 1
    • 2
    • 3

  22. $q：

    defer的方法:

       	function asyncGreet(name) {
   		 var deferred = $q.defer(); //通过$q.defer()创建一个deferred延迟对象，在创建一个deferred实例时，也会创建出来一个派生的promise对象，使用deferred.promise就可以检索到派生的promise。
   		 deferred.notify('About to greet ' + name + '.'); //延迟对象的notify方法。
   		 if (okToGreet(name)) {
   			deferred.resolve('Hello, ' + name + '!'); //任务被成功执行
   		 } else {
   			deferred.reject('Greeting ' + name + ' is not allowed.'); //任务未被成功执行
   		 }
   		return deferred.promise; //返回deferred实例的promise对象
   	}
   	function okToGreet(name) {
   		 //只是mock数据，实际情况将根据相关业务实现代码
   		 if(name == 'Superman') return true; 
   		 else return false;
   	}
   	var promise = asyncGreet('Superman'); //获得promise对象
   	//promise对象的then函数会获得当前任务也就是当前deferred延迟实例的执行状态。它的三个回调函数分别会在resolve(), reject() 和notify()时被执行
   	promise.then(function(greeting) {
   	 alert('Success: ' + greeting);
   	}, function(reason) {
   	 alert('Failed: ' + reason);
   	}, function(update) {
   	 alert('Got notification: ' + update);
   	});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

  23. Directive

    var myModule = angular.module(...);  
myModule.directive('directiveName', function factory(injectables) {  
 var directiveDefinitionObject = {  
 　　priority: 0,  
 　　template: '<div></div>',  
 　　templateUrl: 'directive.html',  
 　　replace: false, 
 　　transclude: false,  
 　　restrict: 'A',
 　　scope: false,
 　　compile: function compile(tElement, tAttrs, transclude) {  
 　　　　return {  
 　　　　　　pre: function preLink(scope, iElement, iAttrs, controller) { ... }, 
 　　　　　　post: function postLink(scope, iElement, iAttrs, controller) { ... } 
　　　　}  
　　},  
 　　link: function postLink(scope, iElement, iAttrs) { ... }  
};  
 return directiveDefinitionObject;  
});  
1.restrict
	（字符串）可选参数，指明指令在DOM里面以什么形式被声明；取值有：E(元素),A(属性),C(类),M(注释)，其中默认值为A；当然也可以两个一起用，比如EA.表示即可以是元素也可以是属性。
	E(元素)：<directiveName></directiveName>  
	A(属性)：<div directiveName='expression'></div>  
	C(类)： <div class='directiveName'></div>  
	M(注释)：<--directive:directiveName expression--> 
2.priority
	(数字)，可选参数，指明指令的优先级，若在单个DOM上有多个指令，则优先级高的先执行；
3.terminal
	（布尔型），可选参数，可以被设置为true或false，若设置为true，则优先级低于此指令的其他指令则无效，不会被调用(优先级相同的还是会执行)
4.template（字符串或者函数）可选参数，可以是：
	（1）一段HTML文本
		template: '<div><h1>Hi 我是小小龙~~~</h1></div>',  
	（2）一个函数，可接受两个参数tElement和tAttrs
		其中tElement是指使用此指令的元素，而tAttrs则实例的属性，它是一个由元素上所有的属性组成的集合（对象）形如：
			<hello-world2 title = '我是第二个directive'></hello-world2>  
			其中title就是tattrs上的属性
			
		<script type="text/javascript">  
		var app = angular.module('myApp', []);	
		
		app.directive("helloWorld2",function(){  
        return{  
         restrict:'EAC',  
         template: function(tElement,tAttrs){  
            var _html = '';  
            _html += '<div>' +'hello '+tAttrs.title+'</div>';  
            return _html;  
				}  
			};  
		});
		
5.templateUrl（字符串或者函数），可选参数，可以是
	（1）一个代表HTML文件路径的字符串
	（2）一个函数，可接受两个参数tElement和tAttrs（大致同上）
		注意：在本地开发时候，需要运行一个服务器，不然使用templateUrl会报错 Cross Origin Request Script（CORS）错误。由于加载html模板是通过异步加载的，若加载大量的模板会拖慢网站的速度，这里有个技巧，就是先缓存模板
		你可以再你的index页面加载好的，将下列代码作为你页面的一部分包含在里面。		
		第一种方式：
			<script type="text/javascript">  
			var app = angular.module('myApp', []);  
			app.directive('helloWorld', function() {  
				return {  
					restrict: 'E',  
					templateUrl: 'hello.html',  
					replace: true  
						};  
					});  
			</script>  
			<script type='text/ng-template' id='hello.html'>  
				 <div><h1>Hi 我是林炳文~~~</h1></div>  
			</script>
		第二种方式：
			<script type="text/javascript">  
			var app = angular.module('myApp', []);  
			app.directive('helloWorld', function() {  
				return {  
					restrict: 'E',  
					templateUrl: 'hello.html',  
					replace: true  
				};  
			});  
			app.run(["$templateCache", function($templateCache) {  
			  $templateCache.put("hello.html",  
				"<div><h1>Hi 我是林炳文~~~</h1></div>");  
			}]);  
			</script>  

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86

  24. angular框架

    npm install -g cnpm --registry=https://registry.npm.taobao.org  // 安装cnpm
cnpm install -g @angular/cli   // 安装脚手架
ng new angulardemo  // 创建项目  
cnpm install   // 安装依赖
ng serve --open  // 启动项目

angular6中使用socket.io报global is not define 错误？
	找到polyfills文件加入 (window as any).global = window;

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/66586
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。