AngularJS 初次使用,请多指教_初次使用angular-优快云博客

本文链接：https://blog.youkuaiyun.com/sunshinezx8023/article/details/86596125

本文介绍了AngularJS框架的基本概念，包括如何通过script标签引入angular.js文件，以及常见指令如ng-app、ng-controller、ng-model等的使用方法。此外，还详细讲解了ng-repeat指令在数组和对象遍历中的应用，以及解决重复元素问题的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介

AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。

AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中

下载

各个 angular.js 版本下载： https://github.com/angular/angular.js/releases

常用指令

ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序 的"所有者"。

ng-controller 指令定义了应用程序控制器。

ng-model 指令把输入域的值绑定到应用程序变量 name。

ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。

ng-repeat 指令会重复一个 HTML 元素(通俗的说就是变量数组)

以上列举的都是我此次页面所用到的奥!

开始

<body style="background-color: #f5f5f5;">
		<div id="container" style="margin-top: 40px;" ng-app="msiop">
			{{5+5}}
		</div>
	</body>
	
	<script>
		//注意这里的msiop与页面的ng-app的值是一致的
		var app = angular.module('msiop', []);
	</script>

页面输出为10; 注意:如果ng-app不添加的话页面输出为:{{5+5}}

AngularJS 指令是以 ng 作为前缀的 HTML 属性。

<body style="background-color: #f5f5f5;">
		<div id="container" style="margin-top: 40px;" ng-app="msiop">
			<div ng-controller="top">
					<span class="title" >{{title}}</span>
			</div>
                <!--注意 这里的title是没有值的-->
			<span class="title" >{{title}}</span>
		</div>
	</body>
	
	<script>
		//注意这里的msiop与页面的ng-app的值是一致的
		var app = angular.module('msiop', []);
		//这里的top就是ng-controller="top"
		app.controller('top', function($scope,$http) {
			$scope.title = "angular js";
		});
	</script>

页面输出:angular js

注意:第二个span里面是没有值的,因为我们定义的ng-controller的div并没有包含第二个span,所以这里是获取不到title的值的

菜鸟教程解释:ng-app指令指明了应用, ng-controller 指明了控制器。

遍历数组/对象数组

<div ng-app="myApp">
  <div ng-controller="testCtrl">{{test1}}
    <div>
      <label for="" ng-repeat="item in list1">{{item.id}} -- {{item.value}}</label>
      <p></p>
       
      <label for="" ng-repeat="(key, value) in obj1">{{key}} -- {{value}}</label>
      <p>
         
      </p>
          <!--对于obj遍历的话 会根据key的首字母排序 
如果需要传值的话:ng-click="testSned(value[0],key)"  注意如果key就是0,1的话就直接value[0] -->
      <label ng-repeat="(key, value) in obj2" >
        {{key}} -- {{value.text}} -- {{value.value}}
      </label>
       
    </div>
  </div>
</div>

var app = angular.module('myApp', []);
app.controller('testCtrl', function ($scope) {
  $scope.test1 = 'tt';
  $scope.list1 = [{
    id: '1',
    value:'seti'
  }, {
    id:'2',
    value:'kuma'
  }, {
    id: '3',
    value: 'cent'
  }];
  $scope.obj1 = {
    '1': 'seti',
      '2': 'kuma',
      '3': 'cent'
  };
  $scope.obj2 = {
    'ins':{text:'seti', value:'s1'},
    'abc':{text:'kuma', value:'s2'},
    'coln':{text:'cent', value:'s3'}
  };
});

关于ng-repeat遍历时,如果数组重复报错:ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify uniqu

var list = ['123','123','123']
<div ng-repeat="x in list"> 
  {{x}} 
</div>

解决:在ng-repeat后面加上 track by $index

<div ng-repeat="x in list track by $index"> 
  {{x}} 
</div>

未完待续............下班ing.........