angular js基础学习

最新推荐文章于 2022-05-02 14:17:52 发布

Bestest~

最新推荐文章于 2022-05-02 14:17:52 发布

阅读量435

点赞数

分类专栏：前端开发文章标签： Angular Js

本文链接：https://blog.csdn.net/CEVERY/article/details/83855539

版权

前端开发专栏收录该内容

5 篇文章 1 订阅

订阅专栏

使用之前在body之后添加个对应的angular脚本:

<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>

案例一：

<div ng-app="">
		<p>名字 : <input type="text" ng-model="name"></p>
		<h1>Hello {{name}}</h1>
	</div>

运行结果：解析：ng-app必须加上，不加上{{name}}元素会直接输出，加上之后{{name}}对应ng-model里面的name属性，在此案例中该属性为自己输入的。

案例二：

<div ng-app="" ng-init="firstName='John'">
		<p>姓名为 <span ng-bind="firstName"></span></p> 
	</div>

运行结果：姓名为 Johssn 解析：ng-init中初始化了firstName这个属性就是ng-model为firstName这个属性的值，通过ng-bind属性输出，不是通过{{firstName}}输出，此时span标签内的值都将会被firstName属性覆盖。

案例三：

<div ng-app="">
 		<p>我的第一个表达式： {{ 5 + 5 }}</p>
	</div>

AngularJs数字

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

AngularJs对象

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
		<p>姓为 {{ person.lastName }}</p> 
	</div>

AngularJs字符串

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

AngularJs数组

<div ng-app="" ng-init="points=[1,15,19,2,40]">
		<p>第三个值为 {{ points[2] }}</p>
	</div>

解析：{{5+5}}为算是表达式。

案例四：

AngularJS 模块（Module）定义了 AngularJS 应用。 AngularJS 控制器（Controller）用于控制 AngularJS 应用。 ng-app指令指明了应用, ng-controller 指明了控制器。

<div ng-app="myApp" ng-controller="myCtrl">
	名: <input type="text" ng-model="firstName"><br>
	姓: <input type="text" ng-model="lastName"><br>    也可以直接使用这种方法，没有ng-model的方法进行初始化<h1>{{carname}}</h1>
	<br>
	姓名: {{firstName + " " + lastName}}
	</div>
	<script>
		var App = Angular.module('myapp', []);
		app.controller('myctrl', Function($scope) {
			$scope.firstname= "john";
			$scope.lastname= "doe";
		});
	</script>

解析：angularJs三层结构module、controller、modle，利用该方法可以统一设置初始化的属性值。

<div ng-app="myApp"         ng-controller="myCtrl">
		<ul>
		    <li ng-repeat="x in names">{{x}}</li>
		</ul>
	</div>
	<script>
		var app = angular.module('myApp', []);
		app.controller('myCtrl', function($scope) {
		    $scope.names = ["Emil", "Tobias", "Linus"];
		});
	</script>

解析：初始化数组输出。不通过ng-init定义数组。

案例五:循环对象数组

<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>

案例六：自定义指令

示例两种方法使用自定义指令

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

通过类名使用自定义指令

<body ng-app="myApp">
		<div class="runoob-directive"></div>
		<script>
			var app = angular.module("myApp", []);
			app.directive("runoobDirective", function() {
				return {
    				restrict : "C",
    				template : "<h1>自定义指令!</h1>"
				};
			});
		</script>
		<p><strong>注意：</strong> 你必须设置 <b>restrict</b> 的值为 "C" 才能通过类名来调用指令。</p>
	</body>

使用注释使用自定义属性

<body ng-app="myApp">
		<!-- directive: runoob-directive -->
		<script>
			var app = angular.module("myApp", []);
			app.directive("runoobDirective", function() {
    			return {
        			restrict : "M",
        			replace : true,
        			template : "<h1>自定义指令!</h1>"
    			};
			});
		</script>
		<p><strong>注意：</strong> 我们需要在该实例添加 <strong>replace</strong> 属性， 否则评论是不可见的。</p>
		<p><strong>注意：</strong> 你必须设置 <b>restrict</b> 的值为 "M" 才能通过注释来调用指令。</p>
	</body>

解析：restrict 值可以是以下几种: E 作为元素名使用 A 作为属性使用 C 作为类名使用 M 作为注释使用 restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令.

案例七：验证用户输入

<body>
		<form ng-app="" name="myForm">
			Email:
			<input type="email" name="myAddress" ng-model="text">
			<span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
		</form>
		<p>在输入框中输入你的邮箱地址，如果不是一个合法的邮箱地址，会弹出提示信息。</p>
	</body>

解析：myform.myAddress.$error.email意思为ng-app.ng-model.$error.email中的name。

应用状态：

<form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">
		Email:
		<input type="email" name="myAddress" ng-model="myText" required>
		<p>编辑邮箱地址，查看状态的改变。</p>
		<h1>状态</h1>
		<p>Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。</p>
		<p>Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)。</p>
		<p>Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。</p>
	</form>

	<style>
		input.ng-invalid {
			background-color: lightblue;
		}
	</style>
	</head>
	<body>
		<form ng-app="" name="myForm">
			输入你的名字:
			<input name="myName" ng-model="myText" required>
		</form>
		<p>编辑文本域，不同状态背景颜色会发生变化。</p>
		<p>文本域添加了 required 属性，该值是必须的，如果为空则是不合法的。</p>
	</body>

解析：为空则显示颜色变化ng-model 指令根据表单域的状态添加/移除以下类： ng-empty ng-not-empty ng-touched ng-untouched ng-valid ng-invalid ng-dirty ng-pending ng-pristine

案例八：scope上面绑定点击事件

<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>

scope和rootScope的区别

<div ng-app="myApp" ng-controller="myCtrl">
		<h1>姓氏为 {{lastname}} 家族成员:</h1>
		<ul>
	    	<li ng-repeat="x in names">{{x}} {{lastname}}</li>
		</ul>
	</div>
	<script>
		var app = angular.module('myApp', []);
		app.controller('myCtrl', function($scope, $rootScope) {
	    	$scope.names = ["Emil", "Tobias", "Linus"];
	    	$rootScope.lastname = "Refsnes";
		});
	</script>
	<p>注意 $rootScope 在循环对象内外都可以访问。</p>

	姓名: {{fullName()}}
	$scope.fullName = function() {
	        return $scope.firstName + " " + $scope.lastName;
	}

案例九：引入外部文件

<div ng-app="myApp" ng-controller="namesCtrl">
	<ul>
  		<li ng-repeat="x in names">
    		{{ x.name + ', ' + x.country }}
  		</li>
	</ul>
</div>
<script src="namesController.js"></script>

namesController.js文件

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

案例十：过滤器

<div ng-app="myApp" ng-controller="costCtrl">
	数量: <input type="number" ng-model="quantity">
	价格: <input type="number" ng-model="price">
	<p>总价 = {{ (quantity * price) | currency }}</p>
</div>
<script>
	var app = angular.module('myApp', []);
	app.controller('costCtrl', function($scope) {
	    $scope.quantity = 1;
	    $scope.price = 9.99;
	});
</script>

<div ng-app="myApp" ng-controller="namesCtrl">
	<ul>
	  <li ng-repeat="x in names | orderBy:'country'">
		  {{ x.name + ', ' + x.country }}
	  </li>
	</ul>
</div>

自定义过滤器

<div ng-app="myApp" ng-controller="myCtrl">
	姓名: {{ msg | reverse }}
</div>
<script>
	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("");
	    }
	});
</script>

过滤器					描述
	currency			格式化数字为货币格式。
	filter				从数组项中选择一个子集。
	lowercase			格式化字符串为小写。
	orderBy				根据某个表达式排列数组。
	uppercase			格式化字符串为大写。

继续学习请参照对应网址：https://www.runoob.com/angularjs/angularjs-expressions.html

Bestest~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录